Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Progressive Web Apps on Desktop

Desktop progressive web apps can be 'installed' on the user's device much like native apps. They're fast. Feel integrated because they launched in the same way as other apps, and run in an app window, without an address bar or tabs. They're reliable because service workers can cache all of the assets they need to run. And they create an engaging experience for users.

Why build Desktop Progressive Web Apps?

Device usage by time

Mobile has driven a lot of the evolution of Progressive Web Apps. But while the growth of mobile has been so strong, desktop usage is still growing. Mobile phone use peaks in the morning and evening, and tablet also has significantly higher use in the evening. Desktop usage is more evenly distributed throughout the day than mobile usage. It has significant use during the day when most people are at work and at their desks.

Spotify's desktop progressive web app

Desktop Progressive Web Apps run in their own window. Having that installed, native feel, is important to users. Desktop Progressive Web Apps are launched from the same place as other desktop apps, and they run in an app window, without tabs or an address bar. They look and feel like other apps on the desktop.

Desktop Progressive Web Apps are fast and reliable. By using a service worker to pre-cache content, your PWA will start consistently fast because it eliminates any network bottlenecks. Even a user with a high speed connection will appreciate how fast a PWA consistently starts.

For apps that require a network connection, a service worker is still valuable. They give you complete control over the online and offline experience. For example, if the users is offline, you could show cached data, or provide your own custom offline page.

Getting started

Getting started isn't any different than what you're already doing for existing progressive web apps; it's not like this is a whole new class of apps. All of the work you've done already still applies. Service workers make it works fast, and reliable; Web Push and Notifications keep users updated, and it can be ‘installed’ with the add to home screen prompt. The only real difference is that instead of running in a browser tab, it's running in an app window.

Design considerations

There are some unique considerations you need to take into account when building Desktop Progressive Web Apps, things that don’t necessarily apply to Progressive Web Apps on mobile devices.

The app window

With an app window, there are no tabs or address bar, it’s just your app. It’s optimized to support the needs of apps, with more flexible window organization and manipulation compared to browser tabs. App windows make it easy to uni- task with the window in full screen, or multi-task with multiple windows open. App windows also make it really easy to switch between apps using an app switcher or a keyboard shortcut such as alt-tab.

App window components on Chrome OS

As you’d expect, the app window has the standard title bar icons to minimize, maximize and close the window. The title bar is also themed based on the theme_color defined in the web app manifest. And your app should be designed to take up the full width of the window.

App menu

Within the app window, there’s also the app menu (the button with the three dots), that gives you access to information about the app, makes it easy to access the URL, print the page, change the page zoom, or open the app in your browser.

Use responsive design

Full screen app window

Apps on the desktop have access to significantly larger screen real-estate. Don’t just pad your content with extra margin, but use that additional space by creating new breakpoints for wider screens. Some applications really benefit from that wider view.

When thinking about your break-points, think about how users will use your app and how they may resize it. In a weather app, a large window might show a 7 day forecast, then, as the window gets smaller, instead of shrinking everything down, it might show a 5 day forecast. As it continues to get smaller, content might shuffle around, and it's been optimized for the smaller display.

7 day forecast in menu 5 day forecast in menu

Full screen app window

For some apps, a mini-mode might be really helpful. This weather app shows only the current conditions. A music player might only show me the current song and the buttons to change to the next song.

You can take this idea of responsive design to the next level to support convertibles like the Pixelbook or the Surface. When switched to tablet mode, these devices make the active window full screen, and depending on how the user holds the device, may be either landscape or portrait.

Focus on getting responsive design right - and that’s what matters here. Whether the user has resized the window, or the device has done so because it's switched to tablet mode, responsive design is critical to a successful desktop progressive web app.

The app window on desktop opens up so many new possibilities. Work with your designer and take a responsive approach that adds new breakpoints for larger screens, supports landscape or portrait views, works when fullscreen - or not, and works nicely with virtual keyboards.

Prompting the user to install

Installing a desktop progressive web app, known as Add to Homescreen on mobile, works the same.

Spotify's Add to Home Screen button

If Chrome's PWA install criteria are met, Chrome will fire a beforeinstallprompt event that you can use to prompt the user to installed your PWA. In the event handler, save the event, and update your user interface to indicate to the user that they can add your app to the home screen. For example, Spotify's desktop Progressive Web App, adds an 'Install App' button, just above the users profile name.

See Add to Home Screen for more information about how to handle the event, update the UI and show the install prompt.

What's next?

In addition to supporting additional platforms, we're also looking at:

  • Omnibox badging - An icon in the address bar to let users know that your PWA can be installed.
  • 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.

Learn more

Check the 2018 Google I/O talk, PWAs: building bridges to mobile, desktop, and native, it covers everything from Desktop PWAs to, upcoming changes to add to home screen prompts, and more.

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.