带有 Vue 和 Bundling 的 Service Workers

如何解决带有 Vue 和 Bundling 的 Service Workers

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

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。

对我如何实现我想要实现的目标有任何见解吗？

解决方法

我没有使用你的插件，但我使用了 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'
    }
  }
}

您可以改用 service-worker-loader（基于 worker-loader）。

安装service-worker-loader：
```
npm i -D service-worker-loader
```

使用以下示例内容创建一个 Service Worker 脚本（例如，在 ./src/sw.js）：

import { format } from 'date-fns'

self.addEventListener('install',() => {
  console.log('Service worker installed',format(new Date(),`'Today is a' eeee`))
})

在您的入口文件中导入 Service Worker 脚本：

// main.js
import registerServiceWorker from 'service-worker-loader!./sw'

registerServiceWorker({ scope: '/' }).then(registration => {
  //...
  registration.showNotification('Notification Title',{
    body: 'Hello world!',})
})

demo