workbox icon indicating copy to clipboard operation
workbox copied to clipboard

Enable Navigation Preload by default for SW with fetch handlers

Open garthenweb opened this issue 3 years ago • 0 comments

Library Affected: workbox-webpack-plugin

Browser & Platform: all browsers

Feature Request Description:

On our website the SW is only used for caching of JS and CSS at install time to speed up navigation in a SPA. We don't have offline support or something similar.

Based on this article from Jake Archibald about Navigation Preloads, a service worker that uses fetch handlers can slow down the page for returning users (especially on mobile) in case the service worker was stopped. To fix this, you can use navigation preload to trigger the request and boot the service worker in parallel.

I'd therefore suggest, in case a fetch handler exists

  • to activate navigationPreload
  • add the config for runtimeCaching to use the network response

by default (if not overridden).

At the moment navigationPreload is disabled by default and if activated requires further configuration in runtimeCaching.

{
  navigationPreload: true,
  runtimeCaching: [{
      urlPattern: (({request}) => request.mode === 'navigate'),
      handler: 'NetworkOnly',
    }
}

Do you see any downsides in this proposal? I am not a service worker expert and might have missed something :)

garthenweb avatar Feb 18 '22 19:02 garthenweb