5 awesome Progressive Web Apps worth exploring
Progressive Web Apps (PWA’s) are truly changing the way we use the web today. Push notifications, offline web pages, and super fast load times are just a few of the great features that developers are using to build Progressive Web Apps.
Quite often I find myself visiting a website and firing up the browser's developer tools to see what PWA goodness is going on under the hood. There are so many great PWA’s on the web today that I thought I’d put together a collection of some of my favourite and dive deeper into the features that they are using. Dissecting a good Progressive Web App is also a good way to learn new techniques!
Twitter Mobile
Without a doubt, one of my favourite PWA’s right now is the Twitter mobile website. You can’t get to it via the normal twitter.com website, but instead you need to navigate to mobile.twitter.com
The PWA is so good that I wish Twitter would make it the default web experience. It’s fast, responsive and even works offline. In fact, the PWA has even replaced the native Twitter app on my mobile device!
Under the hood it is using some clever Service Worker caching to store emojis. I recommend opening up your developer tools and exploring their code further!
Washington Post
The Washington Post PWA is a great example of a news agency using Service Workers to get the most out of the web. If you work on a website that loads a lot of third party content, you'll know how important it can be to ensure that the performance of your site isn't affected by 3rd party scripts. The Washington Post PWA does a great job of using Service Worker caching to ensure that their load times stay fast and resilient regardless of the network.
Under the hood, the app uses the Service Worker Precache library and the Service Worker Toolbox library to get the best out of Service Worker caching. If you'd like to learn more, I’ve previously written about the Service Worker toolbox on this blog.
Because the PWA is built to work offline, it uses the Offline Google Analytics Library. This means that the team doesn’t miss out on any analytical insights coming from usage that occurs while a user might be offline. The Offline Google Analytics library ignores non-Google Analytics requests and will first attempt to fulfill the request against the network. If the user is offline, it will then queue the requests. Each time your Service Worker starts up again, the library will check for queued requests and attempt to resend them.
Flipboard have built a great mobile experience for the web using the features of Progressive Web Apps. Much like the Washington Post website, Flipboard needs to draw in content from 3rd party sources and Service Caching helps achieve resiliency.
Underneath the hood, the site uses precaching to cache fonts and 3rd party SDK’s during Service Worker install time. If you'd like to learn more about the preaching technique that the Flipboard team use, I recommend reading this article for more information.
Paper Planes
Paperplanes.world is a web experience with a difference! It's an online game that allows you to create a paper jet that you virtually “throw” using your mobile phone. The paper plane then joins the thousands of other planes and lets you “catch” another plane. Once you've caught another paper plane it will reveal the location of where it came from.
The Paper Planes web app uses push notifications to keep you engaged and send you timely updates letting you know when your plane has been caught. If you'd like to learn more about push notifications on the web, I've previously blogged about it on this site.
Topple Trump
Regardless of how you voted in the most recent US elections, hopefully you'll still find the Topple Trump PWA interesting. The web app is built as a quiz game that allows users to guess well known quotes that Donald Trump may or may not have said.
The web app is a great example of how developers are using Progressive Web Apps to build amazing experiences on the web. It works completely offline and does a great job of caching both music and animation to make for a fun game.
Underneath the hood it uses the Service Worker toolbox to handle caching based on certain routes. The app also gets an impressive 100/100 when running it through the Lighthouse PWA auditing tool.
Summary
What are some of your favourite Progressive Web Apps? If you are building new and exciting experiences on the web and using these techniques, I'd love to know.
The PWA’s that I've listed in this article are just a few of the many sites out there. If you'd like a little inspiration, I recommend checking out pwa.rocks for more great PWAs!