Google Chrome Desktop Progressive Web App Add to Homescreen Capabilities

chrome-desktop-pwa-hero
Chrome Releases Desktop PWAs

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.

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.

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, these capabilities are more limited. Hopefully in the next year Windows will have something similar to WebAPK with a WebAPPX option for browsers to leverage.

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.

install-desktop-pwa-chrome-prompt
Chrome Desktop PWA Prompt

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.

Install PWA from Chrome Settings Menu
Install PWA from Chrome Settings Menu

Once the application is installed it is availble 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.

Desktop PWA Start Menu Right Click Options
Desktop PWA Start Menu Right Click Options

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.

Recently Added Desktop PWA
Recently Added Desktop PWA

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.

Chrome Desktop PWA Pin To Taskbar
Chrome Desktop PWA Pin To Taskbar

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.

Chrome Desktop PWAs on App Mgt Panel
Desktop PWAs on App Mgt Panel

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.

Desktop PWA Menu
Desktop PWA Menu

You should also design your application to fill the entire application window. I think it goes without saying you need to utilize responsive deisgn 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 thant 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 thesee will be possible once WebAPPX is available on Windows.

Summary

Desktop progressive web apps are a step in the right direction. They have been possible for a while now if you enabled the flags. I think Google was holding out hope Microsoft would release a viable WebAPPX solution by now. But since it has not materialized they have made the current desktop PWA solution live for everyone.

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.

I hope this step puts more pressure on Microsoft to release a viable WebAPPX solution to mimic the Android WebAPK. I also see this putting even momre pressure on Apple to provide more streamlined PWA support for both iOS and MacOS.

By the end of the year Chrome desktop PWAs will be available on MacOS as well. Maybe they will be able to implement more features than they could on Windows!

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.

Share This Article With Your Friends!

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel