带有 Vue 和 Bundling 的 Service Workers

Question

我使用Vue 2和Common.js来生成一个 AMD Bundle。我需要能够在运行时自动注册我的服务工作者。有用的东西：

https://www.npmjs.com/package/worker-plugin

https://www.npmjs.com/package/worker-loader

我需要 service worker 的原因是为了发送通知。但是，我对此遇到了麻烦，因为似乎唯一支持的工作人员是在 DedicatedWorkerGlobalScope 或 SharedWorkers 中。但是，为了发送“showNotification”，我需要Service Worker 类型。

所以基本上我做什么：

import Worker from "worker-loader!./Worker.js"

const worker = new Worker()

像魅力一样工作，就像这个（Worker Plugin）：

const worker = new Worker('./worker.js', { type: 'module' });

然而，总是正常的工人。那些不是服务人员，我几个小时以来一直在试图解决这个问题。是否缺少更改类型的配置？一些见解会很棒。

为了说明我试图实现的目标：

Service Worker 的注册需要在运行时自动发生，而我不必引用绝对或相对 url。

关于我如何实现我想要完成的目标的任何见解？

Answer 1

我没有使用你的插件，但我使用了Vue 的 workbox 插件。配置非常简单并且有详细的文档记录。

安装在已经创建的项目中

vue add workbox-pwa

配置示例

// Inside vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    manifestOptions: {
      start_url: '/'
    },
    // configure the workbox plugin
    workboxPluginMode: 'GenerateSW', // 'GenerateSW' will lead to a new service worker file being created each time you rebuild your web app.
    workboxOptions: {
      swDest: 'service-worker.js'
    }
  }
}