Как импортировать скрипт в Service Worker при использовании Webpack

Question

В Service Worker я пытаюсь импортировать другой вспомогательный скрипт, используя importScripts, однако я получаю Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:5000/src/js/utility.js' failed to load.

У меня есть следующий код в Service Worker:

importScripts('../src/js/utility.js');

workbox.routing.registerRoute(/.*(?:jsonplaceholder\.typicode)\.com.*$/, function(args){
    console.log('Json placeholder being called');
    // Send request to the server.
    return fetch(args.event.request)
        .then(function(res){
            // Clone the response obtained from the server.
            var clonedRes = res.clone();
            // Clear data stored in the posts store.
            clearAllData('posts') // Function from helper file
                .then(function(){
                    return clonedRes.json()
                })
                .then(function(data){
                    for(var key in data){
                        // Write the updated data to the posts store.
                        writeData('posts', data[key]) // Function from helper file
                    }
                });

            return res;
        })
});

workbox.precaching.precacheAndRoute(self.__precacheManifest);

А в utility.js у меня есть следующий код:

import { openDB } from 'idb';

export function writeData(st, data){
    console.log(st, data);
}

export function clearAllData(st){
    console.log(st);
}

Функции пока ничего не делают, но даже эти заполнители не работают!В конце концов я хотел бы иметь возможность использовать модуль idb npm, поэтому я делаю это в качестве помощника, поэтому я также могу использовать его из моего обычного файла Javascript.
Также я использую Webpack для сборки своих файлов, и в другом проекте, где я его не использую, он работает нормально, однако в этом он просто не находит файл после сборки, поэтому я думаю,Webpack может что-то испортить.

Заранее спасибо:)

Answer 1

Обнаружено, что для импорта файлов сценариев мне нужно скопировать их в папку dist, как они есть, иначе они не будут использоваться Service Worker.Таким образом, я изменил файл vue.config.js, добавив в него следующее (после module.exports):

chainWebpack: config => {
        config
            .plugin('copy')
            .tap(args => {
                args[0].push({
                    from: 'project-location\\src\\js', 
                    to: 'project-location\\dist'});
                return args;
            })
    },

Это скопирует файлы из src/js в папку dist, а затем мы сможемимпортируйте их в файл Service Worker с этой строкой в ​​верхней части файла:

importScripts('utility.js');

Однако я не смог найти способ импортировать модули npm, поэтому япришлось заменить модуль idb другим файлом idb.js, который импортируется в файл utility.js с похожей строкой кода:

importScripts('idb.js');

Оба utility.jsи idb.js расположены под src/js.

Так что не идеальное решение, но оно работает.Спасибо pate за указание в правильном направлении:)

Answer 2

Если вы внимательно посмотрите на сообщение об ошибке, вы увидите, в чем проблема:)

Ваш сценарий Service Worker пытается импортировать "/src/js/utility.js", но это НЕ доступно.Если вы откроете браузер и перейдете по этому адресу, вы сможете увидеть файл?Я совершенно уверен, что вы не можете:)

Когда вы создаете приложение с помощью веб-пакета, оно, скорее всего, помещает все ваши файлы в каталог с именем "dist".Ваш сервисный работник ТОЛЬКО может импортировать эти файлы.Подумайте об этом: когда вы развертываете приложение где-то, только файлы в dist / будут на сервере, а не файлы в src /, верно?По этой причине SW-скрипт не может импортировать файл, который вы хотите импортировать.

К сожалению, я не эксперт по веб-пакетам, поэтому я не уверен, как сказать, чтобы веб-пакет связывал файл для вас ивключите его в файл сценария Service Worker: - /