私は、バニラJavaScriptを使用してSPAを作成しており、現在はリソースのキャッシュを処理するためにsw-precacheを設定しています。サービスワーカーはgulpビルドの一部として生成され、正常にインストールされます。オフラインでrootのURL（http://127.0.0.1:8080/）に移動すると、実際にリソースがキャッシュされていることを示すアプリケーションシェルが表示されます。sw-precacheで内部ルートをキャッシュする
私は今、SWが内部ルーティングを失敗することなく処理しようとしています。オフライン中にhttp://127.0.0.1:8080/dashboard_indexに移動すると、「サイトにアクセスできません」というメッセージが表示されます。
アプリは、クライアント側でこのルーティングを一連のイベントリスナーを介してユーザーアクションで処理します。また、戻るボタンを使用する場合はurlを使用します。これらのURLの1つにアクセスする場合、サーバーへの呼び出しは行われません。そのため、サービスワーカーは、これらのリンクをクライアントサイドコードに渡すことを許可する必要があります。
私はいくつか試してみましたが、問題を解決するにはthis Q/Aが必要です。 generate-service-worker gulpタスクの現在の状態を含めました。この設定では、/dashboard_indexオフラインにアクセスできると予想しています。これが機能したら、他のルートをカバーするようにソリューションを適応させることができます。
ご迷惑をおかけして申し訳ございません。
gulp.task('generate-service-worker', function(callback) {
var rootDir = './public';
swPrecache.write(path.join(rootDir, 'sw.js'), {
staticFileGlobs: [rootDir + '/*/*.{js,html,png,jpg,gif,svg}',
rootDir + '/*.{js,html,png,jpg,gif,json}'],
stripPrefix: rootDir,
navigateFallback: '/',
navigateFallbackWhitelist: [/\/dashboard_index/],
runtimeCaching: [{
urlPattern: /^http:\/\/127\.0\.0\.1\:8080/getAllData, // Req returns all data the app needs
handler: 'networkFirst'
}],
verbose: true
}, callback);
});
更新
アプリケーションのコードはhere見出すことができます。
オプションnavigateFallbackWhitelistを削除しても、結果は変化しません。
/dashboard_indexにナビゲートしている間、オフラインでコンソールに次のものを表示します。
- http://127.0.0.1:8080/dashboard_indexネット:: ERR_CONNECTION_REFUSED
- sw.js GET：スクリプトを取得する際に1つのアン不明なエラーが発生しました。
- http://127.0.0.1:8080/sw.jsは、リソースの読み込みに失敗しました：ネット:: ERR_CONNECTION_REFUSED
同じAn unknown error occurred when fetching the script.も「アプリケーション>サービス労働者のクロームデバッグツールのタブに複製されます。
また、runtimeCachingオプションは、そのルートから返されたjson応答をキャッシュしていないことにも注意してください。レコードの
あなたの現在の設定*は、あなたがしようとしているものを達成するはずです。あなたは 'sw-precache'の最新リリースを確認できますか？ 'navigateFallbackWhitelist'オプションを完全に除外すれば助けになりますか？ 'sw-precache'のバグであれば、これをhttps://github.com/GoogleChrome/sw-precache/issuesに移動すると意味があります。 –
@JeffPosnick私は古いバージョンを使用していましたが、パッケージを4.2.3にアップデートした後も同じ結果が得られます。 – tonyedwardspz
'navigateFallback： '/''を 'navigateFallback： '/ index.html''に切り替えることはできますか？プリキャッシュされたリソースのリストに ''/''のエントリがありませんが、 ''/ index.html' 'のエントリがあります。 ''/''と' '/ index.html' 'を同等のものとして自動的に扱うロジックがありますが、' 'navigateFallback'が何をしているのかは当てはまりません。 –