The networkFirst runtime strategy not storing the initial response

[JanLenoch]

Welcome! Please use this template for reporting bugs or requesting features. For questions about using Workbox, the best place to ask is Stack Overflow, tagged with [workbox]: https://stackoverflow.com/questions/ask?tags=workbox

Library Affected:
workbox-sw

Browser & Platform:
Google Chrome v65.0.3325.181 for Windows

Issue or Feature Request Description:
When using the networkFirst runtime caching strategy, the response data does not get stored in the browser cache upon the initial load. To make Workbox store the response in cache, the user has to refresh (F5). Can be reproduced in https://github.com/Kentico/cloud-sample-pwa-app/tree/v2-caching . Is this by design, a bug, or some misunderstanding in my actual implementation?

Thanks!

[jeffposnick]

You're not using clientsClaim, which is disabled by default, and that means that the service worker will not take control of any open pages until after the subsequent navigation.

You can learn more at https://developers.google.com/web/tools/workbox/modules/workbox-sw#skip_waiting_and_clients_claim

[JanLenoch]

Sadly, even with both skipWaiting() and clientsClaim() as the first two calls in the service worker, there is still no "runtime" cache container created at the first load. (Weirdly, there are two "precache" containers created, one being populated with app shell files, the other being empty.) Would you have any other ideas? (Sorry, my JS experience is limited, hence such a novice question.)

Thank you.

[jeffposnick]

No worries!

The runtime cache will only be created on first load if clientsClaim is used and the requests for resources are made after the service worker has activated and takes control. If you follow the best practices for delaying service worker registration until after the initial window.onload event, and you load all your subresources upfront (instead of using lazy-loading), then you may not see anything populated in the runtime cache until after your second visit.

There's a discussion #368 about potential ways of helping folks who want their previously loaded subresources added to a runtime cache during the initial service worker installation.

[adntin]

in my webpack.config.js

  new workboxPlugin.GenerateSW({
      exclude: [/\.html$/], 
      runtimeCaching: [{
          urlPattern: /index\.html/, 
          handler: "networkFirst"
        }, {
          urlPattern: "/",
          handler: "networkFirst"
        }]
    })

@JanLenoch @jeffposnick
I want to save my index.html into the runtime cache the first time the page loads.