Progressive Web Apps @ Google I/O 2017
June 5, 2017
Author: Kamal Kamal Mohamed
Think about the problems you have with websites, especially mobile websites. They are often slow, need constant internet connection, and don’t “feel” as good as a native app. Well, this might soon change with the arrival of Progressive Web Apps (PWA).
If you haven’t heard of PWA yet, have a look at this page from the Google Developers website. A PWA is basically a next generation web app that allows for more engaging, native-like interactions on mobile and desktop.
Some of the features that make Progressive Web Apps much better than the web apps we know today include:
- Capacity for offline use
- Home screen launcher
- Full screen mode
- Push notifications
As a bonus, PWA are generally faster and consume less data compared to a standard web app.
But how do PWA perform compared to native mobile or desktop apps? With PWA, you can simply use a search engine, a URL, or an ad-link to get to the app, and start using it straight away. No app stores, no downloads, no installations. This is a huge improvement in discoverability. But probably the biggest advantage of Progressive Web Apps is that you have a single codebase to support ALL platforms.
Progressive Web Apps and Keynotes
Not much was said about Progressive Web Apps (PWA) in the opening keynote of this year’s Google I/O. However, looking at the schedule, there were a good number of sessions dedicated to the topic over the course of the three-day conference.
The same thing happened at the Microsoft BUILD 2017 conference a couple of weeks ago. There was almost no mention of PWA in the keynote, but the sessions revealed a number of interesting updates to the Windows Store and Edge browser to support PWA.
Progressive Web Apps will be listed in the Windows Store, just like Universal Windows Platform applications, and will be treated as first class citizens on Windows 10. Most of these updates should be released with the Fall Creators Update in September. You can find more details in this talk from BUILD 2017: Progressive Web Apps and the Windows ecosystem (Microsoft).
And let’s not forget about the Polymer Summit happened in October 2016 in London. The Summit was focused on Web Components, one of the pillars of Progressive Web Apps, and during the conference Polymer 2.0 was announced.
The biggest announcement from Google I/O in terms of PWA is probably the release of Polymer 2.0, originally announced at the Polymer Summit 2016.
Polymer is an open source library developed by Google to simplify the use of Web Components. The Polymer project also maintains a collection of components that can be used to develop PWA (Web Components.org).
Polymer 2.0 allows for faster and smaller web apps compared to Polymer 1.0. This new release also simplifies the use of Web Components, and is in line with the final Web Component specification (v1).
Note that Polymer 2.0 includes some breaking changes from Polymer 1.0, but the team behind the library has focused on making the transition as painless as possible. In fact, components provided by the Polymer team can run in hybrid mode, meaning that the same component can work with both Polymer 1.0 and 2.0.
More details about the new Polymer release in this Google I/O talk: Future, Faster: Unlock the Power of Web Components with Polymer (specifically at 15:00), or in this blog post from the Polymer team: It’s time for 2.0!.
Another exciting announcement from Google I/O relates to the improved support for Progressive Web Apps that is coming to Android. Here are the highlights:
- Developers now have full control of when to show the install prompt that allows users to add the app to the home screen;
- PWA are now displayed in the app launcher, not just on the device home screen;
- PWA now integrate into Android settings. Users will be able to see them in the list of installed apps and access app specific settings;
- PWA are now part of the Android intent system, meaning that other apps on the device can interact with them as if they were effectively installed. For example, deep linking to content within a Progressive Web App is now possible;
- PWA now appear in phone search results, just like native apps;
- Push notifications are now supported natively, instead of being delivered through Google Chrome;
- PWA can now launch in fullscreen mode for a more engaging experience (for an amazing example, see paperplanes.world); and
- New sharing APIs simplify the share action from within a PWA, with an experience that is very similar to that of native apps.
As you can see, Progressive Web Apps on Android are increasingly becoming more integrated in the OS. For some use cases, it’s soon going to make more sense to have a PWA instead of a native Android app.
You can find more details about what’s new in Android support for PWA in this talk from Google I/O 2017: The Mobile Web: State of the Union (starting 18:40).
Also worth a mention are two new tools aimed at simplifying the development of PWA:
- Lighthouse allows you to run an audit to determine PWA status, and is now integrated into Google Chrome DevTools. More info on the Google Developers website.
- Workbox simplifies usage of the Service Worker for offline app usage. More info on the Google Developers website.
Android and Chrome OS already have excellent support for Progressive Web Apps. Most browsers fully support PWA features or are adding support soon (with Safari on iOS being the major exception). And with Safari 10 now supporting web components, the trend is clear.
Progressive Web Apps are production ready. Twitter released Twitter Lite in April 2017. The Financial Times has dropped native apps entirely, and now has a PWA that works offline for all platforms. Expedia, Trivago, Forbes, all launched PWA recently. And if you need more examples, just have a look at PWA Rocks.
If you can’t wait to work with Progressive Web Apps, have a look at the demo project provided by the Polymer team here. It’s an exciting time to be a web developer. I might almost consider a career change…