使用 Vue 和捆绑的 Service Worker答案

【问题标题】：Service Workers with Vue and Bundling使用 Vue 和捆绑的 Service Worker
【发布时间】：2021-08-25 05:23:59
【问题描述】：

我使用 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()

像魅力一样工作，就像这个（工人插件）：

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

但是，始终是普通工人。那些不是服务人员和我从几个小时以来一直试图解决这个问题。是否缺少配置来更改类型？一些见解会很棒。

为了说明我想要实现的目标：

Service Worker 的注册需要在运行时自动进行，无需我引用绝对或相对 url。

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

【问题讨论】：

标签： vue.js service-worker web-worker commonjs worker-loader

【解决方案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'
    }
  }
}

【讨论】：

我理解正确吗。这个插件基本上是从 /src 获取一个 service worker 并在运行时自动注册它？
不，插件会在所需目录中创建自己的serviceWorker.js 文件并注册它。
我安装了它并在 vue.config 中添加了配置，但是当“npm run serve”时我没有看到任何服务人员。介意在你的答案中举个例子吗？
问题是，当使用 common.js 构建时，我得到 1 个在 AMD 加载器中使用的包。我没有看到 service-worker 在我的包中生成和注册。

【解决方案2】：

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

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

使用以下示例内容创建一个服务工作者脚本（例如，./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

【讨论】：

你好托尼，我稍后会试试这个，今天会告诉你。非常感谢朋友！
赏金已过期，但我会制作一个新的，以便您稍后获得积分:)