Transcript from the "Making an Installable PWA" Lesson
[00:00:01]
>> Best Practices. Well it's telling us that we're not using HTTP 2, we're using localhost so that isn't relevant to us right now. Then this PWA icon is telling us that we're missing some important stuff, we don't have a ServiceWorker, and we don't have a manifest file. So we need to create both of those things.
[00:00:26] We also need to add an Apple touch icon. And once we've done all of those, this application will be installable as a PWA, then if you have an Android phone, you'll get prompted to install it onto your phone and then it will just behave like a native app, which is kinda nice.
[00:00:45] I am going to cheat though and just try and bring in those files directly from the repo where, okay, so I'm just gonna grab the serviceworker that I created earlier from the complete branch, get checkout complete -- src/service-worker. And that's created a serviceworker with a list of files that we want to cache when the service worker gets installed.
[00:01:19] And we've got a few handlers here, when the install event happens, it's gonna populate the cache with all of those files. It's then gonna delete any old caches that are no longer relevant, and then our fetch event handler. This is the most important part of any serviceworker. When it gets a fetch event, it's gonna go to the network first, and if it fails, then it's gonna fall back to the offline cache.
[00:01:44] We need to add some more stuff in our rollup.config at the moment, we have a single config, which is starting from src/main.js. But we also need to have a config for the ServiceWorker, because we need to inject that timestamp value up here. So the cache gets invalidated every time we deploy a new version of this application.
[00:02:15] So inside our rollup.config we're gonna create one of these input is src/service-worker.js. And then we're gonna write that to public/service-worker.js with a format of esm, and we're gonna add a plugin which is gonna replace that timestamp with the actual timestamp. I'm gonna install a plugin called replace. Add that to my config.
[00:02:52] And then when it builds, the serviceworker it's just gonna replace any references to timestamp with the current timestamp by that. Okay, so now in our public folder, we should have a service worker that is indeed referencing the current timestamp. So that's gonna work, now we just need to register the service worker inside our main.js.
[00:03:34] Here, if serviceworker in navigator object because not everything support service workers. Navigates a serviceworker register and then we're gonna give it the name of that file. And then we're gonna quickly apply some of the other recommendations that it had, it asked for a theme color. Again, all of this stuff is only important if you want your application to be installable on mobile phones, as if it were an app that you got from the App Store.
[00:04:28] I'm gonna pull in the manifest file from the same repo. Right, this manifest file is something that browsers look for when they're determining whether or not it can be installed to the home screen. It tells us the name of the game, and description, and also provides a link to an icon that will be used when you start the app.
[00:05:00] We just need to add a link to that manifest inside our index.html. Link rel = manifest href = manifest.json. And I think that is gonna give us a better lighthouse score. So let's start saving the application again, npm run dev. Go back to an incognito window and rerun lighthouse.
[00:05:40] And it is a valid progressive web app. And so now, if we go to the deployed version Whereas using compression and everything's minified, I'm using HTTP 2. We can see if we still get a decent lighthouse score in real life. And there we go, 100% across the board.
[00:06:15] It's a valid progressive web app. So if you go to this on your phone right now, if you have an Android then it will invite you to install it. If we go to the network tab and inspect everything, click on the js tab. This entire bungle, the entire application is 8.3 kilobyte zit or 21.2 kilobytes minified the unzit.
[00:06:36] And we managed to pack an entire game into that pretty small pay load. So that is a small application built in about an hour and half. You can review the repo and go through the steps ,and catch up on any points that you missed. And make some improvements of your own, and share them back to the repo so that other people can see them too.