A Progressive Roadmap for your Progressive Web App

One of the hidden benefits of Progressive Web Apps is that you can start right now and roll out features incrementally. We took this approach when building our own Progressive Web App last year.

Our planning started at the beginning of our recent redesign project. We knew we wanted to make the site into a Progressive Web App eventually so we did a little extra work during the redesign.

When the new design launched in July, we also moved the site to HTTPS and added a manifest. Both are required for a Progressive Web App.

These additions benefited our visitors immediately. HTTPS made the site more secure and protected visitor privacy. A manifest is used by Android devices to decide what icons to use if someone bookmarks your site to the home screen.

A couple months after the redesign launched, we added a service worker. Our first service worker was fairly simple. It cached items to provide a faster experience and provided a fairly plain offline fallback page.

At this point, our site was technically a Progressive Web App. But we weren’t finished.

We modified the service worker to cache recently read pages automatically. We also added a new indicator when someone was offline.

We polished the offline fallback page and added an animation.

Finally, we determined that font loading was one of the biggest bottlenecks for page rendering, so we inlined a subset of our font so that it was available immediately while the full font loaded in the background.

The next bit of functionality was web notifications. We spent extra time making sure we used notifications responsibly and figuring out how to integrate the service worker our notifications vendor used with our existing service worker.

While we were at it, we added Link Preconnect HTTP headers now that our host had added support for HTTP/2.

After notifications were added, all that was left were a few performance tweaks and writing an announcement.

As I mentioned earlier, the great thing about Progressive Web Apps is that we can incrementally build towards them.

Building a Progressive Web App incrementally isn’t only a benefit for your development plans, but it is also a boon for the people who visit your site. With each feature we rolled out, our visitors benefited.

It’s a Progressive Roadmap to a Progressive Web App!Footnote 1

As the arrow in the graphic illustrates, finishing the Progressive Web App wasn’t the end of our journey. We continue to make improvements to our website.

There is one caveat to progressively building your Progressive Web App. You need a decent starting point from a usability and performance perspective.

If your site currently takes over 20 seconds to download on a Fast 3G connection or has a design that doesn’t work well on mobile devices, adding service workers and making it a Progressive Web App won’t be enough. It will help, but you won’t see the sorts of big returns that we document on PWA Stats.

So depending on the performance of your current site, you may need to do a little house keeping as part of your Progressive Roadmap.Footnote 2

Following a Progressive RoadmapFootnote 3 is a blast because you get to see results along the way.

You don’t have to wait to bundle up a binary, submit it to an app store, and wait for approval before your customers benefit.

Every step on the path to a Progressive Web App makes sense on its own. What are you waiting for?