2

sw-precache-webpack-plugin を使用してサービスが動作するキャッシュシステムを追加しようとすると、いくつかの問題が発生しますv.0.11.4。私の考えは、人々がアプリをオフラインで使用できるということです。

私のアプリはReact v.15.5.4とNode v.6.9.5にありますが、ハンドルバー (React に移行している古いプラットフォーム) にいくつかの部分があり、現時点では両方が共存しています。React にある部分である html は Node エンドポイントによって提供され、プロジェクトのルートではありません。たとえば、次のようになります。

  • ローカルホスト:3000/this_is_the_part_with_react

オフラインで使用したいのは、React で行われるプロジェクトの一部だけです。この部分では、webpack v.2.6.1を使用してすべてのプロジェクト ファイルを作成しています。

const OUTPUT_DIR = 'public/assets';
const runtimeCaching = [
  {
     urlPattern: '/some/url/to/cache',
     handler: 'cacheFirst'
  }
];

export default () => ({ 
  entry: {
     'react_part': path.join(__dirname, 'src/example.jsx'),
  },
  output: {
     path: path.join(__dirname, OUTPUT_DIR),
     filename: 'js/[name].js',
  },
  resolve: {
     extensions: ['.js', '.jsx'],
  },
  plugins: [
     new CleanWebpackPlugin([
       OUTPUT_DIR,
     ]),
     new SWPrecacheWebpackPlugin({
       cacheId: 'my-project',
       filename: 'service-worker.js',
       directoryIndex: false,
       minify: true,
       runtimeCaching,
     }),
   ],
});

問題：

このような構成を使用して、React アプリを webpack でコンパイルすると、内部に Service Worker が作成され/public/assets/service-worker.jsます。

私が抱えている問題は、登録するためにこれを行う必要があることです:

if ('serviceWorker' in navigator) {
    navigator
      .serviceWorker
      .register('/assets/service-worker.js'); // Adding /assets/ ...
 }

そして、DevTools で調べると、Service Worker が問題なく登録されていることがわかりますが、次のようになります。

localhost:3000/assets

解決しようとして、最初に試してください：

サービス ワーカー レジスタでこのオプションを追加しようとすると、次の{ scope: './' }エラー メッセージが表示されます。

DOMException: ServiceWorker の登録に失敗しました: 指定されたスコープ ('/this_is_the_part_with_react') のパスが、許可されている最大スコープ ('/assets/') の下にありません。スコープを調整するか、Service Worker スクリプトを移動するか、Service-Worker-Allowed HTTP ヘッダーを使用してスコープを許可します。

解決しようとしています。2 回目の試行:

webpack の設定を次のように変更しようとすると:

new SWPrecacheWebpackPlugin({
   cacheId: 'my-project',
   filename: '../service-worker.js', // Adding ../ on front
   directoryIndex: false,
   minify: true,
   runtimeCaching,
}),

/assets内部で作成されるため、ファイルの前面なしで直接登録できるようになりました/public。

navigator.serviceWorker
  .register('/service-worker.js', { scope: './' });

そして今、DevTools で調べると、スコープがどのように正しいかがわかります。

localhost:3000/this_is_the_part_with_react

しかし、Service Worker は次のエラーを受け取ります。

ServiceWorker devtools のエラー

そして、ネットワーク内のすべての資産は、前面404 errorが欠けているために失敗しています。/assets

問題 2

の Service Worker ではlocalhost:3000/assets、リクエストがキャッシュされておらず (runtimeCaching 構成)、アプリがオフラインで動作していません。

たぶん、スコープの最初の問題に関連する同じ問題です...

しかしconsole.log、作成されたファイル内にある fetch イベント内に追加しましたがservice-worker.js、これは決して実行されません。

結論

さて、誰かが私が説明したこの2つの問題を解決するためのアイデアを手伝ってくれれば素晴らしいでしょう(おそらく同じ問題です):

  • スコープの問題
  • リクエストのキャッシュに問題があり、アプリをオフライン モードで使用しています。

どうもありがとう！

4

0 に答える 0