Progressive web apps

Progressive web app development: what can I do? what can I use?

From a user perspective, one of the benefits of progressive webs apps is that they can be truly multi platform, specially if the developing team behind them has taken extra care to make them truly progressive. That means, of course, adapting them to exploit each browser and each platform capabilities, while fail gracefully in those ecosystems that are less able to provide the user the most advanced features.

What Web Can Do Today is a great resource to learn what you can rely on while developing an app that will run on a browser. Surprising things like bluetooth, geolocation, speech recognition and even local notifications and push messages work well in a lot of major and modern browsers. When a features comes with some limitation in an specific major browser, What Web Can Do Today has a useful section that provides further information.

There are also example codes and live demos available for the busy developer, as well as a list of resources such as links to MDN tutorials and references to the specification will all kind of technical details about the feature.

In addition to What Web Can Do Today there is the well known site Can I use. This super useful site provides information about the level of support that all browsers have of each web technology. The site compiles information about a huge list of versions of Internet Explorer, Microsoft Edge, Mozilla Firefox, Google Chrome, Apple Safari, Android Browser, Blackberry Browser, Samsung Internet, Baidu Browser, QQ Browser and so on, as well as the mobile equivalents of all major browsers.

It also provides usage data for you to know if it is worth it to adapt a feature for an specific bunch of browsers, and that data can be accessed on a global level or on a per country level.

This tool comes in handy for instance to check to what extent you can use ServiceWorkers, a basic part of a progressive web app, in Edge, IE or Safari Technology Preview (spoiler: it won’t work. Yet.)

Now that you have all the resources you need to start building your progressive web app, check some real word examples at: Learning from others: how Telegram, FT, RioRun and Barcelona City Council PWA are built.

Learning from others: how Telegram, FT, RioRun and Barcelona City Council PWA are built

Running shoes. Photo by Josiah Mackenzie

One of the most successful ways of unraveling the mysteries of a new technology is keeping an eye on how others are using this new technology, what are they achieving and how they are building things.

So let’s take a look at four progressive web apps published by four big brands: Telegram, the Financial Times, The Guardian and the Barcelona City Council.

Did you know that Telegram also comes as a progressive web app? It’s an open source one, GNU GPL licensed. And its code repository is available in GitHub. So you can read a detailed description on the underlying tech, inspect all pull requests by developers, browse every single change made to the source code since its first version and even read the entire source code of the current version.

We don’t have so much information published about another well known progressive web app: the one that Financial Times published for their subscribers to read the news in their mobile devices. But still we can learn something from their experience, because Matt Andrews, their lead engineer, wrote a tutorial on the basics of their app back in 2012! He also wrote some very instructive notes as a companion for a workshop on offline first websites he did in 2014 at the SmashingConf in Freiburg, at Imperial College in London and internally for the Financial Times. They include a chapter on the Financial Times app.

Another useful post is the one by Rich Harris, from The Guardian’s interactive team, published in 2016. It’s titled “How we made the RioRun progressive web app” and includes commentary on difficulties the team encountered while developing this progressive web app for runners and sport lovers that makes extensive use of the GPS and the offline capabilities of modern browsers.

The last one app in this review is Points of Interest of Barcelona, an app we did here in Metodian, the team that authors progressivewebapps.net, for the Barcelona City Council. We published a series of slides made for a talk we performed at the 2017 edition of Mobile World Congress in Barcelona. We hope you like it. Enjoy!