vue3 vite web u3d

Question

vue3 vite web u3d 打包成app后的缓存问题
u3d打包后有一个build文件，放到服务器上通过http下载。打包app后，每次打开app都会重新去下载。怎么把文件存到手机里。

  var buildUrl = "http://xxxxxxx/Build";
    var loaderUrl = buildUrl + "/Brush.loader.js";
    var config = {
        dataUrl: buildUrl + "/Brush.data",
        frameworkUrl: buildUrl + "/Brush.framework.js",
        codeUrl: buildUrl + "/Brush.wasm",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "111",
        productVersion: "0.1",
        showBanner: unityShowBanner,
    }

var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
            progressBarFull.style.width = 100 * progress + "%";
        }).then((unityInstance) => {
            loadingBar.style.display = "none";
            fullscreenButton.onclick = () => {
                unityInstance.SetFullscreen(1);
            };
        }).catch((message) => {
            alert(message);
        });
    };
    document.body.appendChild(script);

Answer 1

晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

针对你的问题，可以有以下解决途径：

1. 使用 PWA 技术实现应用的离线缓存，包括 Manifest 文件配置、Service Worker 编写等，提高应用在离线情况下的访问速度和用户体验。具体可以参考官方文档：https://v3.vuejs.org/guide/progressive-web-apps.html

2. 使用浏览器的本地缓存，配合 Web Storage API 实现缓存策略，避免每次都重新下载资源文件。具体可以参考官方文档：https://v3.vuejs.org/guide/state-management.html#simple-store

3. 使用本地存储库（如 Dexie.js）提供更多功能、接口等，使得缓存更加高效、可靠。Dexie.js 官网：https://dexie.org/

针对以上三种方案，可以根据具体需求和应用场景进行选择。如果采用第一种方案，需要在项目中引入相关库和配置文件，具体操作可以参照官方文档。如果选择第二、三种方案，需要对代码进行修改。

下面是示例代码，供参考：

const cacheName = 'unity-app-cache';

// 在 Service Worker 安装时缓存需要的文件
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll([
        '/Build/Brush.loader.js',
        '/Build/Brush.data',
        '/Build/Brush.framework.js',
        '/Build/Brush.wasm',
      ]);
    })
  );
});

// 在请求资源时从缓存读取
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

修改之后的主程序：

var buildUrl = "/Build"; // 改为相对路径，以免后续出现路径错误
var loaderUrl = buildUrl + "/Brush.loader.js";
var config = {
  dataUrl: buildUrl + "/Brush.data",
  frameworkUrl: buildUrl + "/Brush.framework.js",
  codeUrl: buildUrl + "/Brush.wasm",
  streamingAssetsUrl: "StreamingAssets",
  companyName: "DefaultCompany",
  productName: "111",
  productVersion: "0.1",
  showBanner: unityShowBanner,
};

// 加载 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
  createUnityInstance(canvas, config, (progress) => {
    progressBarFull.style.width = 100 * progress + "%";
  }).then((unityInstance) => {
    loadingBar.style.display = "none";
    fullscreenButton.onclick = () => {
      unityInstance.SetFullscreen(1);
    };
  }).catch((message) => {
    alert(message);
  });
};
document.body.appendChild(script);