6

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

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

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

我需要服务人员的原因是发送通知。但是，我遇到了麻烦，因为似乎唯一支持的工作人员在 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。

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

4

2 回答 2

0

我没有使用你的插件，但我使用了 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'
    }
  }
}
于 2021-06-08T08:15:35.923 回答
0

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

  1. 安装service-worker-loader：

    npm i -D service-worker-loader

  2. ./src/sw.js使用以下示例内容创建一个服务工作者脚本（例如 at ）：

    import { format } from 'date-fns'

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

  3. 在你的入口文件中导入 service worker 脚本：

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

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

演示

于 2021-07-12T05:18:59.637 回答