AJAX呼び出しの応答をキャッシュしてオフラインで表示できるサービスワーカー対応アプリケーションを作成しました。私が実行している問題は、サービスワーカーが最初にロードされたときにAJAXレスポンスではなくページをキャッシュすることです。サービスワーカーが最初の負荷でAPIコンテンツをキャッシュしない
http://ivesjames.github.io/pwaにアクセスし、SWトースト後に飛行機モードに切り替えると、APIコンテンツは表示されません。オンラインに戻ってページを読み込んでもう一度やり直すと、2回目の読み込み時にAPIコンテンツがオフラインで読み込まれます。
これは私が(ポリマードキュメント経由撮影)APIレスポンスをキャッシュするために使用しているものです:
(function(global) {
global.untappdFetchHandler = function(request) {
// Attempt to fetch(request). This will always make a network request, and will include the
// full request URL, including the search parameters.
return global.fetch(request).then(function(response) {
if (response.ok) {
// If we got back a successful response, great!
return global.caches.open(global.toolbox.options.cacheName).then(function(cache) {
// First, store the response in the cache, stripping away the search parameters to
// normalize the URL key.
return cache.put(stripSearchParameters(request.url), response.clone()).then(function() {
// Once that entry is written to the cache, return the response to the controlled page.
return response;
});
});
}
// If we got back an error response, raise a new Error, which will trigger the catch().
throw new Error('A response with an error status code was returned.');
}).catch(function(error) {
// This code is executed when there's either a network error or a response with an error
// status code was returned.
return global.caches.open(global.toolbox.options.cacheName).then(function(cache) {
// Normalize the request URL by stripping the search parameters, and then return a
// previously cached response as a fallback.
return cache.match(stripSearchParameters(request.url));
});
});
}
})(self);
そして私はSW-インポートでハンドラを定義:
<platinum-sw-import-script href="scripts/untappd-fetch-handler.js">
<platinum-sw-fetch handler="untappdFetchHandler"
path="/v4/user/checkins/jimouk?client_id=(apikey)&client_secret=(clientsecret)"
origin="https://api.untappd.com">
</platinum-sw-fetch>
<paper-toast id="caching-complete"
duration="6000"
text="Caching complete! This app will work offline.">
</paper-toast>
<platinum-sw-register auto-register
clients-claim
skip-waiting
base-uri="bower_components/platinum-sw/bootstrap"
on-service-worker-installed="displayInstalledToast">
<platinum-sw-cache default-cache-strategy="fastest"
cache-config-file="cache-config.json">
</platinum-sw-cache>
</platinum-sw-register>
私はどこかに間違っていますか?なぜロード#1ではなくロード#2で動作するのかよく分かりません。
ご協力いただければ幸いです。
reload-on-installを使用すると、魅力的に機能しました。助けてくれてありがとう! –