Tool / Helper

    Workbox

    https://developers.google.com/web/tools/workbox/

    Why Workbox?

    Workbox is a library that bakes in a set of best practices and removes the boilerplate every developer writes when working with service workers.

    Precaching
    Runtime caching
    Strategies
    Request routing
    Background sync
    Helpful debugging

    What's the API Like?

    Below are a few examples of the Workbox API demonstrating some of the common approaches developers take in their service workers. Cache Google Fonts

    Wish you could rely on Google Fonts being available offline after the user has visited your site? Add a quick rule to serve them from the cache.

    import {ExpirationPlugin} from 'workbox-expiration'; import {registerRoute} from 'workbox-routing'; import {StaleWhileRevalidate} from 'workbox-strategies';

    // Cache Google Fonts with a stale-while-revalidate strategy, with // a maximum number of entries. registerRoute( ({url}) => url.origin === 'https://fonts.googleapis.com' || url.origin === 'https://fonts.gstatic.com', new StaleWhileRevalidate({ cacheName: 'google-fonts', plugins: [ new ExpirationPlugin({maxEntries: 20}), ], }), );

    Cache JavaScript and CSS

    Make your JS and CSS ⚡ fast by returning the assets from the cache, while making sure they are updated in the background for the next use.

    import {registerRoute} from 'workbox-routing'; import {StaleWhileRevalidate} from 'workbox-strategies';

    registerRoute( ({request}) => request.destination === 'script' || request.destination === 'style', new StaleWhileRevalidate() );

    Cache Images

    Images carry most of the weight for a web page. Use this rule to serve them quickly from the cache, while making sure you don’t cache them indefinitely, consuming your users' storage.

    import {CacheableResponsePlugin} from 'workbox-cacheable-response'; import {CacheFirst} from 'workbox-strategies'; import {ExpirationPlugin} from 'workbox-expiration'; import {registerRoute} from 'workbox-routing';

    registerRoute( ({request}) => request.destination === 'image', new CacheFirst({ cacheName: 'images', plugins: [ new CacheableResponsePlugin({ statuses: [0, 200], }), new ExpirationPlugin({ maxEntries: 60, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days }), ], }), );

    Precache your Files

    Use Workbox to precache assets in your web app using our CLI, Node module or webpack plugin.

    ;