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

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

我发现了这个问题：https://github.com/vuejs/vue-cli/issues/1481
并且我提供了一个更好的地方来讨论这个,因为我无法找到任何示例代码或有关如何使用它的明确文档.

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

解决方法

正如已经指出的那样,它更像是“服务工作者”问题,而不是“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应用程序的根目录.您必须在公用文件夹中创建名为service-worker.js的文件(以便在构建时将其复制到输出目录中).

现在,重要的是要了解registerServiceWorker.js文件中的所有代码都注册了一个服务工作者并为其lifecycle提供了一些挂钩.这些通常用于调试目的而不是实际编程服务工作者.您可以通过注意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`);
}

然后,您可以通过使用basic service worker API或使用workbox’s API继续在同一文件中对服务工作者进行编程.当然,请不要犹豫,将这两种方法结合起来.

我希望它有所帮助！

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

解决方法

相关文章