Progressive Web Apps The Superpowers of the Web and Native Apps Combined

Free e-book by Google & Awwards on PWAs:

We return to take a closer look at Progressive Web Apps (PWAs) and how they combine the reach of the web with the device integrations of installed software. In this ebook, Volume 2 in the series, you will learn:

  • The capabilities of Progressive Web Apps
  • Product strategies for deploying PWAs
  • Promotional patterns for driving installs of PWAs
  • UX best practices for designing installed experiences that work reliably offline
  • How to implement analytics to measure business impact.

Progressive Web Apps The Superpowers of the Web and Native Apps Combined →

Automatically create an APK from your Progressive Web App with PWA2APK

As mentioned in How to publish your PWA onto the Google Play Store it’s now possible to publish your PWA’s onto the Google Play Store.

Thanks to PWA2APK you no longer need to manually create your APK: “just” enter the URL of your PWA and an APK – which you’ll need to publish manually – will be created from it.

This is a tool that Google themselves should’ve created.

PWA2APK – Convert any PWA (Progressive web app) to Google Play Ready Apps →

How to publish your PWA onto the Google Play Store

Thanks to the Trusted Web Activity feature in Chrome 72 on Android, the Google Play Store is now open for Progressive Web Apps.

Chrome 72 for Android is now shipping from the Play Store to all users and this version included Trusted Web Activity (TWA), that in a nutshell is a way to open Chrome in standalone mode (without any toolbar or Chrome UI) within the scope of our own native Android package.

The easiest way to get your PWA published onto the Google Play Store is to clone the example repository and adjust the manifestPlaceholders settings in app/build.gradle.

Additionally you’ll also need to set up Digital Assets Links in /.well-known/assetlinks.json which is hosted on the website also hosting the PWA.

UPDATE 2019-02-12: Thanks to PWA2APK you can now automatically generate a .apk for you to upload to the Play Store.

Google Play Store now open for Progressive Web Apps 😱 →
SVGOMG / Trusted Web Activity Example (GitHub) →
Google Digital Assets Links →

How to display a “new version available” for a Progressive Web App

Dean Hume:

I’ve built a number of Progressive Web Apps that simply update the service worker silently for the user in the background, but I really like the approach where you get a popup notification that suggests that there is a new version of the site available like Google’s Inbox provides – especially for an offline first web app. […] It got me wondering how I could build something a little similar and it turns out that it is a little tricker than it seems – but it is not impossible!

How to display a “new version available” for a Progressive Web App →

Tame your Service Worker before your Progressive Web App go into the wild

Slidedeck by Maxim Salnikov:

With great power comes great responsibility – trivially, but true: I’ll show the examples of how easy the “Progressive” part of the PWA term could become “Regressive”, how to fix this, and how to test our Service Worker before deploying your app. First, we’ll go through the well-known PWA functionality (App Shell, Offline Cache, Push) with focusing on the pitfalls we could easily get into, and how to avoid these. Next, I’ll expand your horizons with the new PWA features, like Foreign fetch, Periodic sync, Navigation Preloads. And again – “handle with care”. I’ll share the points we have to pay attention to, as well as best practices.

Progressive Web Apps

pwa-general-0-@1x

Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment.

Fast loading, Push Notifications, Icon on the home screen, Full screen experiences, … the web truly has most of the things you need to build an app like experience.

Lately there’s been a lot of fuss however, due to Chrome not showing the “Add to home screen” banner for Progressive Web Apps that don’t hide the address bar (viz. display being set to standalone or fullscreen). URLs are a basic building block of the web, hiding them should be a choice of the developer, not a mandatory prerequisite. Be sure to read Jeremy’s notes on them.

Remy Sharp also has a writeup, State of the Gap, in which he goes from Phonegap to PWAs:

I strongly believe in the concepts behind progressive web apps and even though native hacks (Flash, PhoneGap, etc) will always be ahead, the web, always gets there. Now, today, is an incredibly exciting time to be build on the web

Getting started with Progressive Web Apps →
Google Developers: Your First Progressive Web App →