Question

我当前的vue应用程序是使用vue-cli创建的，默认情况下它使用register-service-worker软件包。当我在生产环境中成功构建应用程序并将其部署到我的服务器上（也启用了SSL证书）后，将在提供的服务工作者的帮助下按预期方式生成pwa，但是当我对应用程序进行一些更改并部署新的应用程序时重建到服务器后的dist，不会清除浏览器缓存。简而言之，服务人员没有检测到对新版本的任何更改。当我强制重新加载浏览器时，将清除缓存。但是，该解决方案在移动设备上并不方便，而且对于任何用户来说，都不时强制重新加载应用程序以获取更新不是很好的体验。

我什至尝试清除服务工作者提供的updatefound钩子上的缓存，但我认为该事件本身未触发，否则updatefound事件将自行清除缓存。

我当前的registerServiceWorker脚本如下：

/* eslint-disable no-console */

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n'
      );
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      caches.keys().then((keys) => {
        keys.forEach(async (key) => { await caches.delete(key); });
      });
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    },
  });
}

在重建和部署后应如何清除缓存？

PWA的浏览器缓存未针对重新生成的脚本刷新

0 个答案: