A Gentle and Practical Introduction to Progressive Web Apps - Part 4

In this series we've already covered the basics of PWAs, including app manifests and service workers. Here we'll tackle devtools, and I'll also share helpful resources.

As a "professional" writer (if I get paid to write, I can say that, right?) I'd like to pretend that every word written down was carefully planned out and driven by an nicely detailed outline. Unfortunately, that isn't exactly the truth. I do outline my work (sometimes) and I do follow a "plan," but of course, as the words hit the paper (or in this case, the keyboard), things change. When I began this series, I had initially planned on four articles. Now that I'm working on the fourth one, I realize that I have more I want to explore and share. So while this is the final article in the series, don't worry - more is on the way.

Over the past three articles I've covered the basics of PWAs with a focus on app manifests and offline support with service workers. In this article, I'm going to cover devtools support and then share resources I think will be especially helpful. As always, I live for your comments, so please give me feedback in the comments section below.

DevTools to the Rescue!

Before I begin, please remember that devtools are changing rapidly, especially when it comes to working with PWAs. I'm going to cover the tooling for the current release of Chrome 65 and Firefox 58. Earlier when I was beginning to learn PWAs, I also made use of the Canary version of Chrome as I noticed a bit of bugginess with Chrome at that time. Firefox also has a developer version that may be worth checking out as well. Let's begin by looking at Chrome.

Chrome and PWA Tooling

With devtools open, you want to select the Application tab. Chrome lets you reorder tabs (did you know that?) so it won't be in any particular position. For my testing, I loaded the PWA available from the previous article. Once selected, you'll see a number of items on the left hand side. The default should be the first, Manifest.

By default, Chrome will render out as much as possible of your manifest file. As you can see in the screenshot above (click to enlarge), there are a few values I didn't specify. You will also see one icon for every size and type specified. Make special note of the "Add to homescreen" link on the right. This simulates the automatic prompt a user may get for having met all the criteria for a good PWA. What's cool is that you can click on this and see if you are missing any such criteria. Running this on my blog where I have a manifest but not a very complete one, I get:

Site cannot be installed: a 144px square PNG icon is required,
but no supplied icon meets this requirement

Unfortunately, this link gives one error at a time. So if you fix an issue and try again, you may get a completely new error when you try again. I wish Chrome would simply list out everything that is incomplete. And remember: an error here does not mean the user can't install it to their home screen manually.

Next up is the Service Workers panel:

This gives you the ability to see what (if any) service worker is registered, when it was set up, and what status it is in currently. You can also force updates or unregister a worker. You can also test both push and sync here, which I've mentioned but not covered in this series.

In case you're curious, this is where you would fix a problem I ran into a few months ago. I do a lot of my testing on localhost, typically http://localhost:3333. I tend to forget that I was testing a service worker and will be surprised when a web project shows completely different files from what I was expecting. The culprit is typically a service worker that loads from the cache before checking the network. To fix that, I pop op my devtools, hit unregister, and reload the page.

Also, make note of "Service workers from other domains." If you open that, you can see each and every service worker that a site has installed. This is an incredibly powerful way to see how folks are making use of service workers and learn from their examples.

For the most part, the other items in this devtool are not specific to PWAs (for example, Local Storage has been around for years). However, if you are doing any caching, you can see the current occupants of the cache under the Cache Storage link.

In the screenshot above, you can see the contents of the cache my service worker created.

Firefox and PWA Tooling

Firefox, especially since Quantum, is an incredible browser. In fact, it is now my primary browser. Unfortunately, while it supports both manifests and service workers, the tooling is pretty minimal. You don't get any support for manifests and none (built-in) for service workers. You do get cache inspection under the Storage tab:

While there isn't a formal UI for service workers, you can get to a special kinda hacky panel at about:debugging#workers.

This will be especially useful for unregistering a service worker while you debug.

The Best Resources

Now I'm going to wrap up this series with a list of resources. Not just any list - but the absolute best list of PWA resources you will ever read. Period. (Ok, maybe not.) As you can probably imagine, there are a good deal of articles on the Internet that discuss PWAs.

Here are a few resources that I recommend.

"Building Progressive Web Apps" by Tal Ater is an incredible book and I cannot recommend it enough. This is one of the few technical books where I had a PDF and picked up the physical book for easier access. He goes into incredible detail over every single aspect of PWA development including background sync and push. (In fact, I had never even heard of background sync until I read his book.)

Next, read the PWA guide from Mozilla. The MDN web docs are the best resource for everything web related and their guides and references on PWAs is no exception.

After the Mozilla guide, I'd then review Google's site on Progressive Web Apps. It is also very comprehensive and deep. I find Mozilla's documentation to be friendlier, but you'll want to read Google's as well.

Finally - check out this PWA Stats site. This is a site of small "factoids" about the benefits various sites have gotten from embracing PWA features. This is a great way to "sell" PWA development to management. As an example:

"Forbes' PWA loads in 2.5 seconds on mobile compared to 6.5 seconds for its previous site. Impressions per visit are up 10%."

Can We Talk about the Apple in the Room?

So yeah… what about that little fruit company out in Cupertino? First off - the good news is that Apple is officially moving towards supporting PWAs. However - they are putting their own little spin on things which just makes our lives as developers just that much more fun. Thanks Apple! I'm not going to say much more about it except to point you to the excellent article Maximiliano Firtman has written up on Medium. He is updating it after every release of the currently in development version of iOS so you will want to bookmark it and return often.

The End?

So, this wraps up my own little series on PWAs and I hope it has been helpful. As I said up top, I do plan on writing more, and like everyone else, I still have a lot to learn. Having been around at the beginning of the web, I continue to be excited about what is possible and what is coming soon!