如何使用webpack註冊服務人員？

Question

我正在使用webpack實現一個ReactJS web應用程序，我想開始實施一個服務工作者來處理網絡調用，以緩存文件。但是，我發現很難註冊服務工作者JavaScript文件。 （我要補充一點，我是一個初學者，當談到這兩個反應，的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應用程序的工作實施。它只是註冊我正在努力。

任何幫助表示讚賞！

Answer 1

要刪除的錯誤，改變

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：

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'; 

一旦我這樣做，我設法安裝在我的開發環境的服務人員。

我還在學習陣營+的WebPack儘管！同樣還想出了一種在我的React應用程序中正確使用Service Worker的方法。我還通知了這個插件的作者，這些插件需要在文檔中進行更改。希望它可以幫助別人！

Answer 2

使用create-react-app創建項目，然後在package.json中進行一些更改，以便在項目中添加服務工作人員。

它會指導你如何設置服務工作者在你的項目，你並不需要創建自己的WebPack創建反應的-app命令會自動完成

請訪問：https://github.com/jeffposnick/create-react-pwa#adding-in-a-github-deployment-step