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

该回答引用自GPT-3.5,由博主GISer Liu编写：

问题分析：
根据问题描述，您希望解决将 Vue3 Vite 构建的 Web U3D 应用打包成移动应用后每次打开都重新下载的问题。您提供了一段代码，该代码使用了动态创建
<script> 标签的方式加载 U3D
应用的资源。目前的实现是每次打开应用都从服务器重新下载资源，您希望将资源缓存到手机本地，以减少重新下载的次数。
解决方案：

1. 使用本地存储方案： 您可以将 U3D 应用的资源下载到移动应用的本地存储中，然后在应用启动时检查本地是否已存在资源，如果存在则直接加载本地资源，否则再从服务器下载。这样可以避免每次都重新下载资源。
2. 使用Web缓存（App Cache或Service Worker）： 您可以利用浏览器的缓存机制，将 U3D 应用的资源缓存到浏览器本地。可以使用 App Cache 或 Service Worker 技术实现离线缓存，这样用户在没有网络连接的情况下也能够访问应用，并且能够减少服务器的负载。
3. 使用Native存储方案： 如果您的应用是通过原生的移动应用框架（如React Native、Flutter等）构建的，可以利用原生平台提供的文件存储功能，将 U3D 应用的资源保存到设备本地存储中，然后在应用启动时加载本地资源。
   代码实现：
   针对第一种方案，您可以使用本地存储方案，在应用启动时检查本地是否已存在资源，如果不存在则下载资源到本地，否则直接加载本地资源。以下是一个简单的实现示例：
   javascriptCopy code

   // 检查本地是否存在资源
   function checkLocalResources() {
   if (localStorage.getItem('u3d_resources_downloaded')) {
   // 本地已存在资源，直接加载
   loadLocalResources();
   } else {
   // 本地不存在资源，从服务器下载
   downloadResources();
   }
   }
   // 下载资源到本地存储
   function downloadResources() {
   // 发起资源下载请求，例如使用 fetch API
   fetch(buildUrl)
   .then(response => response.blob())
   .then(blob => {
   // 将资源保存到本地存储
   localStorage.setItem('u3d_resources', blob);
   localStorage.setItem('u3d_resources_downloaded', true);
   // 加载资源
   loadLocalResources();
   })
   .catch(error => {
   console.error('资源下载失败：', error);
   });
   }
   // 加载本地资源
   function loadLocalResources() {
   // 从本地存储中获取资源
   const blob = localStorage.getItem('u3d_resources');
   // 创建 Blob 对象
   const blobObject = new Blob([blob], { type: 'application/javascript' });
   // 创建 URL 对象
   const url = URL.createObjectURL(blobObject);
   // 创建 script 标签加载本地资源
   const script = document.createElement('script');
   script.src = url;
   script.onload = () => {
   // 资源加载完成后的操作
   console.log('资源加载完成');
   };
   // 将 script 标签添加到页面中
   document.body.appendChild(script);
   }
   // 在应用启动时检查本地资源
   checkLocalResources();
   

   这段代码首先检查本地是否已存在资源，如果存在则直接加载，否则从服务器下载资源到本地存储后再加载。您可以根据实际需求对代码进行调整和优化。
   这就是针对您问题的解决思路和解决方案。希望能对您有所帮助。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