ワークボックスを使用してサービスワーカーを有効にする

webpackをビルドシステムとして使用する反応するPWAで作業する。サービスワーカーの場合は、workboxバージョン2.1.2を使用しています。ワークボックスを使用してサービスワーカーを有効にする

GET api http://localhost:5000/dist/abc/123/がJSONで応答する。新しいサービスワーカーがロードされましたことを確認しました

'use strict'; 
importScripts('workbox-sw.prod.js'); 
const workboxSW = new WorkboxSW({ 
    clientsClaim: true, 
    skipWaiting: true 
}); 
workboxSW.LOG_LEVEL = 'debug'; 
workboxSW.precache([]); 
workboxSW.router.registerRoute(
      'http://localhost:5000/dist/abc/123', 
      workboxSW.strategies.staleWhileRevalidate({ 
       cacheName: 'apis', 
       cacheExpiration: { 
        maxEntries: 50, 
        maxAgeSeconds: 30 * 24 * 60 * 60 
       }, 
       cacheableResponse: {statuses: [0, 200]} 
      }) 
     ); 
self.addEventListener('install',() => { 
    self.skipWaiting(); 
});

でルートを登録。 API呼び出しがステータス200で返されると、キャッシュ記憶域の下にキャッシュapisが作成されません。したがって、それはあまりにもオフラインで作業していない、見No cache "apis" は

コードフローは、エラーメッセージはありませんサービスワーカーインストールフェーズ

中にregisterRouteを打つURLを修正するために作られた以下、

要求を検証しました。デバッグメッセージも手がかりを与えません。より多くのデバッグを可能にする方法はありますか？呼び出す行われるためにhttp://localhost:5000/dist/abc/123

API、http://localhost:5000/dist/abc/123/：
サービス従事者が適切な範囲、デバッグメッセージService Worker registration successful with scope: http://localhost:8081/dist/、

APIの下に登録されています。クロスサイトコールであることに注意してください。コール元のベースページはhttp://localhost:8000です。前述のようにAPI呼び出しは成功し、ステータス200の応答を返します。

私はserviceworker/workboxにはかなり新しいです。これについての指示は非常に高く評価されています。

出典

2017-12-27 veerabahu subramanian