{"id":15910,"date":"2020-12-02T09:52:41","date_gmt":"2020-12-02T09:52:41","guid":{"rendered":"https:\/\/codeandpepper.com\/?p=15910"},"modified":"2020-12-02T09:52:45","modified_gmt":"2020-12-02T09:52:45","slug":"service-workers-in-progressive-web-apps","status":"publish","type":"post","link":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/","title":{"rendered":"Service Workers in Progressive Web Apps: Lie-Fi Busters"},"content":{"rendered":"\n<p>Run an online business long enough and it\u2019s impossible not to come across <a href=\"https:\/\/codeandpepper.com\/progressive-web-apps-immersive-user-experience\/\">Progressive Web Apps<\/a>. Once you have, you might be naturally drawn to the many benefits a PWA offers, but how do you know it\u2019s the best choice for your application? One way is to start with <strong>Service Workers<\/strong><b>: the unsung heroes of PWAs\u2019 success and merciless Lie-Fi busters.<\/b> Understanding their impact on performance, accessibility and engagement might be the key to unlocking new business value, without losing sight of potential challenges. <b>This quick walkthrough focuses on the essential components, definitions and strategies to help you keep calm and make Service Workers work\u2014both on and offline.<\/b><\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg\" alt=\"Service Workers in PWAs\" class=\"wp-image-15911\" width=\"864\" height=\"450\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA-300x156.jpg 300w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA-768x400.jpg 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA-361x188.jpg 361w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA-192x100.jpg 192w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA-720x375.jpg 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA-432x225.jpg 432w\" sizes=\"auto, (max-width: 864px) 100vw, 864px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-working-with-service-workers-why-and-how\">Working with Service Workers: why and how?<\/h2>\n\n\n\n<p>The Service Worker file is probably the single most important piece of JavaScript code in every PWA. Acting as an in-browser proxy, it handles requests sent from the web app and returns responses from the cache or the network. This busy middleman plays the main role in optimising performance on different levels, most notably:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>reduces load times and data usage<\/li><li>makes the app installable<\/li><li>enables work in offline mode<\/li><li>manages notifications<\/li><\/ul>\n\n\n\n<p><b>A closer look at Service Workers reveals that most of PWA\u2019s heavy lifting actually happens in the browser.<\/b> That\u2019s why the first step to ensuring PWAs deliver the desired User Experience is to set the stage just right.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-let-the-show-begin-service-worker-installation\">Let the show begin: Service Worker installation<\/h3>\n\n\n\n<p>As PWAs are an evolving technology, you might want to <a href=\"https:\/\/jakearchibald.github.io\/isserviceworkerready\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">check for browser compatibility<\/a> to make sure you can achieve the desired results. Other <strong>main prerequisites for implementing PWAs<\/strong> include hosting in a secure environment (HTTPS protocol) and experience in working with <a href=\"https:\/\/web.dev\/promises\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">JavaScript Promises<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Building_blocks\/Events\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">event listeners<\/a>. To make things easier, different browsers have <a href=\"https:\/\/developers.google.com\/web\/ilt\/pwa\/tools-for-pwa-developers\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">tools for PWA developers<\/a> you can use to quickly inspect and manage Service Workers.<\/p>\n\n\n\n<p>Once you\u2019ve agreed on the <code>scope<\/code> of the Service Worker (the paths where requests will be handled by the SW), you can begin installation. First, you need to register it in the main JavaScript code, so that the browser knows its location and can start installation in the background:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>navigator.serviceWorker.register('\/service-worker.js', {\n  scope: '\/app\/'\n});<\/code><\/pre>\n\n\n\n<p>Successful registration triggers the <code>instal<\/code> event. If Service Worker is installed without hiccups, its lifecycle begins&#8230;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-service-workers-and-their-eventful-lifecycles\">Service Workers and their eventful lifecycles<\/h3>\n\n\n\n<p>Implementation of Service Workers can change with time, along with adding new features or updates. That\u2019s why each Service Worker has its lifecycle, which corresponds to a series of key events triggering a given operating mode:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Installation \u2192 Installed<\/li><li>Activation \u2192 Activated \/ Idle<\/li><li>Termination \u2192 Redundant (ready to be replaced by a new\/updated SW)<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"412\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_INFOGRAPHIC.jpg\" alt=\"Service Worker Lifecycle\" class=\"wp-image-15912\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_INFOGRAPHIC.jpg 1000w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_INFOGRAPHIC-300x124.jpg 300w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_INFOGRAPHIC-768x316.jpg 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_INFOGRAPHIC-361x149.jpg 361w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_INFOGRAPHIC-200x82.jpg 200w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_INFOGRAPHIC-720x297.jpg 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_INFOGRAPHIC-864x356.jpg 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_INFOGRAPHIC-432x178.jpg 432w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>The event-driven nature of Service Workers means that installation and activation processes trigger the corresponding <code>install<\/code> and <code>activate<\/code> events. Service Workers also make use of <code>message<\/code> events to communicate with other scripts, as well as functional events: <code>fetch<\/code>, <code>push<\/code> and <code>synch<\/code>.<\/p>\n\n\n\n<p>When not in use, an activated Service Worker is idle until terminated or reactivated by a <code>fetch<\/code> or <code>push<\/code> event. In the case of high memory systems, SW can be allowed to run longer so that it can respond faster to the next event. Otherwise, it will be terminated after each event is complete.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-show-must-go-on-service-worker-update\">Show must go on: Service Worker update<\/h3>\n\n\n\n<p>Whenever you need to update app logic or make more profound changes to the cache management, the old SW becomes redundant and a new SW has to be registered and installed. However, until that happens, the previous version of SW is still in charge of <code>fetch<\/code> events and the new SW will remain in waiting.<\/p>\n\n\n\n<p>It\u2019s important to remember that only one Service Worker for each scope can be in use at any given moment. That\u2019s why a <b>new SW can become active only after all pages and tabs using the old SW are closed<\/b>.<\/p>\n\n\n\n<p>With the <code>waitUntil<\/code> promise in place, all improvements and fixes have to be complete before the first <code>fetch<\/code> event is fired. This way, you can implement updates without affecting the user, giving your PWA another advantage over native apps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-service-workers-and-caching-without-crashing\">Service Workers and caching without crashing<\/h2>\n\n\n\n<p>Progressive Web Apps can offer <b>improved loading speed*<\/b> and <b>offline support <\/b>by employing Service Workers to execute different caching strategies. In this context, a caching strategy defines the behaviour of the Service Worker upon receiving a <code>fetch<\/code> event.<\/p>\n\n\n\n<p>*Note that when it comes to <a href=\"https:\/\/codeandpepper.com\/application-performance-in-fintech\/\">optimising app performance<\/a>, it\u2019s not only the <a href=\"https:\/\/codeandpepper.com\/load-speed-cloudflare-test-drive\/\">overall speed<\/a> that we\u2019re fighting for here. An additional focus on <strong>Time to Interactive<\/strong> (TTI) can help you see when the core app features become available to users, even if not all page elements are fully loaded yet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-workbox-caching-strategies\">Workbox caching strategies<\/h3>\n\n\n\n<p>Implementing caching strategies might seem overwhelming when building a Service Worker from scratch. Fortunately, there are a number of <a href=\"https:\/\/pwa-book.awwwards.com\/chapter-11\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">libraries and tools<\/a> to make your life much easier. <a href=\"https:\/\/developers.google.com\/web\/tools\/workbox\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Workbox<\/a> stands out as a go-to resource for PWA developers. With handy <a href=\"https:\/\/codeandpepper.com\/services\/node-js-developers\/\">Node modules<\/a>, high-level JavaScript libraries and webpack plugins, it gives you everything you need to craft a solid foundation for caching, routing, and response logic.<\/p>\n\n\n\n<p>The compilation below highlights key aspects of using Service Workers to cache assets and features the corresponding <code>workbox-strategies<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-cache-first-network-fallback\">Cache first + network fallback<\/h4>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"550\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_3.jpg\" alt=\"Caching strategy cache first\" class=\"wp-image-16969\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_3.jpg 1000w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_3-300x165.jpg 300w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_3-768x422.jpg 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_3-361x199.jpg 361w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_3-182x100.jpg 182w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_3-720x396.jpg 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_3-864x475.jpg 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_3-432x238.jpg 432w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><strong>How:<\/strong> If there is a cached response for a given request, the Service Worker will use that, without calling the network. Otherwise, it will use the network and cache the given response for future use.<\/p>\n\n\n\n<p><strong>Use case:<\/strong> non-critical resources, which don\u2019t change often, e.g. font files.<\/p>\n\n\n\n<p><strong>Code snippet:<\/strong> <code>import {CacheFirst} from 'workbox-strategies';<\/code><\/p>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-network-first-cache-fallback\">Network first + cache fallback<\/h4>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"550\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_4.jpg\" alt=\"Caching strategy network first\" class=\"wp-image-16970\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_4.jpg 1000w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_4-300x165.jpg 300w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_4-768x422.jpg 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_4-361x199.jpg 361w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_4-182x100.jpg 182w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_4-720x396.jpg 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_4-864x475.jpg 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_4-432x238.jpg 432w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><strong>How:<\/strong> The SW will always call the network first and cache the fetched request; it will fallback to cache only if the network fails to return a response.<\/p>\n\n\n\n<p><strong>Use case:<\/strong> Frequently updated requests and whenever the latest version is important but also needed offline, e.g. server-side HTML responses.<\/p>\n\n\n\n<p><strong>Code snippet:<\/strong> <code>import {NetworkFirst} from 'workbox-strategies';<\/code><\/p>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-cache-only\">Cache only<\/h4>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"550\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_2.jpg\" alt=\"Caching strategy cache only\" class=\"wp-image-16971\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_2.jpg 1000w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_2-300x165.jpg 300w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_2-768x422.jpg 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_2-361x199.jpg 361w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_2-182x100.jpg 182w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_2-720x396.jpg 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_2-864x475.jpg 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_2-432x238.jpg 432w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><strong>How:<\/strong> The SW will try to fetch resources only from the cache.<\/p>\n\n\n\n<p><strong>Use case:<\/strong> When fetching resources <a href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/modules\/workbox-precaching\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">selected for precaching<\/a>, e.g. a default offline page or a splash screen.<\/p>\n\n\n\n<p><strong>Code snippet:<\/strong> <code>import {CacheOnly} from 'workbox-strategies';<\/code><\/p>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-network-only\">Network only<\/h4>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"550\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_5.jpg\" alt=\"Caching strategy network only\" class=\"wp-image-16972\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_5.jpg 1000w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_5-300x165.jpg 300w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_5-768x422.jpg 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_5-361x199.jpg 361w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_5-182x100.jpg 182w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_5-720x396.jpg 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_5-864x475.jpg 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_5-432x238.jpg 432w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><strong>How:<\/strong> The SW will try to fetch particular resources only from the network.<\/p>\n\n\n\n<p><strong>Use case:<\/strong> For pages where online live time is essential, e.g. an active user page and its content.<\/p>\n\n\n\n<p><strong>Code snippet:<\/strong> <code>import {NetworkOnly} from 'workbox-strategies';<\/code><\/p>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-stale-while-revalidate\">Stale-while-revalidate<\/h4>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"550\" src=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_1-1.jpg\" alt=\"Caching strategy stale-while-revalidate\" class=\"wp-image-16974\" srcset=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_1-1.jpg 1000w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_1-1-300x165.jpg 300w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_1-1-768x422.jpg 768w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_1-1-361x199.jpg 361w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_1-1-182x100.jpg 182w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_1-1-720x396.jpg 720w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_1-1-864x475.jpg 864w, https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA_ills_1-1-432x238.jpg 432w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><strong>How:<\/strong> The SW will call both the cache and the network. It will quickly fetch a cached response, fallback to network if necessary and then update the cache.<\/p>\n\n\n\n<p><strong>Use case:<\/strong> Loading times take priority over the latest version of page content, e.g. CSS files for a quick render of the initial page.<\/p>\n\n\n\n<p><strong>Code snippet:<\/strong> <code>import {StaleWhileRevalidate} from 'workbox-strategies';<\/code><\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-when-lie-fi-s-on-who-re-you-gonna-call-service-workers\">When Lie-Fi\u2019s on, who\u2019re you gonna call? Service Workers!<\/h2>\n\n\n\n<p>If you\u2019ve already decided to switch from <a href=\"https:\/\/codeandpepper.com\/services\/mobile-app-development\/\">native mobile apps<\/a> to Progressive Web Applications, then Service Workers should become your best dev buddies. Whenever Lie-Fi is looming on the horizon, make sure to have your caching strategies defined and configured to perfection. Now that you\u2019ve made it this far, the land of more-than-optimal performance, offline reliability and <a href=\"https:\/\/codeandpepper.com\/product-design-ux-roadmap\/\">exceptional User Experience<\/a> is finally within reach.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Run an online business long enough and it\u2019s impossible not to come across Progressive Web Apps. Once you have, you might be naturally drawn to the many benefits a PWA offers, but how do you know it\u2019s the best choice for your application? One way is to start with Service Workers: the unsung heroes of<a class=\"moretag\" href=\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":12,"featured_media":15911,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1647],"tags":[1126,1087,163],"class_list":["post-15910","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development","tag-app-performance","tag-mobile-app-development-process","tag-user-experience-solutions"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Service Workers in Progressive Web Apps | Code &amp; Pepper<\/title>\n<meta name=\"description\" content=\"This quick walkthrough focuses on the essential components and caching strategies to help you keep calm and make Service Workers work in PWAs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Service Workers in Progressive Web Apps | Code &amp; Pepper\" \/>\n<meta property=\"og:description\" content=\"This quick walkthrough focuses on the essential components and caching strategies to help you keep calm and make Service Workers work in PWAs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"Code &amp; Pepper\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codeandpepper\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-02T09:52:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-02T09:52:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"864\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Justyna Burzynska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeandpepper\" \/>\n<meta name=\"twitter:site\" content=\"@codeandpepper\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Justyna Burzynska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/\"},\"author\":{\"name\":\"Justyna Burzynska\",\"@id\":\"https:\/\/codeandpepper.com\/#\/schema\/person\/0b4f64163263e0e42636c701e4e712c1\"},\"headline\":\"Service Workers in Progressive Web Apps: Lie-Fi Busters\",\"datePublished\":\"2020-12-02T09:52:41+00:00\",\"dateModified\":\"2020-12-02T09:52:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/\"},\"wordCount\":1155,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codeandpepper.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg\",\"keywords\":[\"App performance\",\"Mobile app development process\",\"User Experience solutions\"],\"articleSection\":[\"Software Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/\",\"url\":\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/\",\"name\":\"Service Workers in Progressive Web Apps | Code &amp; Pepper\",\"isPartOf\":{\"@id\":\"https:\/\/codeandpepper.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg\",\"datePublished\":\"2020-12-02T09:52:41+00:00\",\"dateModified\":\"2020-12-02T09:52:45+00:00\",\"description\":\"This quick walkthrough focuses on the essential components and caching strategies to help you keep calm and make Service Workers work in PWAs.\",\"breadcrumb\":{\"@id\":\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#primaryimage\",\"url\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg\",\"contentUrl\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg\",\"width\":864,\"height\":450},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codeandpepper.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Service Workers in Progressive Web Apps: Lie-Fi Busters\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codeandpepper.com\/#website\",\"url\":\"https:\/\/codeandpepper.com\/\",\"name\":\"Code & Pepper\",\"description\":\"FinTech Developers\",\"publisher\":{\"@id\":\"https:\/\/codeandpepper.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codeandpepper.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codeandpepper.com\/#organization\",\"name\":\"Code & Pepper\",\"url\":\"https:\/\/codeandpepper.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codeandpepper.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/06\/logo.png\",\"contentUrl\":\"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/06\/logo.png\",\"width\":319,\"height\":144,\"caption\":\"Code & Pepper\"},\"image\":{\"@id\":\"https:\/\/codeandpepper.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codeandpepper\/\",\"https:\/\/x.com\/codeandpepper\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codeandpepper.com\/#\/schema\/person\/0b4f64163263e0e42636c701e4e712c1\",\"name\":\"Justyna Burzynska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codeandpepper.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b9e81b2a7e7558372913c6f2437993aa2235cfcc12f64c82fd00be6da2c72fb3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b9e81b2a7e7558372913c6f2437993aa2235cfcc12f64c82fd00be6da2c72fb3?s=96&d=mm&r=g\",\"caption\":\"Justyna Burzynska\"},\"description\":\"Communications Specialist with a strong background in linguistics. Once a professional translator, she investigates, analyses and narrates strategic aspects of FinTech software development, turning case studies into product stories and market data into meaningful insights.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/justyna-burzynska\/\"],\"url\":\"https:\/\/codeandpepper.com\/author\/justyna-burzynska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Service Workers in Progressive Web Apps | Code &amp; Pepper","description":"This quick walkthrough focuses on the essential components and caching strategies to help you keep calm and make Service Workers work in PWAs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/","og_locale":"en_US","og_type":"article","og_title":"Service Workers in Progressive Web Apps | Code &amp; Pepper","og_description":"This quick walkthrough focuses on the essential components and caching strategies to help you keep calm and make Service Workers work in PWAs.","og_url":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/","og_site_name":"Code &amp; Pepper","article_publisher":"https:\/\/www.facebook.com\/codeandpepper\/","article_published_time":"2020-12-02T09:52:41+00:00","article_modified_time":"2020-12-02T09:52:45+00:00","og_image":[{"width":864,"height":450,"url":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg","type":"image\/jpeg"}],"author":"Justyna Burzynska","twitter_card":"summary_large_image","twitter_creator":"@codeandpepper","twitter_site":"@codeandpepper","twitter_misc":{"Written by":"Justyna Burzynska","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#article","isPartOf":{"@id":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/"},"author":{"name":"Justyna Burzynska","@id":"https:\/\/codeandpepper.com\/#\/schema\/person\/0b4f64163263e0e42636c701e4e712c1"},"headline":"Service Workers in Progressive Web Apps: Lie-Fi Busters","datePublished":"2020-12-02T09:52:41+00:00","dateModified":"2020-12-02T09:52:45+00:00","mainEntityOfPage":{"@id":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/"},"wordCount":1155,"commentCount":0,"publisher":{"@id":"https:\/\/codeandpepper.com\/#organization"},"image":{"@id":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg","keywords":["App performance","Mobile app development process","User Experience solutions"],"articleSection":["Software Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/","url":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/","name":"Service Workers in Progressive Web Apps | Code &amp; Pepper","isPartOf":{"@id":"https:\/\/codeandpepper.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#primaryimage"},"image":{"@id":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg","datePublished":"2020-12-02T09:52:41+00:00","dateModified":"2020-12-02T09:52:45+00:00","description":"This quick walkthrough focuses on the essential components and caching strategies to help you keep calm and make Service Workers work in PWAs.","breadcrumb":{"@id":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#primaryimage","url":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg","contentUrl":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2020\/11\/Service_Worker_PWA.jpg","width":864,"height":450},{"@type":"BreadcrumbList","@id":"https:\/\/codeandpepper.com\/service-workers-in-progressive-web-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeandpepper.com\/"},{"@type":"ListItem","position":2,"name":"Service Workers in Progressive Web Apps: Lie-Fi Busters"}]},{"@type":"WebSite","@id":"https:\/\/codeandpepper.com\/#website","url":"https:\/\/codeandpepper.com\/","name":"Code & Pepper","description":"FinTech Developers","publisher":{"@id":"https:\/\/codeandpepper.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeandpepper.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeandpepper.com\/#organization","name":"Code & Pepper","url":"https:\/\/codeandpepper.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeandpepper.com\/#\/schema\/logo\/image\/","url":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/06\/logo.png","contentUrl":"https:\/\/codeandpepper.com\/wp-content\/uploads\/2019\/06\/logo.png","width":319,"height":144,"caption":"Code & Pepper"},"image":{"@id":"https:\/\/codeandpepper.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codeandpepper\/","https:\/\/x.com\/codeandpepper"]},{"@type":"Person","@id":"https:\/\/codeandpepper.com\/#\/schema\/person\/0b4f64163263e0e42636c701e4e712c1","name":"Justyna Burzynska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeandpepper.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b9e81b2a7e7558372913c6f2437993aa2235cfcc12f64c82fd00be6da2c72fb3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b9e81b2a7e7558372913c6f2437993aa2235cfcc12f64c82fd00be6da2c72fb3?s=96&d=mm&r=g","caption":"Justyna Burzynska"},"description":"Communications Specialist with a strong background in linguistics. Once a professional translator, she investigates, analyses and narrates strategic aspects of FinTech software development, turning case studies into product stories and market data into meaningful insights.","sameAs":["https:\/\/www.linkedin.com\/in\/justyna-burzynska\/"],"url":"https:\/\/codeandpepper.com\/author\/justyna-burzynska\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/posts\/15910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/comments?post=15910"}],"version-history":[{"count":26,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/posts\/15910\/revisions"}],"predecessor-version":[{"id":18246,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/posts\/15910\/revisions\/18246"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/media\/15911"}],"wp:attachment":[{"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/media?parent=15910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/categories?post=15910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeandpepper.com\/wp-json\/wp\/v2\/tags?post=15910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}