Progressive Web Apps Dev Summit

This week I had the pleasure of attending the Progressive Web Apps Dev Summit, an event organised by Google in the beautiful city of Amsterdam. These are my takeaways from the event.

The screen was immense

Progressive Web Apps: what and why?

What an ‘app’ is, depends on who you ask. When we are talking about apps on mobile devices, they are usually things with specific capabilities. They help users do things, integrate well with device capabilities, can be opened from a home screen and are able to work full screen and offline. At the moment, apps with all those capabilities are usually not mobile websites, but app store apps.

From a technical perspective, there are only a couple of things that separate mobile websites from app store apps. But in terms of user experience, these differences are enough for people to prefer app store apps to web apps.

To solve this UX gap between native and web, Google came up with the concept of Progressive Web Apps. It’s a set of open web standards that lets developers turn their ‘website’ into a ’web app’, in a progressive manner.

What’s a progressive manner? If your site already functions as a website, by adding stuff to it, it can become more app-like. Browsers that don’t support this ‘stuff’ will get what they already got before. Supporting browsers, however, will get the benefits. As an extra. The idea is that over time, more browsers will fall in the supporting browsers bracket. It is a bit like using rounded corners in CSS, knowing that some browsers will take advantage of it, others will ignore it. Users will likely not notice they are missing out, but will get a better experience if they aren’t.

With progressive web apps, we can ‘earn our space on the home screen’ (Alex Russell), ‘stop blaming being offline on the user’ (Jake Archibald) and ‘give the user a page they can interact with faster‘ (Surma). Whereas native apps are things you go out, buy and download, PWAs are basically an up-sell: you download them by visiting the page, and keep them if you like to.

The summit

Google have been great hosts! They drove us to the venue with a shuttle bus, let us in for free, provided lots of fancy food and drinks throughout the two days and used exciting intro tunes between speakers, who presented on a huge wall-to-wall screen. They really are serious about saving the web in its fight against native apps.

It wasn’t just a Google party though. Google sent lots of their developer relations people, but so did others: there were people from all major browser vendors (except Apple) and they even did talks. There were also folks from businesses that built PWAs, such as the Nigerian online marketplace Konga and the Amsterdam-based Booking.com. This made the whole event much more like an open web standards event than a Google marketing event.

New technologies

Progressive Web Apps is not one technology. It is one name for a set of technologies that you can use to progressively expose app-like qualities to go with your regular website. A marketing term, if you will. There were talks about most of the different technologies.

• Service Workers give developers control over the network, by exposing the decision process for network activity to JavaScript. What they effectively do, is to enable reliable performance: apps can now deal with Lie-Fi or offline connections by serving alternatives (for instance, a cached site). Service Workers can make your site work offline first, as you get to decide how the network requests from your app are handled.
• The streams and fetch APIs can be used from Service Workers, a good intro to them is Jake Archibald’s blog post or his talk at the dev summit.
• In the majority of supporting browsers, HTTPS is an important part of progressive web apps, as a lot of the tech (geolocation, getUserMedia, HTTP/2, push notifications) requires it to work. Emily Schechter explained HTTPS brings three security properties: identity (be sure this site really is this site), confidentiality (be sure about who can read your data) and integrity (be sure that nothing can modify your data). HTTPS used to be hard to set up, expensive and slow. It’s now easy to implement, cheap and fast, Emily showed.
• Push Notifications can provide great benefits for users if applied properly. Owen Campbell-Moore discussed do’s and don’ts: good notifications are timely, relevant and precise. He also discussed the flow of asking users for permission to send notifications. It is important to do this at a good time.
• By having a manifest file and matching some other criteria, you can now make your app quality for Add to homescreen notifications. What the heuristics are differs per browser / platform. Interestingly, if a user sees ‘Add to homescreen’, they have already downloaded the site. So, as Alex Russell pointed out, the question really means: ‘would you like to keep it?’

Making it better for users

Progressive Web Apps seem to be about making it better for the users, and many of the talks discussed how to do that.

• UI performance is important, Paul Lewis talked about using things like will-change and debugging by knowing when your code triggers repaints.
• Surma talked about improving network performance by using Service Worker and HTTP/2.
• Accessibility is an essential part of delivering a good user experience, as well. Rob Dodson discussed three steps to ensure accessibility: nail the WebAIM WCAG checklist, always be managing focus and provide proper semantics (either with meaningful native elements, or with ARIA). Look at WAI-ARIA best practices.
• Daniel Appelquist shared an interesting principle about URLs, “the one web principle”: “content provided by accessing a URI yields a thematically coherent experience when accessed from different devices”. It’s useful for all (not the least users) to let a URL always present the same thing, regardless of which device it is accessed from. See also: responsive web design.

