19

我正在使用 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: 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 应用程序的工作实现。它只是注册它，我正在努力。

任何帮助表示赞赏！

4

2 回答 2

26

要删除错误，请更改

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。

sw.js

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

于 2017-01-24T15:52:43.617 回答
-7

使用 create-react-app 创建一个项目，然后在 package.json 中进行一些更改以在您的项目中添加服务工作者。

它将指导您如何在项目中设置 service worker，您无需创建自己的 Webpack create-react-app 命令会自动完成

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

于 2017-04-29T18:56:51.987 回答