![]() We’ll import the plugin in our Vite config: import from "virtual:pwa-register" If not, feel free to create one from any of the available templates.įirst, we install the VitePWA plugin: npm i vite-plugin-pwa I’ll assume you already have a Vite-based site. Unsurprisingly, there are also webpack and Rollup plugins if you happen to prefer working with those bundlers. It uses Workbox under the hood, and configures it with all the info it needs about the bundles that Vite creates. It needs detailed information about the files you’re pre-caching, which are buried in your build tool. While it can be a fun project, in practice you’ll want to use an established product to generate your service worker - and the best product around is Workbox, which is from the folks at Google.Įven Workbox is a bit of a low-level primitive. This is an absurd amount of work and incredibly difficult to get right. 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’s currently in cache, ejecting files that are no longer needed, while caching the new content. If code updates, the service worker file also changes, containing the new filenames, complete with hashes. ![]() You’d 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, keep track of the files that are cached. Basically, the creation of your service worker needs to be automated, in part, and connected to the build system. If you’re looking for a native turnkey solution between it and the cache API, you’ll be disappointed. It turns out the Service Worker API is an extremely low-level primitive. If you update foo.js, the next deployment of your site may send over foo-XYZ987.js. ![]() Usually, a build system will create something like foo-ABC123.js, where “ABC123” is a hash of the file. If your service worker is caching, say, a foo.js 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.īut in practice you don’t have a foo.js file. You might be wondering what happens with a service worker when your code is updated. And even on the first visit to your site, since the service worker just pre-cached everything, the next place your user clicks will probably be pre-cached already, allowing the browser to completely bypass a network request. 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. 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 Cache Storage API. ![]() More commonly though, a service worker is used to cache assets, both to improve a site’s performance and enable it to do something when it’s offline. Or you could intercept requests for video files and perform an advanced transcoding that the browser doesn’t currently support. For example, you could intercept requests for TypeScript files and compile them on the fly. Service workers have the ability to intercept network requests and do… anything. Table of Contentsīefore getting into the VitePWA plugin, let’s briefly talk about the Service Worker itself.Ī service worker is a background process that runs on a separate thread in your web application. New to Vite? Check out my prior post for an introduction. We’ll walk through the concept of service workers together, then jump right into making one with the VitePWA plugin.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |