4
votes

Comment importer un script dans Service Worker lors de l'utilisation de Webpack

Dans un Service Worker, j'essaie d'importer un autre script d'aide à l'aide d'importScripts, mais je continue à recevoir une Uncaught DOMException: Impossible d'exécuter 'importScripts' sur 'WorkerGlobalScope': Le script sur 'http: // localhost: Échec du chargement de 5000 / src / js / utility.js.

J'ai le code suivant dans le Service Worker:

import { openDB } from 'idb';

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

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

Et dans utility.js J'ai le code suivant:

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

Les fonctions ne font encore rien, mais même ces espaces réservés ne fonctionnent pas! Finalement, j'aimerais pouvoir utiliser le module npm idb , c'est pourquoi je le fais dans un assistant, donc je peux également l'utiliser à partir de mon fichier Javascript normal.
J'utilise également Webpack pour créer mes fichiers, et dans un autre projet où je ne l'utilise pas, cela fonctionne bien, mais dans celui-ci, il ne trouve tout simplement pas le fichier après la construction, donc je pense que Webpack peut être foirer quelque chose.

Merci d'avance :)

javascript webpack service-worker progressive-web-apps workbox-webpack-plugin

0 commentaires

4 Réponses :

2
votes

Si vous regardez le message d'erreur très attentivement, vous voyez quel est le problème :)

Votre script Service Worker tente d'importer "/src/js/utility.js" mais il n'est PAS disponible. Si vous ouvrez votre navigateur et accédez à cette adresse, pouvez-vous voir le fichier? Je suis assez sûr que vous ne pouvez pas :)

Lorsque vous construisez l'application avec webpack, il met très probablement tous vos fichiers dans un répertoire appelé "dist". Votre Service Worker est UNIQUEMENT capable d'importer ces fichiers. Pensez-y: lorsque vous déployez l'application quelque part, seuls les fichiers de dist / seront sur le serveur, pas les fichiers de src /, non? Pour cette raison, le script SW n'est pas en mesure d'importer le fichier que vous souhaitez qu'il importe.

Malheureusement, je ne suis pas un expert Webpack, donc je ne sais pas comment dire à Webpack de regrouper le fichier pour vous et de l'inclure dans votre fichier de script Service Worker: - /

0 commentaires

2
votes

J'ai découvert que pour importer des fichiers de script, je dois les copier dans le dossier dist tels quels, sinon ils ne seront pas utilisables par le Service Worker. En tant que tel, j'ai modifié le fichier vue.config.js pour inclure ce qui suit (après module.exports) :

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

Cela va copiez les fichiers de src / js dans le dossier dist , puis nous pouvons les importer dans le fichier Service Worker avec cette ligne en haut du fichier: p >

importScripts ('utility.js');

Je n'ai cependant pas pu trouver un moyen d'importer des modules npm, j'ai donc dû remplacer le idb avec un autre fichier idb.js , qui est importé dans le fichier utility.js avec une ligne de code similaire:

importScripts ('idb.js');

Les deux utility.js et idb.js se trouvent sous src/js.

Ce n'est donc pas une solution parfaite, mais ça marche. Merci à pate de m'avoir pointé dans la bonne direction :)

0 commentaires

0
votes

J'utilise CopyWebpackPlugin pour résoudre ce problème. Il vous permet de copier les fichiers et de remplacer le contenu. Donc, après la copie, je supprime toutes les instructions "export" de mes fichiers, ce qui me permet de ne conserver qu'une seule version.

new CopyWebpackPlugin ([{
  from: 'src/js/mylist.js',
  to: '',
  transform(content) {
    return content.toString().replace(/export /g, '');
  },
}])

npm installe -D copy-webpack-plugin pour l'installer

0 commentaires

1
votes

Ici, solution de contournement:

diffusez le javascript depuis votre serveur
importer le script avec self.importScripts () de l'API worker, voir https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts .

Liens:

0 commentaires