为什么服务人员会自动下载新内容，但不更新？答案

【问题标题】：why service worker download new content automatically, but doesn't update?为什么服务人员会自动下载新内容，但不更新？
【发布时间】：2020-12-27 23:50:23
【问题描述】：

我用这种方式注册 service worker：

/* 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.');
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    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);
    }
  });
}

当我vue-cli-service build --mode production然后我部署到服务器时，在线我可以正确看到日志：

App is being served from cache by a service worker.
Service worker has been registered.
New content is downloading.
New content is available; please refresh.

好像是自动下载内容，但是从现在开始还是一直显示New content is available; please refresh（实际上内容并没有刷新）。好像不会自动刷新？只能下载吗？为什么？

如何刷新updated()？

【问题讨论】：

你试过关闭标签然后再打开吗？
我不想要这个。它应该重新加载“重新加载”页面。为什么关闭/打开...
我很好奇你有没有尝试location.reload？
@Estradiaz 你是什么意思？我认为它会自动重新加载下载内容。我应该写更多的东西吗？
有许多页面使用 Snackbar 来通知新版本以不中断使用。考虑连接不良，10 分钟后页面重新加载，在最坏的情况下让您重新开始.. 但是用户可以通过一条短消息刷新

标签： vue.js service-worker vue-cli

【解决方案1】：

你应该使用skipWaiting service worker 对象的方法。

也许这可以帮助你：

updated(registration){
    const waitingServiceWorker = registration.waiting;

    if (waitingServiceWorker) {
      waitingServiceWorker.addEventListener('statechange', event => {
        if (event.target.state === 'activated') {
          window.location.reload();
        }
      });
      waitingServiceWorker.postMessage({ type: 'SKIP_WAITING' });
    }
}

此代码是否有效取决于您的 service-worker.js 内容。

但想法是一样的，你应该使用skip waiting。

【讨论】：

【解决方案2】：

我在这种情况下所做的是解决一个将为用户重新加载页面的承诺。这很好，因为它会等待，然后在数据进入后重新加载页面。

/* 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.');
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
      Promise.resolve().then(() => { window.location.reload(true); });
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    }
  });
}

【讨论】：