Simple Progressive Web App Example
Today, I wanted to show you a very simple implementation of a Progressive Web App, as well as pass along all the roadblocks I hit, and things to look for.
Below you will want to add this somewhere before your html’s
Now that we have the call to the
service-worker.js file, we need to create that file and place it in the root of our project/app. The contents of a simple service worker are below.
Great! Now was have a service worker ready and stuff, but we’re not finished yet. We need a good ole’ manifest file for app reference and config/settings. To reference said
manifest.json file, we need to add a meta tag within our html’s
<head> section. Pop this anywhere within the head tag (with the path changed to wherever your manifest file is located):
Now here is a very barebones
Do all of these above things right, reload the page and you should be good to go!
Is my PWA working?
Now let’s check to see if things are actually offline accessible… first let’s open up a Chrome browser. Next, we can go 2 different ways to check, and luckily, I’ll show you both of them!
Option 1: Dev Console
- Open up your dev console in Chrome.
- Navigate to the
- There is a
- Here is where the service worker will be registered (if it is).
- You can also update/sync/un-register the service worker too (helpful for debugging).
Option 2: Google Lighthouse
- Install this Google plugin: Lighthouse
- Once installed (see screenshot below), you can now run a report on your site to get scored on the following things:
- Progressive Web App
- Best Practices
- This tool has saved me a lot of time as far as optimization and accessibility.
- It also gives another great plugin (aXe) to use, specifically for accessibility troubleshooting.
- But all in all, as you see in the second screenshot, a checklist of what isn’t right when it comes to getting a Progressive Web App running.
Score: before I made the changes above
Score: after I made the changes above
navigator.serviceWorker is never ready
I ran into the service worker registering but never hitting that
.ready() state. The reason being, my service worker was in an
/assets/ sub-directory. That’s a no go for service workers evidently. They need to be able to see the entire app, so you must place it in the
root of your project/app. Reference
Paths in scope should only be used if you have a full understanding of what is going on. Please keep in mind the service worker needs access to your entire app.
naming of the service worker file
At one point, I thought that this mattered… it does not matter what you name your service worker file, just as long as you update the file name in the register call as well.
manifest referenced in head
Please remember to add the meta tag for reference of the
manifest.json file and the path to that file is correct. Running the Google Lighthouse plugin will give you a step-by-step list of things that are wrong with your manifest file, if there are any.