web-dev-qa-db-ja.com

webpackを使用してService Workerを登録する方法は？

Webpackを使用してReactJS Webアプリケーションを実装しています。ファイルをキャッシュするために、ネットワークコールを処理するサービスワーカーの実装を開始したいと考えています。ただし、Service WorkerのJavaScriptファイルを登録するのは難しいと思います。 （Reactとwebpackの両方に関しては、私は初心者だと付け加えてください。）

うまくいけば、webpackはすべてのjavascriptファイルを1つの_bundle.js_ファイルにマージするため、navigator.serviceWorker.register('./sw.js')...を呼び出すのが難しくなります。 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._というエラーメッセージが表示されます。

これが私の_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アプリの実装が機能しています。登録するだけで苦労しています。

どんな助けも大歓迎です！

reactjswebpackservice-workercreate-react-app
14
Göran Lilja

エラーを削除するには、

import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';

に

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

documentation にはタイプミスがあることに注意してください：

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

Webpackのスペルが間違っていることに注意してください。 Wepbackではなく、Webpackである必要があります。

また、ドキュメントには、次のコードを使用してメイン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を適切に使用する方法を考えています。これらのプラグインの作成者は、ドキュメントに必要な変更を加えました。

24
Nicholas Lie