Desktop Progressive Web Apps (PWA) - How they Work and Advantages over Native Apps
Last Updated -
Chrome 70 was released in mid October 2018 and added several new features including native support for the Web Authentication API, better security features and what I have been waiting for, desktop Progressive Web App (PWA) support.
As of Chrome 73 desktop progressive web applications are supported on Windows, MacOS, Linux and ChromeOS.
The formal install or add to desktop experience is available in both Chrome and Edge. For other browsers it is available, just not as 'native'.
Even though consumers have migrated to more mobile-first and mobile only, business still operates by an large on the desktop. Having a solid install or add to desktop story Progressive Web Applications become more appealing to business and enterprise for their internal applications.
If you are not familiar with what PWAs are they are websites that leverage modern capabilities and best practices to deliver an app-like user experience without losing the advantages offered by the web. In short they are super hero websites.
This makes them desired by both business and consumers. Businesses can now offer more native application functionality and experiences, like rich offline support that engages users. Consumers benefit because properly built progressive web applications offer a superior user experience.
A common misconception is progressive web applications are a mobile only thing. This is not the case. If you have a modern website it should rely on responsive design and of course make the site easy to use on mobile, but also any other screen.
Desktop PWAs are particularly interesting because they tend to target business applications. This is why having an install or add to desktop story is important, it helps expand the application of PWAs more to the business world.
Part of the PWA experience is being prompted to install the application. On Android Chrome has been the leader in this space by automatically prompting users to install PWAs. When this happens Chrome creates a WebAPK so the web application is elevated above a glorified bookmark. It gains standard application management capabilities.
It does this by creating a WebAPK, which makes it an Android application, sort of like a hybrid app created with Cordova, but without access to Android platform specific APIs. The main gains are presence on the homescreen, app shelf and management via the Android application settings UI.
Google tried to implement as much of the Android experience as they could on the desktop.
For now you get a super shortcut that launches the installed desktop PWA in a stand alone window featuring the PWAs theme color in the application title bar and some other creature comforts.
Desktop PWAs should appeal to businesses and enterprises for their day to day web software. Now they can make them feel more like a native Windows application and open them without the browser address bar.
For online marketers it is another channel they can leverage to engage customers as they can be prompted to add the web app to Windows as an application.
How Chrome Desktop Progressive Web Apps Work
Just like Chrome on Android, now if your PWA meets the current Chrome requirements the 'beforeinstallprompt' event will fire. From here you can use the prompt event object to control the user being prompted to 'install' your PWA.
You could also direct users to the Chrome 'settings' menu, the three vertical dots in the top right corner. From there they will see a menu option to install your progressive web app.
Once the application is installed it is available from the standard Windows application launch points, the start menu and desktop. The user can manage the application from these icons and even pin it to the taskbar.
What you currently do not have the ability to do is drive a live tile experience. You are limited to a static icon. Even when you add the installed PWA to the start menu you will not see the application's icon. Instead it uses the Chrome icon.
That's because to Windows you are launching Chrome, not a true instance of your application.
On Android you do get standard application experiences for progressive web apps. That's because Chrome creates a WebAPK, which is a modified version of an APK package used for native Android applications.
Chrome Desktop PWAs are still glorified web bookmarks, not a 'webAPPX' package. On Windows APPX files are similar to Android APK, they are application packages you install from the Windows Store.
Once the concept of a webAPPX is available I expect both Chrome and Edge to ship support, but till that glorious day we have a super bookmark experience.
Because the desktop PWA is in the Start Menu, you can interact with it like other Windows applications. This means you can right click the start menu icon and run as administrator, pin to the taskbar, open the PWA's location on your system.
Don't get fooled by the 'uninstall' option, this will open the system control panel where you can uninstall applications. You will not find your PWAs listed there. Hopefully that will be added once we get a 'WebAPPX' experience.
You can also close and pin to the taskbar from the taskbar icon while the application is running.
If you open Chrome's App managment panel chrome://apps/ you can manage the installed progressive web apps along with any Chrome app you may have installed. From the application's setting page the user can control permissions and settings for the application.
If your application is launched as a desktop application there is no address bar. So if your application relies on the ability to save or share urls you might want to add a visible way for users to perform these tasks. This is one of those things I consider on an application by application basis as the type of UI for this can vary from e-commerce, blogs, line of business, etc.
There is an app menu available to all desktop PWAs. From here the user can access the URL, print, etc. You will also notice the icons of active Chrome extensions. Remember this is an instance of Chrome, just without the address and status bar decorations, so your extensions are still live.
You should also design your application to fill the entire application window. I think it goes without saying you need to utilize responsive design with CSS media queries. But do not limit your application's ability to leverage the entire screen.
I hate to say it, but when a web site limits itself to say 960 pixels wide it looks like crap on my desktop, which is more than twice that wide. Use the pixels to make a great/better user experience.
The Chrome team has listed a few features they hope to make available soon:
- Keyboard shortcuts - Adding support for keyboard shortcuts, so you can provide your own functionality.
- Badging for the launch icon Let the user know about important events that you don’t want to display a full notification for.
- Link capturing - Opening the installed PWA when the user clicks on a link handled by that app.
I suspect these will be possible once WebAPPX is available on Windows.
Battling With Electron
Another option this will compete against is Electron.
If you are not familiar with Electron, it is a cross-platform desktop application platform. Its a way to create a traditional desktop application using web technology. It is built on top of the Chromium project, but is more of a headless browser environment.
There are many examples of Electron applications, like the most popular coding IDE today, Visual Studio Code.
A key advantage Electron provides is local disk access. The web is just now getting access to the device file system.
There are several efforts to see how porting an electron application to a progressive web application needs to happen. I know I have seen a PWA version of Visual Studio code.
Being able to install a PWA on the desktop helps level the field between to two options.
I doubt this will end the reliance on Electron, but I hope many Electron projects will make the switch. An important disadvantage of Electron apps is not running on the latest, most secure version of Chromium. It tends to use a version that is 6 months or more behind the latest Chromium release, leaving it vulnerable to any unpatched security holes.
Summary
Desktop progressive web apps are a step in the right direction.
Don't get me wrong, this is better than just a glorified bookmark and a good step forward. By making PWAs more apparent on the desktop this will make them even more mainstream.
For online marketers this is a great step forward because now site visitors can be prompted to install the site, which should create a more engaged customer.
Businesses will also benefit because now their line of business applications running in the browser can run more like a native application.
