Optimize prefetch

packages/parser/src/sceneParser.ts

@@ -38,12 +38,13 @@ export const sceneParser = (
   let assetsList: Array<IAsset> = []; // 场景资源列表
   let subSceneList: Array<string> = []; // 子场景列表
   const sentenceList: Array<ISentence> = rawSentenceListWithoutEmpty.map(
-    (sentence) => {
+    (sentence, index) => {
       const returnSentence: ISentence = scriptParser(
         sentence,
         assetSetter,
         ADD_NEXT_ARG_LIST,
         SCRIPT_CONFIG_MAP,
+        index,
       );
       // 在这里解析出语句可能携带的资源和场景，合并到 assetsList 和 subSceneList
       assetsList = [...assetsList, ...returnSentence.sentenceAssets];

packages/parser/src/scriptParser/assetsScanner.ts

@@ -12,6 +12,7 @@ export const assetsScanner = (
   command: commandType,
   content: string,
   args: Array<arg>,
+  lineNumber: number,
 ): Array<IAsset> => {
   let hasVocalArg = false;
   const returnAssetsList: Array<IAsset> = [];
@@ -22,7 +23,7 @@ export const assetsScanner = (
         returnAssetsList.push({
           name: e.value as string,
           url: e.value as string,
-          lineNumber: 0,
+          lineNumber,
           type: fileType.vocal,
         });
       }
@@ -36,39 +37,39 @@ export const assetsScanner = (
     returnAssetsList.push({
       name: content,
       url: content,
-      lineNumber: 0,
+      lineNumber,
       type: fileType.background,
     });
   }
   if (command === commandType.changeFigure) {
     returnAssetsList.push({
       name: content,
       url: content,
-      lineNumber: 0,
+      lineNumber,
       type: fileType.figure,
     });
   }
   if (command === commandType.miniAvatar) {
     returnAssetsList.push({
       name: content,
       url: content,
-      lineNumber: 0,
+      lineNumber,
       type: fileType.figure,
     });
   }
   if (command === commandType.video) {
     returnAssetsList.push({
       name: content,
       url: content,
-      lineNumber: 0,
+      lineNumber,
       type: fileType.video,
     });
   }
   if (command === commandType.bgm) {
     returnAssetsList.push({
       name: content,
       url: content,
-      lineNumber: 0,
+      lineNumber,
       type: fileType.bgm,
     });
   }

packages/parser/src/scriptParser/scriptParser.ts

@@ -24,6 +24,7 @@ export const scriptParser = (
   assetSetter: any,
   ADD_NEXT_ARG_LIST: commandType[],
   SCRIPT_CONFIG_MAP: ConfigMap,
+  lineNumber = 0,
 ): ISentence => {
   let command: commandType; // 默认为对话
   let content: string; // 语句内容
@@ -105,7 +106,7 @@ export const scriptParser = (
   }
 
   content = contentParser(newSentenceRaw.trim(), command, assetSetter); // 将语句内容里的文件名转为相对或绝对路径
-  sentenceAssets = assetsScanner(command, content, args); // 扫描语句携带资源
+  sentenceAssets = assetsScanner(command, content, args, lineNumber); // 扫描语句携带资源
   subScene = subSceneScanner(command, content); // 扫描语句携带子场景
   return {
     command: command, // 语句类型

packages/parser/test/parser.test.ts

@@ -49,7 +49,7 @@ test("args", async () => {
       { key: "left", value: true },
       { key: "next", value: true }
     ],
-    sentenceAssets: [{ name: "m2.png", url: 'm2.png', type: fileType.figure, lineNumber: 0 }],
+    sentenceAssets: [{ name: "m2.png", url: 'm2.png', type: fileType.figure, lineNumber: 24 }],
     subScene: [],
     inlineComment: ""
   };

packages/webgal/public/webgal-serviceworker.js

@@ -50,6 +50,24 @@ async function cacheFirst(request) {
   return response;
 }
 
+async function prefetchFromMessage(urlString) {
+  const requestUrl = new URL(urlString, self.location.origin).toString();
+  const request = new Request(requestUrl, { method: 'GET' });
+  if (!isCriticalGameRequest(request)) {
+    return;
+  }
+  const cache = await caches.open(CACHE_NAME);
+  const hasCached = await cache.match(requestUrl);
+  if (hasCached) {
+    return;
+  }
+  const response = await fetch(request);
+  if (response.ok && response.status === 200) {
+    await cache.put(requestUrl, response.clone());
+    logOnce(`message-cache:${requestUrl}`, 'message cached:', new URL(requestUrl).pathname);
+  }
+}
+
 self.addEventListener('fetch', (event) => {
   const { request } = event;
   if (!isCriticalGameRequest(request)) return;
@@ -67,3 +85,15 @@ self.addEventListener('fetch', (event) => {
     }),
   );
 });
+
+self.addEventListener('message', (event) => {
+  const data = event.data || {};
+  if (data.type !== 'WEBGAL_PREFETCH_ASSET' || typeof data.url !== 'string') {
+    return;
+  }
+  event.waitUntil(
+    prefetchFromMessage(data.url).catch((error) => {
+      console.warn(LOG_PREFIX, 'message prefetch failed:', error);
+    }),
+  );
+});

packages/webgal/src/Core/Modules/scene.ts

@@ -24,14 +24,16 @@ export const initSceneData = {
 };
 
 export class SceneManager {
-  public settledScenes: Array<string> = [];
-  public settledAssets: Array<string> = [];
+  public settledScenes: Set<string> = new Set();
+  public settledAssets: Set<string> = new Set();
   public sceneData: ISceneData = cloneDeep(initSceneData);
   public lockSceneWrite = false;
 
   public resetScene() {
     this.sceneData.currentSentenceId = 0;
     this.sceneData.sceneStack = [];
     this.sceneData.currentScene = cloneDeep(initSceneData.currentScene);
+    this.settledScenes.clear();
+    this.settledAssets.clear();
   }
 }

packages/webgal/src/Core/controller/gamePlay/scriptExecutor.ts

@@ -13,6 +13,7 @@ import { IBacklogItem } from '@/Core/Modules/backlog';
 import { SYSTEM_CONFIG } from '@/config';
 import { WebGAL } from '@/Core/WebGAL';
 import { getBooleanArgByKey, getStringArgByKey } from '@/Core/util/getSentenceArg';
+import { prefetchCurrentSceneByProgress } from '@/Core/util/prefetcher/progressPrefetcher';
 
 export const whenChecker = (whenValue: string | undefined): boolean => {
   if (whenValue === undefined) {
@@ -39,6 +40,7 @@ export const whenChecker = (whenValue: string | undefined): boolean => {
  * 执行语句，同步场景状态，并根据情况立即执行下一句或者加入backlog
  */
 export const scriptExecutor = () => {
+  prefetchCurrentSceneByProgress();
   // 超过总语句数量，则从场景栈拿出一个需要继续的场景，然后继续流程。若场景栈清空，则停止流程
   if (
     WebGAL.sceneManager.sceneData.currentSentenceId >

packages/webgal/src/Core/controller/scene/callScene.ts

@@ -2,8 +2,7 @@ import { sceneFetcher } from './sceneFetcher';
 import { sceneParser } from '../../parser/sceneParser';
 import { logger } from '../../util/logger';
 import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
-import uniqWith from 'lodash/uniqWith';
-import { scenePrefetcher } from '@/Core/util/prefetcher/scenePrefetcher';
+import { clearPrefetchLinks } from '@/Core/util/prefetcher/assetsPrefetcher';
 
 import { WebGAL } from '@/Core/WebGAL';
 
@@ -28,11 +27,8 @@ export const callScene = (sceneUrl: string, sceneName: string) => {
     .then((rawScene) => {
       WebGAL.sceneManager.sceneData.currentScene = sceneParser(rawScene, sceneName, sceneUrl);
       WebGAL.sceneManager.sceneData.currentSentenceId = 0;
-      // 开始场景的预加载
-      const subSceneList = WebGAL.sceneManager.sceneData.currentScene.subSceneList;
-      WebGAL.sceneManager.settledScenes.push(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
-      const subSceneListUniq = uniqWith(subSceneList); // 去重
-      scenePrefetcher(subSceneListUniq);
+      clearPrefetchLinks();
+      WebGAL.sceneManager.settledScenes.add(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
       logger.debug('现在调用场景，调用结果：', WebGAL.sceneManager.sceneData);
       WebGAL.sceneManager.lockSceneWrite = false;
       nextSentence();

packages/webgal/src/Core/controller/scene/changeScene.ts

@@ -2,8 +2,7 @@ import { sceneFetcher } from './sceneFetcher';
 import { sceneParser } from '../../parser/sceneParser';
 import { logger } from '../../util/logger';
 import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
-import uniqWith from 'lodash/uniqWith';
-import { scenePrefetcher } from '@/Core/util/prefetcher/scenePrefetcher';
+import { clearPrefetchLinks } from '@/Core/util/prefetcher/assetsPrefetcher';
 
 import { WebGAL } from '@/Core/WebGAL';
 
@@ -22,11 +21,8 @@ export const changeScene = (sceneUrl: string, sceneName: string) => {
     .then((rawScene) => {
       WebGAL.sceneManager.sceneData.currentScene = sceneParser(rawScene, sceneName, sceneUrl);
       WebGAL.sceneManager.sceneData.currentSentenceId = 0;
-      // 开始场景的预加载
-      const subSceneList = WebGAL.sceneManager.sceneData.currentScene.subSceneList;
-      WebGAL.sceneManager.settledScenes.push(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
-      const subSceneListUniq = uniqWith(subSceneList); // 去重
-      scenePrefetcher(subSceneListUniq);
+      clearPrefetchLinks();
+      WebGAL.sceneManager.settledScenes.add(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
       logger.debug('现在切换场景，切换后的结果：', WebGAL.sceneManager.sceneData);
       WebGAL.sceneManager.lockSceneWrite = false;
       nextSentence();

packages/webgal/src/Core/controller/storage/jumpFromBacklog.ts

@@ -8,8 +8,6 @@ import { setVisibility } from '@/store/GUIReducer';
 import { runScript } from '@/Core/controller/gamePlay/runScript';
 import { stopAllPerform } from '@/Core/controller/gamePlay/stopAllPerform';
 import cloneDeep from 'lodash/cloneDeep';
-import uniqWith from 'lodash/uniqWith';
-import { scenePrefetcher } from '@/Core/util/prefetcher/scenePrefetcher';
 
 import { WebGAL } from '@/Core/WebGAL';
 
@@ -44,11 +42,7 @@ export const jumpFromBacklog = (index: number, refetchScene = true) => {
         backlogFile.saveScene.sceneName,
         backlogFile.saveScene.sceneUrl,
       );
-      // 开始场景的预加载
-      const subSceneList = WebGAL.sceneManager.sceneData.currentScene.subSceneList;
-      WebGAL.sceneManager.settledScenes.push(WebGAL.sceneManager.sceneData.currentScene.sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
-      const subSceneListUniq = uniqWith(subSceneList); // 去重
-      scenePrefetcher(subSceneListUniq);
+      WebGAL.sceneManager.settledScenes.add(WebGAL.sceneManager.sceneData.currentScene.sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
     });
   WebGAL.sceneManager.sceneData.currentSentenceId = backlogFile.saveScene.currentSentenceId;
   WebGAL.sceneManager.sceneData.sceneStack = cloneDeep(backlogFile.saveScene.sceneStack);

packages/webgal/src/Core/controller/storage/loadGame.ts

@@ -8,8 +8,6 @@ import { setVisibility } from '@/store/GUIReducer';
 import { restorePerform } from './jumpFromBacklog';
 import { stopAllPerform } from '@/Core/controller/gamePlay/stopAllPerform';
 import cloneDeep from 'lodash/cloneDeep';
-import uniqWith from 'lodash/uniqWith';
-import { scenePrefetcher } from '@/Core/util/prefetcher/scenePrefetcher';
 import { setEbg } from '@/Core/gameScripts/changeBg/setEbg';
 
 import { WebGAL } from '@/Core/WebGAL';
@@ -40,11 +38,7 @@ export function loadGameFromStageData(stageData: ISaveData) {
       loadFile.sceneData.sceneName,
       loadFile.sceneData.sceneUrl,
     );
-    // 开始场景的预加载
-    const subSceneList = WebGAL.sceneManager.sceneData.currentScene.subSceneList;
-    WebGAL.sceneManager.settledScenes.push(WebGAL.sceneManager.sceneData.currentScene.sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
-    const subSceneListUniq = uniqWith(subSceneList); // 去重
-    scenePrefetcher(subSceneListUniq);
+    WebGAL.sceneManager.settledScenes.add(WebGAL.sceneManager.sceneData.currentScene.sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
   });
   WebGAL.sceneManager.sceneData.currentSentenceId = loadFile.sceneData.currentSentenceId;
   WebGAL.sceneManager.sceneData.sceneStack = cloneDeep(loadFile.sceneData.sceneStack);

packages/webgal/src/Core/initializeScript.ts

@@ -8,8 +8,6 @@ import { sceneFetcher } from './controller/scene/sceneFetcher';
 import { sceneParser } from './parser/sceneParser';
 import { bindExtraFunc } from '@/Core/util/coreInitialFunction/bindExtraFunc';
 import { webSocketFunc } from '@/Core/util/syncWithEditor/webSocketFunc';
-import uniqWith from 'lodash/uniqWith';
-import { scenePrefetcher } from './util/prefetcher/scenePrefetcher';
 import PixiStage from '@/Core/controller/stage/pixi/PixiController';
 import axios from 'axios';
 import { __INFO } from '@/config/info';
@@ -51,11 +49,7 @@ export const initializeScript = (): void => {
   // 场景写入到运行时
   sceneFetcher(sceneUrl).then((rawScene) => {
     WebGAL.sceneManager.sceneData.currentScene = sceneParser(rawScene, 'start.txt', sceneUrl);
-    // 开始场景的预加载
-    const subSceneList = WebGAL.sceneManager.sceneData.currentScene.subSceneList;
-    WebGAL.sceneManager.settledScenes.push(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
-    const subSceneListUniq = uniqWith(subSceneList); // 去重
-    scenePrefetcher(subSceneListUniq);
+    WebGAL.sceneManager.settledScenes.add(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
   });
   /**
    * 启动Pixi