如何使用 webpack 注册 Service Worker？

Question

我正在使用 webpack 实现一个 ReactJS Web 应用程序，并且我想开始实现一个 service worker 来处理网络调用，以便缓存文件。 但是，我发现很难注册 service worker javascript 文件。 （我应该补充一点，我是 React 和 webpack 的初学者。）

如果我做对了，webpack 会将每个 javascript 文件合并到一个bundle.js文件中，这使得调用navigator.serviceWorker.register('./sw.js')...变得困难。 我尝试了不同的方法，例如serviceworker-webpack-plugin ，但没有运气。 如果我按照自述页面上提供的步骤操作，我会收到一条错误消息，指出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. 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. .

这是我的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'
    })
  ]
}

注意：我使用create-react-app命令开始。 此外，我对服务工作者本身没有任何问题，我有另一个 Web 应用程序的工作实现。 它只是注册它我正在努力。

任何帮助表示赞赏！

Answer 1

要消除错误，请更改

import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

到

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

另请注意，该文档有一个错字：

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

请注意， Webpack在这里拼写错误。 它应该是Webpack而不是Wepback 。

此外，文档指出使用以下代码在主 JS 线程上注册 Service Worker：

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

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

但是，仔细检查后，似乎运行时目录是错误的。 检查node_modules文件夹，

似乎runtime.js在lib文件夹中。 因此，要解决此问题，请更改

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

到

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

完成此操作后，我设法在我的开发环境中安装了 Service Worker。

不过我还在学习 React + Webpack！ 还在想办法在我的 React 应用程序中正确使用 Service Worker。 我还在文档中通知了这个插件的作者这些所需的更改。 希望它能帮助别人！

Answer 2

使用 create-react-app 创建一个项目，然后在 package.json 中做一些更改以在项目中添加 Service Worker。

它将指导您如何在您的项目中设置 Service Worker，您无需创建自己的 Webpack create-react-app 命令将自动执行

请访问： https : //github.com/jeffposnick/create-react-pwa#adding-in-a-github-deployment-step