In his The Case for Progressive Web Apps presentation at An Event Apart in Denver, Jason Grigsby walked through the benefits of building Progressive Web Apps for your Web experiences and how to go about it. Here's my notes from his talk:
- Progressive Web Apps (PWAs) are getting a lot of attention but we're still really early in their development. So what matters today and why?
- A PWA is a set of technologies designed to make faster, more capable Web sites. They load fast, are available online, are secure, can be accessed from your home screen, have push notifications, and more.
- Companies using PWAs include Flipkart, Twitter (75% increase in tweets, 65% decrease in bounce rates), and many more.
- Are PWAs any different than well-built Web sites? Not really, but the term helps get people excited and build toward best practices on the Web.
- Web browsers are providing incentives for building PWAs by prompting users to add PWAs to their home screen. These "add to home screen" banners convert 5-6x better than native app install banners.
- In Android, PWAs show up in the doc, settings and other places. Microsoft is putting PWAs within their app store. Search results may also start highlighting PWAs.
Why Progressive Web Apps?
- Not every customer will have your native app installed. A better Web experience will help you reach people who don't.
- Getting people to install and keep using native apps is difficult. App stores can also change their policies and interfaces which could negatively impact your native app.
- You should encrypt your Web sites. Web browsers won't give you access to new features like http2, and location detection if you don't.
- You should make your Web site fast. PWAs can have a big impact on performance and loading times.
- Your Web site would benefit from offline support. Service Workers are a technology that enables you to cache assets on your device to load PWAs quickly and to decide what should be available offline.
- Push notifications can help you increase engagement. You can send notifications via a Web browser using PWAs.
- You can make a text file that creates a manifest file for your site. That's the last step to create a PWA. It takes just 30 minutes so why not?
- Early returns on PWAS are great: increases in conversion, mobile traffic, and faster performance. PWA stats keeps tracks of these increases.
- But iOS doesn't support PWAs. No, PWAs work fine on iOS. They just progressively make use of technologies as they are available. Organizations using PWAs are already seeing iOS increases.
- PWAs are often trojan horses for performance. They help enforce fast experiences.
How to Build PWAs?
- Early on Web sites attempted to copy native app conventions but now are developing their own look and feel. So what should we use for PWAs? Native app styles or Web styles?
- How much does your design match the platform? You can set up PWAs to use different system fonts for iOS and Android, should you? For now, we should define our own design and be consistent across different OSs.
- What impact does going "chrome-less" have on our PWAs? You loose back buttons, menu controls, system controls. Browsers provide us with a lot of useful features and adding them back is difficult. So in most cases, you should avoid going full screen.
- Should you app shell or not? The shell is the chrome around your content and can be loaded from the cache instantly. This makes the first loading experience feel a lot faster.
- What part of your site should be a PWA? In some cases it is obvious, like subdomains at Yahoo! In other cases, it is not so clear. You may want to make "tear away" parts of your site to exist as a PWAs.
- Really great PWAs will get some of these details right. For instance, cache for performance and offline fallback? Cache recently viewed content for offline use?
- AMP to PWA paths. If you are using Google's accelerated mobile pages, you may want a path from AMP pages to a more full-featured PWA.
- In the next version of Chrome, Google will make push notification dialogs blocking so people have to decide if they want notifications on or off. This requires you to ask for permissions at the right time.
- Building PWAs is a progressive process, it can be a series of incremental updates that all make sense on their own. As a result, you can have an iterative roadmap.