Блог

Я использую Vue 2 с Common.js для создания пакета AMD. Мне нужно иметь возможность автоматически регистрировать своего работника службы во время выполнения. Что-то, что работает:

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

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

Причина, по которой мне нужен работник службы, заключается в отправке уведомлений. Однако у меня возникли проблемы с этим, так как, похоже, поддерживаются только рабочие в DedicatedWorkerGlobalScope или SharedWorkers. Однако для отправки «showNotification» мне нужен тип работника службы.

Итак, в основном то, что я делаю:

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

const worker = new Worker()
 

Работает как шарм, как и этот (Рабочий плагин):

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

Впрочем, всегда нормальные работники. Эти люди не обслуживающий персонал, и я уже несколько часов пытаюсь это выяснить. Есть ли конфигурация, которой не хватает для изменения типа? Некоторое понимание было бы здорово.

Чтобы проиллюстрировать, чего я пытаюсь достичь:

Регистрация сотрудника службы должна происходить автоматически во время выполнения, без необходимости ссылаться на абсолютные или относительные URL-адреса.

Есть какие-нибудь идеи о том, как я могу достичь того, чего я пытаюсь достичь?

Я не использовал ваши плагины, но я использовал плагин workbox для 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 ).

1. Устанавливать service-worker-loader :

    npm i -D service-worker-loader
    

2. Создайте сценарий работника службы (например, at ./src/sw.js ) со следующим примером содержимого:

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

3. Импортируйте сценарий работника службы в свой файл ввода:

    // main.js
   import registerServiceWorker from 'service-worker-loader!./sw'
   
   registerServiceWorker({ scope: '/' }).then(registration => {
     //...
     registration.showNotification('Notification Title', {
       body: 'Hello world!',
     })
   })
    

ДЕМОНСТРАЦИЯ