vue.js - 为什么 service worker 会自动下载新内容，但不更新？

Question

我这样注册 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.

似乎自动下载了内容，但从现在开始，它仍然总是显示新内容可用；请刷新(实际上，内容并没有刷新)。 好像不会自动刷新？只能下载吗？为什么？

如何在 updated() 上刷新？

Answer 1

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

/* 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);
    }
  });
}