如何使用webpack注册服务工作者?

时间:2016-12-14 19:16:26

标签: reactjs webpack service-worker create-react-app

我正在使用webpack实现一个ReactJS Web应用程序,我想开始实现一个服务工作者来处理网络调用,以便缓存文件。但是,我发现很难注册服务工作者的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应用程序的工作实现。它只是注册它我正在努力。

感谢任何帮助!

2 个答案:

答案 0 :(得分:24)

要删除错误,请更改

import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

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

另请注意,documentation有拼写错误:

plugins: [
new ServiceWorkerWepbackPlugin({
  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 location

似乎 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的方法。我还向作者通报了文档中这些必要更改的插件。希望它能帮助别人!

答案 1 :(得分:-4)

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

它将指导您如何在项目中设置服务工作者,而您不需要创建自己的Webpack create-react-app命令将自动执行

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