8

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);
}

関数はまだ何も実行しませんが、これらのプレースホルダーも機能しません! 最終的には npm モジュールを使用できるようにしたいidbので、ヘルパーでこれを行っているので、通常の Javascript ファイルからも使用できます。
また、Webpack を使用してファイルをビルドしていますが、使用していない別のプロジェクトでは正常に動作しますが、このプロジェクトではビルド後にファイルが見つからないため、Webpack が何かを台無しにします。

前もって感謝します ：）

4

4 に答える 4

2

スクリプトファイルをインポートするには、それらをそのまま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私を正しい方向に向けてくれてありがとう:)

于 2019-04-18T10:34:55.730 に答える