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!
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 https://PWAbuilder.com. 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: https://youtu.be/_sLa0qhuqcA?t=32m38s
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: https://mobile.twitter.com/owencm/status/964280373697040384
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:
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:
And here on 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.
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.
How to get Google Maps Go on desktop
You can load the Google Maps PWA on desktop or phone using https://maps.google.com?force=pwa. 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!
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.
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.
The feature also works great on Android, where it does open in the installed PWA.
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.
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 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.
Looking around https://crbug.com 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!
Update: On by default in the Canary channel
[April 9th] According to Googler and friend François Beaufort, desktop PWAs have been turned on by default in the Chrome OS Canary channel and are thus expected to make it to the stable channel soon! That is some great news — just in time for Google I/O!
