{"id":361001,"date":"2022-01-18T06:30:26","date_gmt":"2022-01-18T14:30:26","guid":{"rendered":"https:\/\/css-tricks.com\/?p=361001"},"modified":"2022-01-18T06:30:29","modified_gmt":"2022-01-18T14:30:29","slug":"vitepwa-plugin-offline-service-worker","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/vitepwa-plugin-offline-service-worker\/","title":{"rendered":"Making a Site Work Offline Using the VitePWA Plugin"},"content":{"rendered":"\n<p><a href=\"https:\/\/vite-plugin-pwa.netlify.app\/\" rel=\"noopener\">The VitePWA plugin<\/a> from <a href=\"https:\/\/antfu.me\" rel=\"noopener\">Anthony Fu<\/a> is a fantastic tool for your Vite-powered sites. It helps you add a service worker that handles:<\/p>\n\n\n\n<ul><li>offline support<\/li><li>caching assets and content<\/li><li>prompting the user when new content is available<\/li><li>\u2026and other goodies!<\/li><\/ul>\n\n\n\n<p>We\u2019ll walk through the concept of service workers together, then jump right into making one with the VitePWA plugin.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>New to Vite? Check out <a href=\"https:\/\/css-tricks.com\/adding-vite-to-your-existing-web-app\">my prior post<\/a> for an introduction.<\/p>\n\n\n<h2 class=\"simpletoc-title \">Table of Contents<\/h2><ol class=\"simpletoc-list\"   >\n<li>\n<a  href=\"#service-workers-introduced\">Service workers, introduced<\/a><\/li><li>\n<a  href=\"#versioning-and-manifests\">Versioning and manifests<\/a><\/li><li>\n<a  href=\"#our-first-service-worker\">Our first service worker<\/a><\/li><li>\n<a  href=\"#what-about-offline-functionality\">What about offline functionality?<\/a><\/li><li>\n<a  href=\"#how-service-workers-update\">How service workers update<\/a><\/li><li>\n<a  href=\"#a-better-way-to-update-content\">A better way to update content<\/a><\/li><li>\n<a  href=\"#runtime-caching\">Runtime caching<\/a><\/li><li>\n<a  href=\"#adding-your-own-service-worker-content\">Adding your own service worker content<\/a><\/li><li>\n<a  href=\"#wrapping-up\">Wrapping up<\/a><\/li><\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"service-workers-introduced\">Service workers, introduced<\/h3>\n\n\n<p>Before getting into the VitePWA plugin, let\u2019s briefly talk about the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Service_Worker_API\" rel=\"noopener\">Service Worker<\/a> itself.<\/p>\n\n\n\n<p>A <dfn>service worker<\/dfn> is a background process that runs on a separate thread in your web application. Service workers have the ability to intercept network requests and do\u2026 anything. The possibilities are surprisingly wide. For example, you could intercept requests for TypeScript files and compile them on the fly. Or you could intercept requests for video files and perform an advanced transcoding that the browser doesn\u2019t currently support. More commonly though, a service worker is used to cache assets, both to improve a site\u2019s performance and enable it to do <em>something<\/em> when it\u2019s offline.<\/p>\n\n\n\n<p>When someone first lands on your site, the service worker the VitePWA plugin creates installs, and caches all of your HTML, CSS, and JavaScript files by leveraging the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Cache\" rel=\"noopener\">Cache Storage API<\/a>. The result is that, on subsequent visits to your site, the browser will load those resources from cache, rather than needing to make network requests. And even on the first visit to your site, since the service worker <em>just<\/em> pre-cached everything, the next place your user clicks will probably be pre-cached already, allowing the browser to completely bypass a network request.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"versioning-and-manifests\">Versioning and manifests<\/h3>\n\n\n<p>You might be wondering what happens with a service worker when your code is updated. If your service worker is caching, say, a <code>foo.js<\/code> file, and you modify that file, you want the service worker to pull down the updated version, the next time a user visits the site.<\/p>\n\n\n\n<p>But in practice you don\u2019t have a <code>foo.js<\/code> file. Usually, a build system will create something like <code>foo-ABC123.js<\/code>, where \u201cABC123\u201d is a hash of the file. If you update <code>foo.js<\/code>, the next deployment of your site may send over <code>foo-XYZ987.js<\/code>. How does the service worker handle this?<\/p>\n\n\n\n<p>It turns out the Service Worker API is an <em>extremely<\/em> low-level primitive. If you\u2019re looking for a native turnkey solution between it and the cache API, you\u2019ll be disappointed. <strong>Basically, the creation of your service worker needs to be automated, in part, and connected to the build system.<\/strong> You\u2019d need to see all the assets your build created, hard-code those file names into the service worker, have code to pre-cache them, and more importantly, <em>keep track of<\/em> the files that are cached.<\/p>\n\n\n\n<p>If code updates, the service worker file also changes, containing the <em>new<\/em> filenames, complete with hashes. When a user makes their next visit to the app, the new service worker will need to install, and compare the new file manifest with the manifest that\u2019s currently in cache, ejecting files that are no longer needed, while caching the new content.<\/p>\n\n\n\n<p>This is an absurd amount of work and incredibly difficult to get right. While it can be a fun project, in practice you\u2019ll want to use an established product to generate your service worker \u2014 and the best product around is <a href=\"https:\/\/developers.google.com\/web\/tools\/workbox\" rel=\"noopener\">Workbox<\/a>, which is from the folks at Google.<\/p>\n\n\n\n<p>Even Workbox is a bit of a low-level primitive. It needs detailed information about the files you\u2019re pre-caching, which are buried in your build tool. This is why we use the VitePWA plugin. It uses Workbox under the hood, and configures it with all the info it needs about the bundles that Vite creates. Unsurprisingly, there are also <a href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/guides\/generate-service-worker\/webpack\" rel=\"noopener\">webpack<\/a> and <a href=\"https:\/\/www.npmjs.com\/package\/rollup-plugin-workbox\" rel=\"noopener\">Rollup<\/a> plugins if you happen to prefer working with those bundlers.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"our-first-service-worker\">Our first service worker<\/h3>\n\n\n<p>I\u2019ll assume you already have a Vite-based site. If not, feel free to <a href=\"https:\/\/vitejs.dev\/guide\/#scaffolding-your-first-vite-project\" rel=\"noopener\">create one<\/a> from any of the <a href=\"https:\/\/vitejs.dev\/guide\/#community-templates\" rel=\"noopener\">available templates<\/a>.<\/p>\n\n\n\n<p>First, we install the VitePWA plugin:<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">npm i vite-plugin-pwa<\/code><\/pre>\n\n\n\n<p>We\u2019ll import the plugin in our Vite config:<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">import { VitePWA } from \"vite-plugin-pwa\"<\/code><\/pre>\n\n\n\n<p>Then we put it to use in the config as well:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">plugins: [\n  VitePWA()<\/code><\/pre>\n\n\n\n<p>We\u2019ll add more options in a bit, but that\u2019s all we need to create a surprisingly useful service worker. Now let\u2019s register it somewhere in the entry of our application with this code:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">import { registerSW } from \"virtual:pwa-register\";\n\nif (\"serviceWorker\" in navigator) {\n  \/\/ &amp;&amp; !\/localhost\/.test(window.location)) {\n  registerSW();\n}<\/code><\/pre>\n\n\n\n<p>Don\u2019t let the code that\u2019s commented out throw you for a loop. It&#8217;s extremely important, in fact, as it prevents the service worker from running in development. We only want to install the service worker anywhere that\u2019s not on the localhost where we\u2019re developing, that is, unless we\u2019re developing the service worker itself, in which case we can comment out that check (and revert before pushing code to the main branch).<\/p>\n\n\n\n<p>Let\u2019s go ahead and open a fresh browser, launch DevTools, navigate to the Network tab, and run the web app. Everything should load as you\u2019d normally expect. The difference is that you should see a whole slew of network requests in DevTools.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637565267503_image.png\" alt=\"A screenshot of DevTools listing all of the network requests for the currant app using the VitePWA plugin. There are a total of 16 various JavaScript and CSS files.\"\/><\/figure>\n\n\n\n<p>That\u2019s Workbox pre-caching the bundles. Things are working!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"what-about-offline-functionality\">What about offline functionality?<\/h3>\n\n\n<p>So, our service worker is pre-caching all of our bundled assets. That means it will serve those assets from cache without even needing to hit the network. Does that mean our service worker could serve assets even when the user has no network access? Indeed, it does!<\/p>\n\n\n\n<p>And, believe it or not, it\u2019s already done. Give it a try by opening the Network tab in DevTools and telling Chrome to simulate offline mode, like this.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637633418654_image.png\" alt=\"Screenshot of the DevTools UO to simulate an offline connection with the select menu open. The No throttling option is currently checked but the Offline option is highlighted in light blue.\"\/><figcaption>The&nbsp;\u201cNo&nbsp;throttling\u201d option is the default selection. Click that and select the&nbsp;\u201cOffline\u201d&nbsp;option to simulate an offline connection.<\/figcaption><\/figure>\n\n\n\n<p>Let\u2019s refresh the page. You <em>should<\/em> see everything load. Of course, if you\u2019re running any network requests, you\u2019ll see them hang forever since you\u2019re offline. Even here, though, there are things you can do. Modern browsers ship with their own internal, persistent database called IndexedDB. There\u2019s nothing stopping you from writing your own code to sync some data to there, then write some custom service worker code to intercept network requests, determine if the user is offline, and then serve equivalent content from IndexedDB if it&#8217;s in there.<\/p>\n\n\n\n<p>But a much simpler option is to detect <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/onLine\" rel=\"noopener\">if the user is offline<\/a>, show a message about being offline, and then bypass the data requests. This is a topic unto itself, which <a href=\"https:\/\/css-tricks.com\/making-web-app-work-offline-part-2-implementation\/\">I\u2019ve written about<\/a> in much greater detail.<\/p>\n\n\n\n<p>Before showing you how to write, and integrate your own service worker content, let\u2019s take a closer look at our existing service worker. In particular, let&#8217;s see how it manages updating\/changing content. This is surprisingly tricky and easy to mess up, even with the VitePWA plugin.<\/p>\n\n\n\n<p>Before moving on, make sure you tell Chrome DevTools to put you back online.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"how-service-workers-update\">How service workers update<\/h3>\n\n\n<p>Take a closer look at what happens to our site when we change the content. We\u2019ll go ahead and remove our existing service worker, which we can do in the Application tab of DevTools, under Storage.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1154\" height=\"774\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634017139_image.png?resize=1154%2C774&#038;ssl=1\" alt=\"Screenshot showing the Storage panel of DevTools. The DevTools menu is a panel on the left and the app usage is displayed in a panel on the right, showing that 508 kilobytes of data total is used, where 392 kilobytes are cached and 16.4 are service workers. A button to clear site data is below the Usage stats with a deep blue label and a light gray background.\" class=\"wp-image-361008\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634017139_image.png?w=1154&amp;ssl=1 1154w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634017139_image.png?resize=300%2C201&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634017139_image.png?resize=1024%2C687&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634017139_image.png?resize=768%2C515&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634017139_image.png?resize=1000%2C671&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Click the \u201cClear site data\u201d button to get a clean slate. While I\u2019m at it, I\u2019m going to remove most of the routes of my own site so there\u2019s fewer resources, then let Vite rebuild the app.<\/p>\n\n\n\n<p>Look in the generated <code>sw.js<\/code> to see the generated Workbox service worker. There should be a pre-cache manifest inside of it. Mine looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1336\" height=\"474\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634248783_image.png?resize=1336%2C474&#038;ssl=1\" alt=\"A dark mode screenshot showing a list of eight asset urls inside of a precacheAndRoute function.\" class=\"wp-image-361013\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634248783_image.png?w=1336&amp;ssl=1 1336w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634248783_image.png?resize=300%2C106&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634248783_image.png?resize=1024%2C363&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634248783_image.png?resize=768%2C272&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634248783_image.png?resize=1000%2C355&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p class=\"is-style-explanation\">If <code>sw.js<\/code> is minified, run it through Prettier to make it easier to read.<\/p>\n\n\n\n<p>Now let\u2019s run the site and see what\u2019s in our cache:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1962\" height=\"382\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634292609_image.png?resize=1962%2C382&#038;ssl=1\" alt=\"\" class=\"wp-image-361015\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634292609_image.png?w=1962&amp;ssl=1 1962w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634292609_image.png?resize=300%2C58&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634292609_image.png?resize=1024%2C199&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634292609_image.png?resize=768%2C150&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634292609_image.png?resize=1536%2C299&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637634292609_image.png?resize=1000%2C195&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Let\u2019s focus on the <code>settings.js file<\/code>. Vite generated <code>assets\/settings.ccb080c2.js<\/code> based on the hash of its contents. Workbox, being independent of Vite, generated <em>its own<\/em> hash of the same file. If that same file name were to be generated with different content, then a new service worker would be re-generated, with a different pre-cache manifest (same file, but different revision) and Workbox would know to cache the new version, and remove the old when it\u2019s no longer needed.<\/p>\n\n\n\n<p>Again, the filenames will always be different since we\u2019re using a bundler that injects hash codes into our file names, but Workbox supports dev environments which don\u2019t do that.<\/p>\n\n\n\n<p class=\"is-style-explanation\">Since the time writing, the VitePWA plugin has been updated and no longer injects these revision hashes. If you\u2019re attempting to follow along with the steps in this article, this specific step might be slightly different from your actual experience. See <a href=\"https:\/\/github.com\/antfu\/vite-plugin-pwa\/issues\/163\" rel=\"noopener\">this GitHub issue<\/a> for more context.<\/p>\n\n\n\n<p>If we update our <code>settings.js<\/code> file, then Vite will create a new file in our build, with a new hash code, which Workbox will treat as a new file. Let\u2019s see this in action. After changing the file and re-running the Vite build, our pre-cache manifest looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637635068016_image.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Now, when we refresh the page, the prior service worker is <em>still<\/em> running and loading the <em>prior<\/em> file. Then, the <em>new<\/em> service worker, with the <em>new<\/em> pre-cache manifest is downloaded and pre-cached.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637635183984_image.png\" alt=\"A DevTools screenshot showing a table of pre-cached assets processed by the VitePWA plugin and Workbox.\"\/><figcaption>The new pre-cached manifest is displayed in the list of cached assets. Notice that both versions of our settings file are there (and both versions of a few other assets were affected as well): the old version, since that\u2019s what\u2019s still being run, and the new version, since the new service worker has pre-cached it.<\/figcaption><\/figure>\n\n\n\n<p>Note the corollary here: our old content is still being served to the user since the old service worker is still running. The user is unable to see the change we just made, even if they refresh because the service worker, by default, guarantees any and all tabs with this web app are running the <em>same<\/em> version. If you want the browser to show the updated version, close your tab (and any other tabs with the site), and re-open it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2220\" height=\"714\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637635407986_image.png?resize=2220%2C714&#038;ssl=1\" alt=\"The same DevTools screenshot of pre-cached assets, but now only displaying new assets instead of duplicates.\" class=\"wp-image-361016\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637635407986_image.png?w=2220&amp;ssl=1 2220w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637635407986_image.png?resize=300%2C96&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637635407986_image.png?resize=1024%2C329&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637635407986_image.png?resize=768%2C247&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637635407986_image.png?resize=1536%2C494&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637635407986_image.png?resize=2048%2C659&amp;ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637635407986_image.png?resize=1000%2C322&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The cache should now only contain the new assets.<\/figcaption><\/figure>\n\n\n\n<p>Workbox did all the legwork of making this all come out right! We did very little to get this going.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"a-better-way-to-update-content\">A better way to update content<\/h3>\n\n\n<p>It\u2019s unlikely that you can get away with serving stale content to your users until they happen to close all their browser tabs. Fortunately, the VitePWA plugin offers a better way. The <a href=\"https:\/\/vite-plugin-pwa.netlify.app\/guide\/auto-update.html\" rel=\"noopener\"><code>registerSW<\/code> function<\/a> accepts an object with an <code>onNeedRefresh<\/code> method. This method is called whenever there\u2019s a new service worker waiting to take over. <code>registerSW<\/code> also returns a function that you can call to reload the page, activating the new service worker in the process.<\/p>\n\n\n\n<p>That\u2019s a lot, so let\u2019s see some code:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">if (\"serviceWorker\" in navigator) {\n  \/\/ &amp;&amp; !\/localhost\/.test(window.location) &amp;&amp; !\/lvh.me\/.test(window.location)) {\n  const updateSW = registerSW({\n    onNeedRefresh() {\n      Toastify({\n        text: `&lt;h4 style='display: inline'>An update is available!&lt;\/h4>\n               &lt;br>&lt;br>\n               &lt;a class='do-sw-update'>Click to update and reload&lt;\/a>&nbsp;&nbsp;`,\n        escapeMarkup: false,\n        gravity: \"bottom\",\n        onClick() {\n          updateSW(true);\n        }\n      }).showToast();\n    }\n  });\n}<\/code><\/pre>\n\n\n\n<p>I\u2019m using the <a href=\"https:\/\/www.npmjs.com\/package\/toastify-js\" rel=\"noopener\">toastify-js library<\/a> to show a toast UI component to let users know when a new version of the service worker is available and waiting. If the user clicks the toast, I call the function VitePWA gives me to reload the page, with the new service worker running.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"516\" height=\"198\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637636900295_image.png?resize=516%2C198&#038;ssl=1\" alt=\"A toast component screenshot with white text and a slight background gradient that goes from light blue on the left to bright blue on the right. It reads: an update is available! Click to update and reload.\" class=\"wp-image-361018\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637636900295_image.png?w=516&amp;ssl=1 516w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637636900295_image.png?resize=300%2C115&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Now when we have pending updates, a nice toast component pops up on the front end. Clicking it reloads the page with the new content in there.<\/figcaption><\/figure>\n\n\n\n<p>One thing to remember here is that, after you deploy the code to show the toast, the toast component won\u2019t show up the next time you load your site. That\u2019s because the old service worker (the one before we added the toast component) is still running. That requires manually closing all tabs and re-opening the web app for the new service worker to take over. Then, the <em>next<\/em> time you update some code, the service worker should show the toast, prompting you to update.<\/p>\n\n\n\n<p>Why doesn\u2019t the service worker update when the page is refreshed? I mentioned earlier that refreshing the page does not update or activate the waiting service worker, so why does <em>this<\/em> work? Calling this method doesn\u2019t only refresh the page, but it calls some low-level Service Worker APIs (in particular <code>skipWaiting<\/code>) as well, giving us the outcome we want.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"runtime-caching\">Runtime caching<\/h3>\n\n\n<p>We\u2019ve seen the bundle pre-caching we get for free with VitePWA for our build assets. What about caching any other content we might request at runtime? Workbox supports this via its <code>runtimeCaching<\/code> feature.<\/p>\n\n\n\n<p>Here\u2019s how. The VitePWA plugin can take an object, one property of which is <code>workbox<\/code>, which takes Workbox properties.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const getCache = ({ name, pattern }: any) => ({\n  urlPattern: pattern,\n  handler: \"CacheFirst\" as const,\n  options: {\n    cacheName: name,\n    expiration: {\n      maxEntries: 500,\n      maxAgeSeconds: 60 * 60 * 24 * 365 * 2 \/\/ 2 years\n    },\n    cacheableResponse: {\n      statuses: [200]\n    }\n  }\n});\n\/\/ ...\n\n  plugins: [\n    VitePWA({\n      workbox: {\n        runtimeCaching: [\n          getCache({ \n            pattern: \/^https:\\\/\\\/s3.amazonaws.com\\\/my-library-cover-uploads\/, \n            name: \"local-images1\" \n          }),\n          getCache({ \n            pattern: \/^https:\\\/\\\/my-library-cover-uploads.s3.amazonaws.com\/, \n            name: \"local-images2\" \n          })\n        ]\n      }\n    })\n  ],\n\/\/ ...<\/code><\/pre>\n\n\n\n<p>I know, that\u2019s a lot of code. But all it\u2019s really doing is telling Workbox to cache anything it sees matching those URL patterns. <a href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/reference-docs\/latest\/module-workbox-build#.RuntimeCachingEntry\" rel=\"noopener\">The docs<\/a> provide much more info if you want to get deep into specifics.<\/p>\n\n\n\n<p>Now, after that update takes effect, we can see those resources being served by our service worker.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1578\" height=\"170\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637637974120_image.png?resize=1578%2C170&#038;ssl=1\" alt=\"DevTools screenshot showing the resources that are loaded by the browser. There are four jpeg images.\" class=\"wp-image-361021\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637637974120_image.png?w=1578&amp;ssl=1 1578w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637637974120_image.png?resize=300%2C32&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637637974120_image.png?resize=1024%2C110&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637637974120_image.png?resize=768%2C83&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637637974120_image.png?resize=1536%2C165&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637637974120_image.png?resize=1000%2C108&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>And we can see the corresponding cache that was created.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1702\" height=\"586\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637638053731_image.png?resize=1702%2C586&#038;ssl=1\" alt=\"DevTools screenshot showing the new cache instance that is stored in Cache Storage. It includes all of the cached images.\" class=\"wp-image-361023\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637638053731_image.png?w=1702&amp;ssl=1 1702w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637638053731_image.png?resize=300%2C103&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637638053731_image.png?resize=1024%2C353&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637638053731_image.png?resize=768%2C264&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637638053731_image.png?resize=1536%2C529&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_3C8A95FDBE22C735794597C555C00971224DE1D0D940961AF7164CACA28CF6E5_1637638053731_image.png?resize=1000%2C344&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"adding-your-own-service-worker-content\">Adding your own service worker content<\/h3>\n\n\n<p>Let\u2019s say you want to get advanced with your service worker. You want to add some code to sync data with IndexedDB, add fetch handlers, and respond with IndexedDB data when the user is offline (again, <a href=\"https:\/\/css-tricks.com\/making-web-app-work-offline-part-2-implementation\/\">my prior post<\/a> walks through the ins and outs of IndexedDB). But how do you put your own code into the service worker that Vite creates for us?<\/p>\n\n\n\n<p>There\u2019s another Workbox option we can use for this: <code>importScripts<\/code>.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">VitePWA({\n  workbox: {\n    importScripts: [\"sw-code.js\"],<\/code><\/pre>\n\n\n\n<p>Here, the service worker will request <code>sw-code.js<\/code> at runtime. In that case, make sure there\u2019s an <code>sw-code.js<\/code> file that can be served by your application. The easiest way to achieve that is to put it in the <code>public<\/code> folder (see the <a href=\"https:\/\/vitejs.dev\/config\/#publicdir\" rel=\"noopener\">Vite docs<\/a> for detailed instructions).<\/p>\n\n\n\n<p>If this file starts to grow to a size such that you need to break things up with JavaScript imports, make sure you bundle it to prevent your service worker from trying to execute import statements (which it may or may not be able to do). You can create a separate Vite build instead.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"wrapping-up\">Wrapping up<\/h3>\n\n\n<p>At the end of 2021, CSS-Tricks asked a bunch of front-end folks what one thing someone cans do to make their website better. <a href=\"https:\/\/css-tricks.com\/add-a-service-worker-to-your-site\/\">Chris Ferdinandi suggested a service worker.<\/a> Well, that\u2019s exactly what we accomplished in this article and it was relatively simple, wasn\u2019t it? That\u2019s thanks to the VitePWA with hat tips to Workbox and the Cache API.<\/p>\n\n\n\n<p>Service workers that leverage the Cache API are capable of greatly improving the perf of your web app. And while it might seem a little scary or confusing at first, it\u2019s nice to know we have tools like the VitePWA plugin to simplify things a great deal. Install the plugin and let it do the heavy lifting. Sure, there are more advanced things that a service worker can do, and VitePWA can be used for more complex functionality, but an offline site is a fantastic starting point!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The VitePWA plugin from Anthony Fu is a fantastic tool for your Vite-powered sites. It helps you add a service worker that handles: offline support caching assets and content prompting the user when new content is available \u2026and other goodies! We\u2019ll walk through the concept of service workers together, then jump right into making one [&hellip;]<\/p>\n","protected":false},"author":250838,"featured_media":361033,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Making a Site Work Offline Using the VitePWA Plugin by @AdamRackis","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[949,18951],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/website-offline-pwa.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":364166,"url":"https:\/\/css-tricks.com\/adding-cdn-caching-to-a-vite-build\/","url_meta":{"origin":361001,"position":0},"title":"Adding CDN Caching to a Vite Build","date":"April 4, 2022","format":false,"excerpt":"Content delivery networks, or CDNs, allow you to improve the delivery of your website\u2019s static resources, most notably, with CDN caching. They do this by serving your content from edge locations, which are located all over the world. When a user browses to your site, and your site requests resources\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/vite-cloudfront.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359243,"url":"https:\/\/css-tricks.com\/adding-vite-to-your-existing-web-app\/","url_meta":{"origin":361001,"position":1},"title":"Adding Vite to Your Existing Web App","date":"January 11, 2022","format":false,"excerpt":"Vite (pronounced \u201cveet\u201d) is a newish JavaScript bundler. It comes batteries-included, requires almost no configuration to be useful, and includes plenty of configuration options. Oh\u2014and it\u2019s fast. Incredibly fast. This post will walk through the process of converting an existing project to Vite. We\u2019ll cover things like aliases, shimming webpack\u2019s\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/webpack-vite.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305204,"url":"https:\/\/css-tricks.com\/auto-archival\/","url_meta":{"origin":361001,"position":2},"title":"Auto-Archival","date":"March 20, 2020","format":false,"excerpt":"I'm sure most of us have used the ol' Wayback Machine to access some site that's gone offline. I don't actually know how it decides what sites to archive and when, but you can tell it to save pages. There is UI for it right on its homepage. Also, there\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/wayback-machine.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359055,"url":"https:\/\/css-tricks.com\/add-a-service-worker-to-your-site\/","url_meta":{"origin":361001,"position":3},"title":"Add a Service Worker to Your Site","date":"December 28, 2021","format":false,"excerpt":"One of the best things you can do for your website in 2022 is add a service worker, if you don't have one in place already. Service workers give your website super powers. Today, I want to show you some of the amazing things that they can do, and give\u2026","rel":"","context":"In &quot;2021 End-of-Year Thoughts&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/cog-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374731,"url":"https:\/\/css-tricks.com\/the-difference-between-web-sockets-web-workers-and-service-workers\/","url_meta":{"origin":361001,"position":4},"title":"The Difference Between Web Sockets, Web Workers, and Service Workers","date":"November 3, 2022","format":false,"excerpt":"Web Sockets, Web Workers, Service Workers\u2026 these are terms you may have read or overheard. Maybe not all of them, but likely at least one of them. And even if you have a good handle on front-end development, there\u2019s a good chance you need to look up what they mean.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/service-web-worker-socket.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":337396,"url":"https:\/\/css-tricks.com\/comparing-the-new-generation-of-build-tools\/","url_meta":{"origin":361001,"position":5},"title":"Comparing the New Generation of Build Tools","date":"April 8, 2021","format":false,"excerpt":"A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over the last few years, including webpack, Babel, Rollup, Parcel, create-react-app. These new tools aren\u2019t designed to perform the exact same function, and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/build-tools.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/website-offline-pwa.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/361001"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/250838"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=361001"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/361001\/revisions"}],"predecessor-version":[{"id":361871,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/361001\/revisions\/361871"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/361033"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=361001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=361001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=361001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}