Goodbye Electron, Hello Desktop PWAs
Okay maybe I am jumping the gun on this but this is some exciting news to say the least!
Chrome v70’s recent announcement
A recent Chrome version(v70) has released some exciting support for Desktop Progressive Web Applications on Linux and Windows. Here is Chrome’s current support list.
One thing you will immediately notice is that MacOS is missing from the list. Fear not it should be here for Chrome v72.
It is important to note that although it is not available on MacOS by default, it is available through Chrome’s feature flags. To enable these flags, simply open Chrome and head to chrome://flags or to just scope to Desktop PWAs flag, chrome://flags/#enable-desktop-pwas. Be sure to reload Chrome after enabling any feature flags.
What are Progressive Web Applications?
Although we will not cover PWAs in depth I recommend you read up on Google’s Documentation to provide an awesome intro. To see some rich examples and get your hands on what it feels like to use a PWA, hop on Chrome on Android, or Safari on iOS(Partial Support) and check out these examples. I recommend watching the Chrome announcement below.
What is Electron?
Electron is a platform that allows developers to build Cross-Platform desktop applications using Javascript, HTML, and CSS. This lowers the bar for Web Application developers to easily create Desktop alternatives as well as leverage some of the great Javascript libraries and frameworks. Electron based applications have taken Desktop Applications by storm in recent years. Programs such as Slack, VSCode, Atom, and Discord have invested heavily into Electron development. If you have not already used any of these services, definitely check them out. Desktop applications used to feel clunky and UI components always seemed outdated. Electron has definitely brought some sexiness to the desktop game!
Why Desktop Progressive Web Applications?
Although Electron applications are growing and their implementation is close to that of a web application, they still come with some downsides. First, Electron applications ship with their own binary of Chromium. Most of us know how much RAM is required to run Chrome, now take that number and times it by every Electron application a user has running. If you are curious, open multiple Electron applications on your machine and check out your Activity Monitor to see this RAM hoarding in action! Abundant use of RAM is not only inefficient, but many Electron applications require additional Electron specific code interfaces with NodeJS and is not necessarily the same as it’s corresponding web application. Electron also requires additional complexity by having to manage support for older versions and software update pipelines.
[Desktop PWAs enter]. Imagine a world where you could leverage the look and feel of an Electron Application, without requiring lengthy installs, software updates, all while shipping a single web application. Chrome seems to be setting the standard for this behavior in Desktop PWAs. When you visit a webpage in Chrome and the application meets all the criteria, the developer has the ability to prompt the user to install the application on their desktop. The prompt looks something like this:
This prompt can be shown at the developers discretion only after the window event ‘beforeinstallprompt’ is fired by the browser. Once installed, this application will usually become an application icon on users desktop.
Upon launch of this newly installed application, you get a new minimal browser window that looks and feels like a real desktop application.
My Playground Example
The snapshots above are a simple proof of concept I have put together to show you how you can get started with Desktop PWAs. To install it, be sure you enabled the desktop PWA feature flag and you are active on my site for at least 30 seconds. It is important to note that there are multiple requirements when testing Desktop PWAs. If you would like to pull down my repository, please follow the Desktop PWA checklist but here is a quick summary:
- Must be served over HTTPS
- Must have an installed Service Worker with at least one fetch handler
- Must serve a valid manifest.json
- Pages must be responsive
Additional Examples
If you are currently on MacOS, many applications are not assuming you have the Desktop PWA feature flag enabled and thus do not prompt you to install. With some correct flag enabling in Chrome, and savvy coding in Chrome Devtools Console, you can take existing PWAs and have them prompt to install. Here are some existing PWAs I have been able to install on my desktop.
Starbucks
Starbucks have invested heavily in creating a great PWA. Although not something I frequent, the Desktop installed version is really impressive.
Google Maps
This app is really cool. Very lightweight and gets the job done. Responsive and quick. The trick to getting Google maps is to force load the Mobile site.
Twitter has really been setting great baselines for the Twitter PWA on mobile, the installed desktop version is a great compliment to their implementation.
Future Development
With all the buzz around Desktop PWAs, it is wise to understand the standards are still in their infancy. Recently the Chromium team has made commitments to bringing native API’s such as writeable file API, Wake Lock, Async Cookies, etc. Developments and changes are being made including things such as:
Deep Linking: Opening links in Chrome to trigger the installed application instead of in Chrome.
Icon badging: Similar to a mobile application notification badging over the application icon.
Keyboard Shortcuts: Ability to listen to use native keyboard shortcuts inside the installed application.
Once maturation, I see many of today’s Electron applications finding a serious competitor with Desktop PWAs.
