web-dev-qa-db-fra.com

Comment enregistrer un employé de service à l'aide de Webpack?

J'implémente une application Web ReactJS à l'aide de webpack et je veux commencer à implémenter un travailleur de service pour gérer les appels réseau, afin de mettre en cache les fichiers. Cependant, j'ai du mal à enregistrer le fichier javascript de service worker. (Je dois ajouter que je suis un débutant en ce qui concerne à la fois React et webpack.)

Si je comprends bien, webpack fusionne chaque fichier javascript en un seul fichier bundle.js, Ce qui rend difficile d'appeler navigator.serviceWorker.register('./sw.js').... J'ai essayé différentes approches, telles que serviceworker-webpack-plugin , mais sans chance. Si je suis les étapes fournies sur la page Lisez-moi, j'obtiens un message d'erreur disant Uncaught Error: serviceworker-webpack-plugin: It seems that your are importing "serviceworker-webpack-plugin/lib/runtime" without using the plugin. Makes sure that your webpack configuration is correct..

Voici mon fichier webpack.config.js:

var webpack = require('webpack');
var path = require('path');
import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-dev-server/client?http://127.0.0.1:8080/',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'src'],
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: ['babel-loader'],
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ServiceWorkerWebpackPlugin({
      entry: path.join(__dirname, 'src/sw.js'),
      excludes: [
        '**/.*',
        '**/*.map',
        '*.html',
      ],
      filename: 'sw.js'
    })
  ]
}

Remarque: j'ai utilisé la commande create-react-app Pour commencer. De plus, je n'ai aucun problème avec le travailleur de service lui-même, j'ai une implémentation fonctionnelle pour une autre application Web. C'est juste pour l'enregistrer que je me bats.

Toute aide est appréciée!

reactjswebpackservice-workercreate-react-app
14
Göran Lilja

Pour supprimer l'erreur, modifiez le

import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

à

var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');

Notez également que la documentation a une faute de frappe:

plugins: [
new ServiceWorkerWepbackPlugin({
  entry: path.join(__dirname, 'src/sw.js'),
}),
],

Notez que Webpack n'est pas orthographié correctement ici. Il devrait être Webpack au lieu de Wepback .

En outre, les documents ont indiqué que pour enregistrer le Service Worker sur le thread JS principal à l'aide du code suivant:

import runtime from 'serviceworker-webpack-plugin/runtime';

if ('serviceWorker' in navigator) {
  const registration = runtime.register();
}

Cependant, à y regarder de plus près, il semble que le répertoire d'exécution soit incorrect. Vérification du dossier node_modules ,

runtime location

Il semble que le runtime.js se trouve dans le dossier lib . Donc, pour résoudre ce problème, changez le

import runtime from 'serviceworker-webpack-plugin/runtime';

à

import runtime from 'serviceworker-webpack-plugin/lib/runtime';

Une fois que j'ai fait cela, j'ai réussi à installer le Service Worker sur mon environnement de développement.

sw.js

J'apprends toujours React + Webpack cependant! Je trouve toujours un moyen d'utiliser correctement Service Worker dans mon React application. J'ai également informé le auteur de ce plugin de ces changements requis dans la documentation. J'espère que cela aide les autres!

24
Nicholas Lie