vue.js - 带有 Vue 和 Bundling 的 Service Workers

Question

我用 Vue 2 与 Common.js 生成 AMD 捆绑包。我需要能够在运行时自动注册我的服务 worker 。有用的东西:
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' });

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

Service Worker 的注册需要在运行时自动发生，而我不必引用绝对或相对 url。
关于我如何实现我想要完成的目标的任何见解？

Answer 1

我没有使用你的插件，但我使用了 workbox plugin for Vue .配置非常简单并且有据可查。
在已经创建的项目中安装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'
    }
  }
}