web

Desktop Progressive Web Apps

Desktop Progressive Web Apps⁠⁠ (PWAs) are a great cross-platform, cross-browser way to build apps with a security model that centers user safety and privacy and get built-in sharing with the web’s inherent linkability. Build new or enhance your existing web app with modern APIs to give them desktop-app like capabilities, reliability, and installability. PWAs are the best way to deliver your web app for ChromeOS.

On ChromeOS, the power of the web platform is front and center; web apps are a core platform feature. Installed PWAs show up in the ChromeOS launcher, can be pinned to the shelf, and integrate deeply with the rest of the OS.

Get started by reviewing the PWA Checklist⁠⁠ and making sure your web app passes the core PWA checklist. You can use PWABuilder⁠⁠ to help you provide a custom offline page and make your app installable. Then, use these recommendations to make your PWA shine on ChromeOS.

Make it installable

One of the great advantages of PWAs over regular web apps is the ability for them to be installed, just like traditional desktop apps. The Progressive Web App path on web.dev has a section dedicated to making your PWA installable⁠⁠; use that to get started. In order for a PWA to be identified as installable on ChromeOS, the following criteria must be met, which can be checked using Lighthouse’s installable audit⁠⁠:

Icons are an important part of your PWA’s identity, so make sure they are interesting and unique; they can even include transparency! As PWAs have one codebase that’s shared across all platforms, you should ensure you have a maskable icon⁠⁠ available. Ensure you also include normal icons, too, for operating systems that don’t support maskable icons.

With your PWA installable, it’ll now show up across ChromeOS, from the launcher to the shelf. Having your PWA installed also opens up some additional capabilities to make your app really shine.

A note on working offline

There are plenty of discoverability, usability, and capability advantages simply by making your app installable. Making your PWA installable does not mean your whole experience must work offline. In order for an installed web app to feel like a traditional app, though, it should have some form of offline functionality. A basic custom offline page is enough to get started; users expect that installed apps don’t crash when connection status changes. Just as a traditional app never shows a blank page when it is offline, PWAs should never show the browser default offline page. Custom offline pages can range from a message letting the user know they need a connection to a game to let them pass the time until they’re connected again. Providing this custom offline experience for uncached pages or features that require a connection helps to bridge the user experience app gap.

You can create a simple offline page during a service worker’s install event by precaching the desired page for later use and responding with it if a user is offline. You can follow our custom offline page sample⁠⁠ to see an example of this in action and learn how to implement it yourself.

If you want to provide a more robust experience, in addition to the Cache Storage API⁠⁠, you can use features like IndexedDB⁠⁠ for in-browser NoSQL storage and background sync⁠⁠ to allow users to take actions while offline and defer server communication until the user has a stable connection again. You can also implement patterns like safe, long-lived sessions⁠⁠ to keep users authenticated and skeleton screens⁠⁠ to quickly let users know you’re loading content that can fall back to cached content or an offline indicator if needed.

Make it touchable

Almost all ChromeOS devices support touch and many support styluses, too, so you need to ensure that your app works seamlessly with both inputs in addition to the normal keyboard and mouse. The pointer events API⁠⁠ is designed specifically to handle this! Some fundamental pointer-related events you likely won’t have to change, like click events. Other events, like mouseup or touchstart, should be migrated over to their pointer events counterparts to make them seamlessly work across any kind of pointer. You can even manage different input types⁠⁠ separately if you’d like. For apps and games that rely heavily on tactile user input, moving to the pointer events API will make a world of difference on ChromeOS devices.

Smooth drawing on the web

If you’re building an app that has users drawing with their fingers or styluses, keeping latency between their input and your output fast enough to feel fluid has historically been difficult. When building these kinds of Canvas API⁠⁠ powered apps for ChromeOS, we recommend using the desynchronized hint for canvas.getContext() to provide low-latency rendering⁠⁠. To use the desynchronized hint for a canvas, do the following:

javascript
const canvas = document.createElement('canvas'); // or select one from the DOM
const ctx = canvas.getContext('2d', {
  desynchronized: true,
  // Other options here…
});

if (ctx.getContextAttributes().desynchronized) {
  // Low-latency supported! Do something awesome with it.
} else {
  // Low-latency not supported! Fall back to less awesome stuff
}

Design considerations for touch

It is important to take touch and stylus support into consideration when designing your web apps. Interactions that you may take for granted, like hover, don’t work well, if at all, for other input methods. Here are some best practices to keep in mind when designing touch and stylus friendly interfaces:

  • Don’t make input assumptions based on screen size. Instead, use feature detection⁠⁠, ideally at input time, to determine how to respond. Remember, on ChromeOS, users can and do seamlessly swap between mouse, touch, and stylus all within one session.
  • Ensure that elements you expect a user to touch have a minimum target size⁠⁠ large enough so surrounding elements aren’t accidentally hit instead.
  • Treat hover as progressive enhancement⁠⁠ and ensure the interaction can be accomplished through other means for touch and stylus (a long press or a tap, for example).
  • Touch users expect to be able to directly interact with on-screen elements, for instance pinch-to-zoom on maps instead of using zoom in/out buttons. Adding common touch gestures⁠⁠, where appropriate, can go a long way to making your app feel natural.

Make it capable

While some PWA capabilities are commonly known, like the Notifications API⁠⁠ that lets a web app receive and publish platform notifications, there are a number of new and upcoming features that are coming to the web to superpower your apps. The Chromium Web Capabilities project⁠⁠, also known as Project Fugu 🐡, is an effort to enable new, powerful web standards preserving what makes the web unique: it’s user-centric security, low-friction, and cross-platform compatibility.