Progressive Web Apps coming to all Chrome platforms

Since I have posted a few screenshots on my Twitter account, people have asked me to share a bit more about PWAs and desktop support.

Most have probably heard that Microsoft have been working on adding PWAs to the Windows Store, which is really big news!

Progressive Web Apps are coming to Windows 10 soon… we are all ready! Drawing by ashleymcnamara

As a co-editor of the Web App Manifest spec, I have been involved with that on the spec side. Actually, Microsoft was one of the first companies to pay attention to the Web App Manifest, first via their ManifoldJS tool, which later turned into Since, the first release of ManifoldJS, Marcos Caceres and I reached out to the team and got to know Jeff Burtoft. I am very happy that we did so, because that resulted in a collaboration with Microsoft were we ended up improving the manifest so that it works better for stores and desktop apps.

Google added some experimental "add to shelf" support to Chrome OS some years ago, but it looked quite half baked and nothing happened for a long time. For this reason, I was super excited when Owen Campbell-Moore did a "one more thing" kind of announcement during his talk at Chrome Dev Summit 2017 in San Francisco:

Owen announced that Google finally were seriously looking into how to bring Progressive Web Apps to desktop systems on all their platforms. Furthermore, they would not just be adding desktop support, but also be looking into missing APIs. Lots of companies (think Slack or VSCode) use Electron today in order to wrap their web apps into a native container, as well as expose additional native APIs.

There is a big problem with that approach though, because people constantly find security bugs in browsers and most of these become public, shortly after the browser vendors have fixed them, but the Electron runtime people distribute is often old and updated infrequently — resulting in a big security risk for the users. Desktop PWA support would fix this, but only if developers have access to the APIs they need to build their experiences.

According to Owen Campbell-Moore's Twitter feed, one of the first APIs Google is looking into adding is the Contacts API:

How to try it today?

If you go to "about:flags" in a recent version of Chrome (such as Canary) you can search for "progressive" and turn on the flag #enable-desktop-pwas:

about:flags or chrome://flags leads to the hidden place where you can turn on and off experimental features

Doing that, and you should be able to install progressive web apps on your desktop system. Look for "Add to shelf" in the menu, if the prompt doesn't automatically appear.

Here is how it looks on Windows:

Twitter Lite on Windows

And here on Linux:

Pokedex on Ubuntu Linux

PWAs on Chrome OS

The implementation is a bit further along on Chrome OS, and it is really cool!

The window title header uses the theme color and the title is followed by the domain name of the PWA. and
Chrome OS really feels like a real desktop OS with windowed progressive web apps!

Apps also have easy access to opening in Chrome and to sharing the URL. There is even a special about box (app info) for each app:

App info allows you to configure how the app should open, like if you rather want it opening as another tab than a separate window. It has also info about the app from the "description" field in the Web App Manifest, originally added for Microsoft's Store support.

You can decide how you want the app to open!

How to get Google Maps Go on desktop

You can load the Google Maps PWA on desktop or phone using Unfortunately, that only installs a Service Worker when opened up in a mobile view, but you can trick it into believing that it is opened on a mobile, on a desktop system using Chrome DevTools and then add from there :-) Then everything will work flawlessly!

Just trick the PWA into thinking it is on mobile. Remember to reload once to install the service worker.

What is next?

2018 is going to be a great year for progressive web apps, and desktop support is going to make a bit difference across the board.

We even have Apple adding support for Service Workers and Web App Manifest to iOS, so a lot of things are happening on the web!

All I can say, is that I am super excited and have been caught dancing once in a while after reading news on the subject on Twitter! Please help me keep dancing! 😊

Update: Split screen

There has been a few news post the last couple of days, talking about Chrome OS getting split screen support for Android apps. Of course, as this already works for Chrome windows, this also works great for PWAs as you can see below!

Update: Web Share Target

A while ago we got Web Share (navigator.share) on Android, and if you have Experimental Web Platform Features enabled in about:flags, you even got Web Share Targets for installed PWAs, like Twitter Lite.

Using Justin Willis new Stencil demo you can now share songs via Web Share

Now with that flag enabled, this works on at least Linux and Chrome OS, but unfortunately, when sharing to Twitter Lite, it opens it in a separate Chrome tab instead of the installed PWA — something that will surely be fixed with time.

As Twitter Lite is installed and supports Web Share Target, the song can be shared to it!

The feature also works great on Android, where it does open in the installed PWA.

Android: Sharing a song from one PWA to the other, from InstaMusic to Twitter Lite

Update: A few changes

[March 15th] So since the initial article there has been a few user experience changes. The about box is gone, which is a big sad as the description is not available anymore.

Extensions are now shown for the PWAs
The about info is no longer a dialog and so the app "description" is no longer available

Luckily you can still change whether the app should launch in a new window (default) or in a new tab by right clicking on the icon.

You can right click and remove Open as window, if you want the PWA to open in a tab instead

You can also add non-PWAs shortcuts to the launcher who open in a tab by default, but you can change it to open in a window if you want! As they are not real PWAs, a kind of address bar is still shown.

Non-PWAs can also be opened in a window, showing an non-editable address bar with the site URL

Looking around searching for "desktop-pwas" and similar, I found out that the ambient badging might actually be happening!

There is now a mockup of how this may look!

PWAs might soon show an "ambient badge" (here a plus in a circle) that allows you to manually install the app