如何使用 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