PWA: Progressive Web Apps

Everything you'd like to know to implement PWAs: Service workers, IndexedDB. Service workers are also intended to be used for such things as: Background data synchronization. Receiving centralized updates to expensive-to-calculate data such as geolocation or gyroscope, so multiple pages can make use of one set of data. Hooks for background services. Custom templating based on certain URL patterns. Performance enhancements, for example pre-fetching resources that the user is likely to need in the near future, such as the next few pictures in a photo album. Links: service worker api - https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API, background-sync - https://developers.google.com/web/updates/2015/12/background-sync, amazing youtube tutorial playlist on PWAs - https://www.youtube.com/watch

18 flashcards · Programming Languages · by lakesare

1. Service worker VS web worker?

   A web worker is a Js that runs in the background. A service worker is a Js file that intercepts and modifies navigation and resource requests. A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background. A service worker is an event-driven worker registered against an origin and a path. It takes the f…

2. What is window.caches?

   Provides a storage mechanism for Request / Response object pairs that are cached. Good example from https://developer.mozilla.org/en-US/docs/Web/API/Cache: self.addEventListener('fetch', function(event) { event.respondWith( caches.open('font').then(function(cache) { return cache.match(event.request) .then(function(response) { if (response) { return response; } return fetch(event.request) .then(function(networkResponse) { cache.put(event.request, networkResponse.clone()); return networkResponse;…

3. Name 3 steps in lifecycle of a service worker?

   Register - window.navigator.serviceWorker.register(./file.js) Install - You can use this to get stuff ready, stuff that must be ready before you handle other events. While this happens any previous version of your ServiceWorker is still running & serving pages, so the things you do here mustn't disrupt that. Activate - when service worker takes full control of the page. The service worker is immediately downloaded when a user first accesses a service worker–controlled site/page. After that, it…

4. How to check if service worker api is available in the browser?

   if (window.navigator.serviceWorker){ navigator.serviceWorker.register('./file.js') }

5. Service workers don't have any access to the window objects, they only have access to themselves, via ______.

   self

6. Name 1 property and 2 methods of a FetchEvent object. // sw.js self.addEventListener('fetch', (e) => { e //=> FetchEvent }

   fetchEvent.request - request the browser intends to make. fetchEvent.respondWith() - prevent the browser's default fetch handling, and provide (a promise for) a response yourself. fetchEvent.waitUntil() - extends the lifetime of event. If you don't call it inside a method, the service worker could go to sleep any time.

7. What is the argument to fetchEvent.respondWith()?

   A promise that resolves to the Response object. // sw.js self.addEventListener('fetch', (fetchEvent) => { if (fetchEvent.request.url.endsWith('/camera_feed.html')) { fetchEvent.respondWith( fetch(fetchEvent.request) .then((res) => { if(res.ok) return res; return new Response('Camera feed currently not available.') }) ) } });

8. What's scope? navigator.serviceWorker.register('service-worker.js', { scope: '/app/' });

   The scope of the service worker determines from which path it will intercept requests.

9. What's the default scope? navigator.serviceWorker.register('service-worker.js')

   The default scope is the path to the service worker file. If service-worker.js is located in the root directory, the service worker will control requests from all files at the domain.

10. What should we input for this code to have no effect? self.addEventListener('fetch', (e) => { if (e.request.url.endsWith('/some-url')) { e.respondWith(____?____) } });

    e.respondWith(fetch(e.request))

11. What's considered a client of a service worker?

    Each browser installs its own separate service worker, but each tab in a browser is considered a single sw's client.

12. What's the argument for self.importScripts(_____); ?

    It accepts zero or more URIs as parameters to resources to import. The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker.

13. What's used instead of window.addEventListener('online', ()=>{}) in service workers?

    self.addEventListener('sync', ...) 'sync' event, because it's capable of registering us getting online even when application is not open in the browser. ___ // index.js navigator.serviceWorker.ready.then(swRegistration => swRegistration.sync.register('todo_updated')); // sw.js self.addEventListener('sync', function (event) { if (event.tag == 'todo_updated') { event.waitUntil(serverSync()); } }); async function serverSync() { // synchronize data with a server } The method that processes the sync…

14. Name 2 PWA offline strategies, and what are they used for.

    Cache first, network fallback - display what's in cache, and then fetch and update in the background (can be used for nonfrequently updated data - e.g. course categories, or for user avatars). Network first, cache fallback - tries to fetch, but displays cached result if fails (can be used for time-sensitive data - e.g. stock prices) Youtube video on offline strategies: https://www.youtube.com/watch?v=oxt0jFH2Iu4&index=8&list=PLlyCyjh2pUe9RHFCJHU0kxpaivUzADPYk

15. How would you go about making sure something will get executed when we're online even if we're currently offline?

    registration.sync.register('some-tag'); self.addEventListener('sync', ...)

16. What library has superseded sw-precache and sw-toolbox?

    workbox-sw https://developers.google.com/web/tools/workbox/guides/get-started

17. Write code to create this cache storage:

    // sw.js this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.add('/sw-test/index.html'); }) ); }); The add() method of the Cache interface takes a URL, retrieves it, and adds the resulting response object to the given cache.

18. In development we can click skipWaiting, but when would #9758 version of service worker would activate naturally?

    When we close all tabs of this site.