代码之家 › 专栏 › 技术社区 › Erik White

vue cli 3如何使用官方的pwa插件(服务工作者)

pwa vue-cli service-worker vue.js

21

Erik White · 技术社区 · 7 年前

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

我发现这个问题: https://github.com/vuejs/vue-cli/issues/1481 我提供了一个更好的地方来讨论这个问题,因为我还没有找到任何关于如何处理这个问题的示例代码或清晰的文档。

如果有人有一些示例代码,请分享。Vue和新的CLI是令人难以置信的工具,记录类似这样的内容是进一步提高平台采用率的必要步骤。

2 回复 | 直到 7 年前

1

35

LeCodex 7 年前

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)
    }
  })
}

lifecycle

// 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...
        }
    }

public/service-worker.js self.__precacheManifest

service-worker.js

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

2

23

kdd 7 年前

here

vue.config.js InjectManifest swSrc /src

precache-manifest workbox CDN service-worker.js

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

registerServiceWorker.js

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

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