webpackを使用してサービスワーカーを登録するには？

Question

私はwebpackを使用してReactJS Webアプリケーションを実装しています。ファイルをキャッシュするためにネットワークコールを処理するサービスワーカーの実装を開始したいと思います。しかし、サービスワーカーのjavascriptファイルを登録するのは難しいです。私は右のそれを取得した場合は（私はそれが反応し、WebPACKの両方に来るとき、私は初心者だと追加する必要があります。）

を、WebPACKのは難しいnavigator.serviceWorker.register('./sw.js')...を呼び出すようになります1つのbundle.jsファイルへのすべてのJavaScriptファイルをマージします。私はserviceworker-webpack-pluginのような異なるアプローチを試みましたが、運がありません。 readmeページに記載されている手順に従うと、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.というエラーメッセージが表示されます。

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' 
    }) 
    ] 
} 

注：

は、ここに私のwebpack.config.jsファイルです私は軌道に乗るためにcreate-react-appコマンドを使用していました。また、サービスワーカー自体に問題はありません。別のWebアプリケーションの実装があります。それは私が苦労しているそれを登録しているだけです。

ご協力いただきましてありがとうございます。 のWebPACKが誤って綴られていること

plugins: [ 
new ServiceWorkerWepbackPlugin({ 
    entry: path.join(__dirname, 'src/sw.js'), 
}), 
], 

お知らせ：

Answer 1

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

に

import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin'; 

を変更、エラーを削除するには、またdocumentationは誤植があることに注意してくださいここに。 Wepbackの代わりにWebpackにする必要があります。

また、ドキュメントは、次のコードを使用して、メインのJSのスレッド上のサービス労働者を登録するには次のように述べている。

import runtime from 'serviceworker-webpack-plugin/runtime'; 

if ('serviceWorker' in navigator) { 
    const registration = runtime.register(); 
} 

しかし、精密検査時に、実行時のディレクトリが間違っているようです。 、

をnode_modulesフォルダを確認するにはruntime.jsがのlibフォルダ内にあるようです。だから、この問題を解決するために、私はこれをしなかったら、私は私のdevの環境にインストールされているサービスの労働者を得ることができた

import runtime from 'serviceworker-webpack-plugin/runtime'; 

import runtime from 'serviceworker-webpack-plugin/lib/runtime'; 

に変更。

私はまだかかわらず、+のWebPACKのに反応学んでいます！また、ReactアプリケーションでService Workerを適切に使用する方法を見つけました。私はまた、このプラグインの作成者に、ドキュメントのこれらの必要な変更について通知しました。他人を助けることを願っています！

Answer 2

create-react-appでプロジェクトを作成し、project.jsonでいくつか変更を加えてプロジェクトにサービスワーカーを追加します。

それはどのようにあなたのプロジェクトでセットアップサービスワーカーへご案内しますし、あなたがあなた自身のWebPACK作成-反応-appコマンドを作成する必要はありませんが、自動的に

を行いますご覧ください：https://github.com/jeffposnick/create-react-pwa#adding-in-a-github-deployment-step