web
web
Progressive Web Apps (PWAs) are a great way to get your web app to ChromeOS users. Users can install your app from the browser, and you can list your PWA in Google Play for users to discover. Once installed, your PWA will show up in the launcher where the user can pin it to their shelf and quickly access it, opening a new opportunity for your users to engage with your app. The Google I/O 2022 talk, Making the most of PWA install, walks you through the tools to further enhance your PWA with powerful APIs that create new experiences after installation.
Installation
Many of the capabilities discussed here only apply to apps that are installed, and won’t work if run from a tab. Therefore, the first step is to ensure that your app is installable. Chrome browser provides a default install experience but you may want to create a custom install flow to display the install prompt and also collect useful metrics during the process.
Notifications
Notifications are a good way to let users know about important and time-sensitive events or actions they need to take. Some users may be wary of turning on notifications, so you should clearly state the purpose of your notifications and let them opt-in before requesting permission. In a settings menu, you should allow users to enable and disable notifications and set their notification preferences.
Implementing notifications consists of a few things including visual elements on the frontend and push messaging from your backend. On the frontend, it’s important to implement the visual and behavioral aspects of displaying a notification. Then, you will likely use your backend server to push messages to the client where the service worker will process the notification.
Badging
Similarly to notifications, badging alerts users to new activity happening in your PWA. Use the badging API to provide visual cues on the app icon on the shelf. On ChromeOS, this looks like a small circle on the app’s home icon.
Sharing
The Web Share and Web Share Target APIs lets you share content like links, texts, or files to and from your app. With the Web Share API, your PWA is able to use the same system-provided share capabilities as platform-specific apps.
The Web Share Target API lets your PWA register with ChromeOS as a share target to receive certain types of shared content from other apps. To ensure that your app will always be able to process the shared data, it’s also a good idea to implement the action page that handles the shared content to work offline.
File handling
The File Handling API lets a PWA register itself as a file handler for certain file types. This allows a user to see the app as an option to “Open with…” when they try to open a file. Much like with the Web Share Target API, it’s recommended that the action page that handles the incoming file should work offline in the scenario when a user is unable to get online but would still like to edit or view (or whatever your app does) their local file.
Window controls overlay
The window controls overlay feature, which we expect to be available within the next few releases of ChromeOS, lets PWAs provide a more app-like feel by allowing a customized overlay containing the window controls to replace the normal title bar. You can even build some basic actions and UI elements into the custom overlay for users to interact with.
App shortcuts
App shortcuts help your users quickly start common or recommended tasks by navigating to specific pages within your PWA. The shortcuts menu is accessed by right-clicking on the app icon. This can be implemented by defining the shortcuts in the web app manifest.
Identification
Previously, it was up to the discretion of browsers to decide how to identify your app. Some browsers relied on the app’s manifest field path or start_url which meant developers couldn’t change either without it being identified as a different app. Starting in Chrome 96, you can uniquely identify your app by using the id field in the web app manifest, removing the dependency on start_url and manifest path. It also makes it possible to serve multiple PWAs from the same URL as long as there is a manifest with a unique id.
And more!
These are just some of the powerful APIs available for you to make your PWAs more capable for your users. There are many more APIs (like the Launch Handler API) that can make your PWA work more seamlessly with the ChromeOS desktop and other apps. Check out the web and ChromeOS sessions at Google I/O 2022 and learn more about adapting web apps for ChromeOS .