サービスワーカーが最初の負荷でAPIコンテンツをキャッシュしない

Question

AJAX呼び出しの応答をキャッシュしてオフラインで表示できるサービスワーカー対応アプリケーションを作成しました。私が実行している問題は、サービスワーカーが最初にロードされたときにAJAXレスポンスではなくページをキャッシュすることです。

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で動作するのかよく分かりません。

ご協力いただければ幸いです。

Answer 1

+ clients-claim属性はサービス担当者ができるだけ早くコントロールできるようにする必要がありますが、依然としてAJAXリクエストが行われるまでは非同期プロセスです。サービスワーカーがページを制御できるようにしたい場合は、サービスワーカーが制御するまで（たとえば、this technique）、AJAXリクエストを遅らせるか、 reload-on-install attribute。

<platinum-sw-import-script>と<platinum-sw-fetch>の要素が<platinum-sw-register>要素の子であることが重要ですが、それ以外の場合は意図した効果が得られません。これはdocumentationで呼び出されていますが、残念ながら実行時のサイレントエラーです。