reactjs - 如何使用 webpack 注册 Service Worker？

Question

我正在使用 webpack 实现 ReactJS Web 应用程序，并且我想开始实现一个服务工作线程来处理网络调用，以便缓存文件。但是，我发现很难注册 Service Worker javascript 文件。 (我应该补充一点，对于 React 和 webpack，我都是初学者。)

如果我做对了，webpack 会将每个 javascript 文件合并到一个 bundle.js 文件中，这使得调用 navigator.serviceWorker.register('./sw.js' )...。我尝试过不同的方法，例如 serviceworker-webpack-plugin ，但没有运气。如果我按照自述文件页面上提供的步骤进行操作，我会收到一条错误消息，指出 Uncaught Error: serviceworker-webpack-plugin: 看来您正在导入“serviceworker-webpack-plugin/lib/runtime”而不使用该插件。确保您的 webpack 配置正确。.

这是我的 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 命令来开始。另外，我对服务 worker 本身没有任何问题，我有另一个网络应用程序的工作实现。只是注册它，我正在努力解决。

感谢任何帮助!

Answer 1

要消除错误，请更改

import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

至

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

另请注意 documentation有一个错字:

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。我还向该插件的作者通报了文档中所需的这些更改。希望对其他人有帮助!