PWAをホーム画面に追加すると、サービスワーカーのオフラインキャッシュが機能しない

Question

PWAを作成しました。現在、英雄に配備されています。 URL - https://plain-js-pwa.herokuapp.com/

私のPWAは、サービスワーカーとmanifest.jsonファイルをインストールします。私が携帯電話でクロムで開き、私の電話を飛行モードにすると、URLをリフレッシュしても私のアプリケーションが表示されます。私のサービスワーカーがオフラインキャッシュを実行していることが予想されます。

私のPWAをホーム画面に追加して飛行モードで開こうとすると、動作しません。これはおそらく私の最初のPWAなので、助けてください。私は 'sw-precache-webpack-plugin'からサービスワーカーファイルを生成しています。

マイmanifest.jsonをファイルには、次のとおりです。ホーム画面からロードする場合

{ 
    "name": "VanillaJS-webpack App", 
    "short_name": "VanillaJS-webpack App", 
    "description": null, 
    "dir": "auto", 
    "lang": "en-US", 
    "display": "standalone", 
    "orientation": "any", 
    "start_url": "/?homescreen=1", 
    "background_color": "#ee6e73", 
    "icons": [ 
    { 
     "src": "android-chrome-36x36.png", 
     "sizes": "36x36", 
     "type": "image/png" 
    }, 
    { 
     "src": "android-chrome-48x48.png", 
     "sizes": "48x48", 
     "type": "image/png" 
    }, 
    { 
     "src": "android-chrome-72x72.png", 
     "sizes": "72x72", 
     "type": "image/png" 
    }, 
    { 
     "src": "android-chrome-96x96.png", 
     "sizes": "96x96", 
     "type": "image/png" 
    }, 
    { 
     "src": "android-chrome-144x144.png", 
     "sizes": "144x144", 
     "type": "image/png" 
    }, 
    { 
     "src": "android-chrome-192x192.png", 
     "sizes": "192x192", 
     "type": "image/png" 
    }, 
    { 
     "src": "/android-chrome-256x256.png", 
     "sizes": "256x256", 
     "type": "image/png" 
    }, 
    { 
     "src": "/android-chrome-384x384.png", 
     "sizes": "384x384", 
     "type": "image/png" 
    }, 
    { 
     "src": "/android-chrome-512x512.png", 
     "sizes": "512x512", 
     "type": "image/png" 
    } 
    ] 
} 

Answer 1

それはブラウザからロードされたときと同じように動作するはずです。あなたの例では

、迅速なデバッグが問題は、クエリ文字列に関連していることを示していると思われる：https://plain-js-pwa.herokuapp.com/?homescreen=1

それは（ホーム画面から、あるいはそうでない場合はロードされた場合には無関係）クエリ文字列が追加されたときにオフラインで動作しません。 。サービスワーカーの設定を確認せずに、sw-precacheを使用する場合は、ignoreSearch（https://developer.mozilla.org/en-US/docs/Web/API/Cache/match）またはignoreUrlParametersMatchingを使用して、サービス担当者にクエリ文字列パラメータを無視するよう指示する必要があります。