Vue Cli 3如何使用官方PWA插件(Service Worker)

Question

在我的第一个vue项目试图与官方PWA插件(https://github.com/yyx990803/register-service-worker)搏斗.我的具体问题:捕获已注册的服务工作者并将其用于任何事情.github自述文件显示了生成的确切文件,并且在实例化后,似乎没有关于如何使用此服务工作者的文档(我是否捕获了注册实例？如果是,如何？)

我发现了这个问题:https://github.com/vuejs/vue-cli/issues/1481 并提供了一个更好的讨论这个问题的地方,因为我找不到任何示例代码或明确的文档如何与此合作.

如果有人有一些示例代码,请分享.Vue和新的cli是令人难以置信的工具,记录这样的事情是增加平台采用的必要步骤

Answer 1

正如已经指出的那样,它更像是"服务工作者"问题,而不是"vue cli"问题.首先,为了确保我们在同一页面上,这里是registerServiceWorker.js的样板内容应该是什么样的(vue cli 3,官方pwa插件):

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'
      )
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    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)
    }
  })
}

如果您没有更改.env文件中的BASE_URL变量,那么它应该对应于您的vue应用程序的根目录.你必须创建一个文件名为服务worker.js在公共文件夹中(这样它复制到你的输出目录上的版本).

现在,重要的是要理解registerServiceWorker.js文件中的所有代码都注册了一个服务工作者并在其生命周期中提供了一些钩子.这些通常用于调试目的,而不是实际编程服务工作者.您可以通过注意registerServiceWorker.js文件将捆绑到app.js文件并在主线程中运行来理解它.

vue-cli 3官方PWA插件基于Google的工作箱,因此要使用服务工作者,您必须首先在项目的根目录下创建名为vue.config.js的文件,并在其中复制以下代码:

// vue.config.js
module.exports = {
    // ...other vue-cli plugin options...
    pwa: {
        // configure the workbox plugin
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            // swSrc is required in InjectManifest mode.
            swSrc: 'public/service-worker.js',
            // ...other Workbox options...
        }
    }
}

如果您已经创建了vue.config.js文件,则只需将pwa属性添加到配置对象即可.这些设置将允许您创建位于的自定义服务工作者,public/service-worker.js并让工作箱中注入一些代码:预缓存清单.它是一个.js文件,其中编译的静态资产的引用列表存储在通常命名的变量中self.__precacheManifest.您必须在生产模式下构建应用程序,以确保这种情况.

由于它是在生产模式下构建时由工作箱自动生成的,因此预缓存清单对于缓存Vue应用程序shell非常重要,因为静态资产通常在编译时分解为块,因此引用这些块非常繁琐每次(重新)构建应用程序时,在服务工作者中.

要预先缓存静态资产,可以将此代码放在service-worker.js文件的开头(也可以使用try/catch语句):

if (workbox) {
    console.log(`Workbox is loaded`);

    workbox.precaching.precacheAndRoute(self.__precacheManifest);

} 
else {
    console.log(`Workbox didn't load`);
}

然后,您可以通过使用基本服务工作者API或使用工作箱的API,继续在同一文件中对服务工作者进行编程.当然,请毫不犹豫地将这两种方法结合起来.

我希望它有所帮助!

Answer 2

作为除上述回答:我写了一篇关于如何进一步去添加一些功能的定制服务工作者,使用上述设置小导.你可以在这里找到它.

要记住四件主要事项:

1. 将Workbox配置vue.config.js为InjectManifest模式,将swSrc键指向自定义服务工作文件/src

2. 在此自定义服务工作者中,将在构建过程中自动添加一些行以导入precache-manifest和workbox CDN.需要在自定义service-worker.js文件中添加以下行以实际预先清除清单文件:

   self.__precacheManifest = [].concat(self.__precacheManifest || []);
   workbox.precaching.suppressWarnings();
   workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
   

3. 收听registerServiceWorker.js文件中的注册事件.您可以使用作为事件处理程序的第一个参数传递的注册对象将消息发布到service-worker.js文件:

   ...
   updated(registration) {
     console.log("New content is available; please refresh.");
     let worker = registration.waiting
     worker.postMessage({action: 'skipWaiting'})
   },
   ...
   

4. 订阅service-worker.js文件中的消息并采取相应措施:

   self.addEventListener("message", (e)=>{
       if (e.data.action=='skipWaiting') self.skipWaiting()
   })
   

希望这有助于某人.