Workbox Strategies provides the most common caching strategies so it’s easy to apply them in your service worker Example : - using Twitter as an example


How to implement offline strategies

We're going to use Twitter as an example to best explain how best to implement these strategies so that you don't just cache anything.


This is a fairly common strategy where having the most up-to-date resource is not vital to the application. Respond the request as quickly as possible with a cached response if available, falling back to the network request if it’s not cached. The network request is then used to update the cache.



        workbox.routing.registerRoute(
          new RegExp('/images/profile-picture/'),
           workbox.strategies.staleWhileRevalidate()
        );
        

Best for for assets that are non-critical and can be gradually cached.



        workbox.routing.registerRoute(
            new RegExp('/media/'),
              workbox.strategies.cacheFirst()
            );
        

Best for requests that are updating frequently. By default it will try and fetch the latest request from the network. If the request is successful, it’ll put the response in the cache. If the network fails to return a response, the caches response will be used



      workbox.routing.registerRoute(
         new RegExp('/latest-tweets/'),
            workbox.strategies.networkFirst()
           );
    

Best if you require specific requests to be fulfilled from the network



     workbox.routing.registerRoute(
       new RegExp('/settings/'),
        workbox.strategies.networkOnly()
          );
  

You want to join our developer program?