Other browser vendors

The event did not just feature speakers from Google, other browser vendors were invited to the stage as well.

• Ben Kelly from Mozilla talked about how they joined the Service Worker effort in 2014, and focused on parts like security, improving the spec, documenting PWA technologies on the Mozilla Developer Network and making the Service Worker Cookbook.
• Patrick Kettner shared Microsoft’s perspective. They, too, are very excited about Progressive Web Apps. He also showed how to make a fallback using AppCache (‘it is a douchebag, but it can be a useful fallback’) and talked about IndexedDB and Dexie.js.
• Opera’s Andreas Bovens showed that Opera already support lots of PWA features and will support more in the near future. He also talked about UX patterns that relate to Progressive Web Apps, considerations to make, and choices to give to (or hide from) users.
• Junkee Song and Daniel Appelquist from Samsung Internet, who make the default browser on Samsung devices (almost 10% market share in Europe) and are a major committer into the Chromium project. They also work on browser experiences for GearVR, Samsung’s virtual reality goggles and try to provide a ‘continuous browsing experience’ between phone and VR.

Examples in the wild

Throughout the two days, we saw some presentations by people who have actually released progressive web apps ‘in the wild’. It was inspiring to see how they made those apps work for their organisation. PWA tech gives developers tools to do stuff, but it will not make your decisions for you (that’s a good thing).

• Jesse Yang showed how Booking.com made their confirmation page work offline. They did not tell users, giving the team opportunity to play with it without a lot of risk. They also experimented with ‘Add to homescreen’ and found most people ignored it.
• Andreas Bovens mentioned pwa.rocks, a site by Opera that tries to list interesting Progressive Web Apps (pull requests welcome).
• The Washington Post made a PWA that downloads lots of text to the user’s cache , to make that available offline, and downloads images later.
• The team at Konga, Nigeria’s largest online market place, recently built a PWA using custom web components. They use background sync for analytics, tracking offline events and an offline checkout experience. Major obstacles are making things modular, getting Safari support and the learning curve for new developers.

Concerns

This whole post may sound like everything is peachy, but there are also concerns about Progressive Web Apps.

iOS support is a concern. Apple were invited to the event, but other than Microsoft, Opera, Mozilla and Samsung, they did not attend (because of other commitments, and they really want to attend future events). Their absence was noticeable: they are a large player and we all would have liked to know what they think about these new standards.

And what about the URL? They are an integral part of the web, as it is what people use to point to stuff and share things. However, for apps to get a ‘Add to homescreen’ prompt on Chrome and others, the ‘hide URL bar’ setting is compulsory. In apps that run full screen, URLs cannot be copied. Opera Mobile are experimenting with a gesture that lets you ‘pop out’ of an app, back to the browser, so that users can see, copy and hack URLs. Great idea, I think!

Another matter is the risk of heavy reliance on complex JavaScript. Admittedly, complex JavaScript is not compulsory for something to be a Progressive Web App, but it is what all of the apps demonstrated at the summit were using as their tool of choice. I’m not sure if this concern is a concern with PWAs, or with the let’s-do-it-all-with-JavaScript trend. Service Workers can be added to super simple websites like this blog, too (why not?).

The event was actually great at addressing many of these concerns, and culminated in a panel session moderated by Jeremy Keith (who published the brilliant Regressive Web Apps) .

Panel discussion moderated by Jeremy Keith

The future

Two things are important about PWAs: firstly, they are a set of open web standards, which means all browsers can implement them in somewhat the same way and developers can be fairly sure things will work inter-operably. Secondly, browser vendors seem to be very excited about adding support for these standards, which increases their chance of being a safe bet.

It was exciting to hear about the technologies, and to see that a lot of them already work on a great deal of platforms. Most of the major browser vendors expressed how much they liked the idea, so it is realistic to say support will increase in the short term. This, and the fact that all PWA techniques can be regarded as a ‘progressive enhancement’ (with some leniency as to what that term means), entails that we can build Progressive Web Apps today.

Hopefully, we will do so responsibly. Native apps really only work on their particular platforms. PWAs, in theory, can be built to work universally. For everyone with a web enabled device. This is awesome! Major browser vendors are behind the idea, and I think as developers we should be, too.

To keep this post somewhat concise, I did not do each talk right here. If you’ve had to miss the event, it was recorded and videos are available on YouTube.