Js: Workbox Library

Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build PWAs (Progressive Web Apps). https://developers.google.com/web/tools/workbox/

14 flashcards · Programming Languages · by lakesare

1. Why shell.html is not just a path, like other assets?

   For some urls, hash is included as part of the file name. But for other assets, like .html-s, modifying filenames isn't an option. That's why workbox generates its own hash during its build process, and includes that revision information as part of the manifest. Workbox uses this information to determine when it needs to update its precache urls.

2. What sw.js file will this result in? workbox generate:sw --config-file=workbox-config.js

3. What's the workbox-webpack-plugin version of workbox generate:sw?

   const workboxPlugin = require('workbox-webpack-plugin'); ... plugins: [ new workboxPlugin.GenerateSW({}) ] ...

4. What will this generate: const workboxPlugin = require('workbox-webpack-plugin'); ... plugins: [ new workboxPlugin.GenerateSW({}) ] ...

   precache-manifest.hfu4h3idh4i3d43.js With this inside: self.__precacheManifest=[{ url: 'logo.png' }, ...] sw.js With this inside: importScripts( "precache-manifest.ae56.js", "https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js" ); workbox.precaching.precacheAndRoute(self.__precacheManifest || []);

5. workbox-webpack-plugin has two webpack plugins: new WorkboxPlugin.GenerateSW() new WorkboxPlugin.InjectManifest() What does each plugin do?

   GenerateSW plugin - will create a service worker file for you and add it to the webpack asset pipeline. InjectManifest plugin - will generate a list of URLs to precache and add that precache manifest to an existing service worker file. It will otherwise leave the file as-is. ___ When to use generateSW You want to precache files. You have simple runtime configuration needs (e.g. the configuration allows you to define routes and strategies). When NOT to use generateSW You want to use other Servic…

6. What arguments does registerRoute() accept? workbox.routing.registerRoute();

   workbox.routing.registerRoute(matchCb, handlerCb); fn if url matches: () => True/False [or just a regex!] fn how to handle that url: () => new Response() ________________________________ A match function will be given a FetchEvent and a URL object and you can match against a request by returning a truthy value. const matchCb = ({url, event}) => { return (url.pathname === '/special/url'); }; Your handler must return a Promise that resolves to a Response. const handlerCb = ({url, event, params})…

7. What does registerRoute() turn into? workbox.routing.registerRoute(matchCb, handlerCb);

   .registerRoute() arguments loosely correspond 2 properties of fetchEvent: matchCb - fetchEvent.request.url.endsWith() handlerCb - fetchEvent.respondWith() // sw.js self.addEventListener('fetch', (e) => { if (e.request.url.endsWith('/m.html')) { e.respondWith(fetch(e.request)) } });

8. How to workbox.routing.registerRoute() for these routes? https://example.com/styles/main.css https://example.com/styles/nested/file.css https://example.com/nested/styles/directory.css

   workbox.routing.registerRoute( new RegExp('/styles/.*\.css'), handlerCb );

9. When the request.mode is navigate? Request.mode can be: same-origin no-cors cors navigate

   Navigation request takes place whenever you enter a URL in your browser, interact with window.location, or visit a link from one web page to another. While your web app might make many other subresource requests in order to display all its contents—for elements like scripts, images, or styles—it's the HTML in the navigation response that's responsible for kicking off all the other requests.Any delays in the response for the initial navigation request will be painfully obvious to your users, as…

10. What does this turn into? workbox.routing.registerNavigationRoute('/single-page-app.html');

    self.addEventListener('fetch', event => { if (event.request.mode === 'navigate') { // Always respond to navigations with the cached app-shell.html, // regardless of the underlying event.request.url value. event.respondWith(caches.match('single-page-app .html')); } });

11. What does maxEntries mean?

    Service worker will only store up to 10 pngs, and any new ones after that will cause oldest pngs to get cleared up from the cache.

12. What does workbox.strategies.staleWhileRevalidate() do?

    If there's a cached version available, use it, but fetch an update for next time. self.addEventListener('fetch', function(event) { event.respondWith( caches.open('mysite-dynamic').then(function(cache) { return cache.match(event.request).then(function(response) { var fetchPromise = fetch(event.request).then(function(networkResponse) { cache.put(event.request, networkResponse.clone()); return networkResponse; }) return response || fetchPromise; }) }) ); });

13. What does workbox.strategies.cacheFirst() do?

    If there is a Response in the cache, the Request will be fulfilled using the cached response, the network will not be used at all. If there isn't a cached response, the Request will be fulfilled by a a network request and the response will be cached so that the next request is served directly from the cache. self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); });

14. What does workbox.strategies.networkFirst() do?

    For requests that are updating frequently, the network first strategy is the ideal solution. 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.