Как правильно интегрировать рабочий ящик в webpack/NPM?

Question

В настоящее время я работаю над довольно большим проектом, у которого много разных зависимостей, распределенных по многим файлам. Для начала я использую NPM и веб-пакет, чтобы управлять большинством этих зависимостей. В документации к рабочему столу есть два отдельных способа для меня интегрировать это, либо через веб-пакет (который буквально просто пример), либо через NPM. Я решил попробовать использовать NPM. Я выполнил следующую команду:

npm install --save-dev workbox-sw

Это добавило workbox-sw к package.json раздел зависимости. Однако всякий раз, когда я пытаюсь импортировать используя:

import Workbox-SW from 'workbox-sw'

это дает мне следующую ошибку:

Uncaught WorkboxError: Workbox выдал ошибку с кодом ошибки:;'not-in-sw'

Я пробовал некоторые другие методы, но только наивно. Документация веб-пакета определенно скучна, и я хотел бы избежать установки других зависимостей для правильной работы. Некоторые другие важные замечания:

1. Я использую Vue.js
2. Я создал несколько разных компонентов, которые взаимодействуют через маршрутизацию. Я пытаюсь импортировать в определенный компонент.

Вот полное сообщение об ошибке:

    Uncaught WorkboxError: An error was thrown by workbox with error code: ;'not-in-sw'
    at eval (webpack-internal:///259:175:40)
    at Object.<anonymous> (http://localhost:8080/app.js:2361:1)
    at __webpack_require__ (http://localhost:8080/app.js:660:30)
    at fn (http://localhost:8080/app.js:86:20)
    at eval (webpack-internal:///173:3:69)
    at Object.<anonymous> (http://localhost:8080/app.js:1795:1)
    at __webpack_require__ (http://localhost:8080/app.js:660:30)
    at fn (http://localhost:8080/app.js:86:20)
    at eval (webpack-internal:///239:8:3)
    at Object.<anonymous> (http://localhost:8080/app.js:2239:1)
WorkboxError    @   workbox-sw.prod.v2.1.1.mjs?efda:155
(anonymous) @   workbox-sw.prod.v2.1.1.mjs?efda:175
(anonymous) @   app.js:2361
__webpack_require__ @   app.js:660
fn  @   app.js:86
(anonymous) @   173:3
(anonymous) @   app.js:1795
__webpack_require__ @   app.js:660
fn  @   app.js:86
(anonymous) @   HomeView.vue?afbe:8
(anonymous) @   app.js:2239
__webpack_require__ @   app.js:660
fn  @   app.js:86
(anonymous) @   index.js?3672:1
(anonymous) @   app.js:1809
__webpack_require__ @   app.js:660
fn  @   app.js:86
(anonymous) @   main.js?1c90:1
(anonymous) @   app.js:1616
__webpack_require__ @   app.js:660
fn  @   app.js:86
(anonymous) @   app.js:2368
__webpack_require__ @   app.js:660
(anonymous) @   app.js:709
(anonymous) @   app.js:712

Answer 1

Конкретная ошибка, которую вы видите, not-in-sw, из-за использования кода, представленного в workbox-sw библиотека снаружи ServiceWorkerGlobalScope, Это произойдет, если вы, например, импортируете код работника сервиса на свою страницу в виде <script> или как веб-работник.

Лучший ресурс, на который я мог бы обратить ваше внимание, - это новое руководство " Начало работы с Workbox For Webpack".