web

Powerful PWAs

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 while preserving what makes the web unique: it’s user-centric security, low-friction, and cross-platform compatibility.

Bridging the app gap

Most of these capabilities are built around bridging the gap between traditional desktop or mobile apps and web apps, with the first major capabilities to ship allowing web apps to access the platform’s contact pickers⁠⁠ and share capabilities⁠⁠, and installed PWAs to register as a platform share target⁠⁠ and show icon badges⁠⁠, to name a few⁠⁠.

Each capability goes through an extensive standardization process⁠⁠ to solicit community feedback to help shape the API and ensure the final design is secure, private, and trustworthy. New capabilities are tracked in an open tracker⁠⁠ and can be divided into one of five categories:

SHIPPED: Available for use in the latest stable version of Chrome. Can be reliably used provided its use is properly feature detected.
IN ORIGIN TRIAL: Available as a Chrome origin trial⁠⁠ (OT), allowing experimental features and APIs to be validated by the Chrome team in real-world usage and allowing you to provide feedback on API usability and effectiveness. OTs are opt-in and allow you to beta test this functionality with your users without requiring them toggle any special flags in their browser. APIs may change after an OT, and OTs are guaranteed to not be available for a period of time before launch, so they shouldn’t be treated as an early launch mechanism for new APIs.
IN DEVELOPER TRIAL: Available behind a flag in Chrome. These APIs are experimental and still under active development. They are not ready for production use, with a good chance that there are bugs and that the APIs will change. While developers can use this time to try out experimental features on their own, they should not instruct their users to enable flags to use their features.
STARTED: Development has started, but no usable API currently exists.
UNDER CONSIDERATION: APIs that users have expressed interest in, but implementation hasn’t started yet. If an API hasn’t been started yet, please star it or add your use cases to its issue to help the Chromium team prioritize it.

Enhancing your PWA

When building out your PWA, consider implementing the following APIs and best practices to greatly improve the feel of your web app. Broken down by general use-case, your app may benefit from one or more APIs to improve your overall user experience. APIs marked with a 🔮 are in origin trial, those marked with 🚩 are in developer trial, those marked with 📱 are currently stable on mobile and their desktop implementations have started, with any other API mentioned being stable (although possibly not available on all platforms). Only APIs that are available in the current stable, beta (marked with β), or canary (marked with α) versions of Chrome are included; expect this list to be updated regularly to reflect APIs being released.

App installation

If you want your web app to be available along-side other installed apps, like in the taskbar, launcher, desktop, and app switcher, consider implementing the following APIs⁠⁠ so your PWA is installable⁠⁠. Optionally following this codelab⁠⁠.

Web App Manifest⁠⁠ - Provide information about your web app to the browser and operating system, for instance name, logo, what URL to start the app at, and how to display your web app.
Service Workers and Cache Storage API⁠⁠ - Allow your web app to create a proxy server and control how browser cache is handled. A service worker that reacts to a browser’s fetch event and can respond to a fetch request for the start URL specified in the web app manifest with content when offline is a requirement for being installable.
Run on Login⁠⁠ 🚩β - Allows you to configure your PWA to launch automatically when the user logs in.
App Icon Shortcuts⁠⁠ - Provide shortcuts to specific URLs with your web app (for instance, start a chat, upload a photo, etc…) from your installed app icon’s context menu (i.e. long-hold on mobile devices, right-click on desktops), on supported platforms.
getInstalledRelatedApps⁠⁠ - Allows your web app to check if your PWA, Android app, or Windows (UWP) app has already been installed.

Adaptive & accessible

If you want your web app to be usable by users with different devices and different physical and/or mental needs, you should consider implementing the following:

Responsive Design⁠⁠ - Ensure your web app provides a usable, or at least not broken, experience for small through large screen sizes to allow for users of different devices and window placements to use your app.
WCAG 2.0 Guidelines⁠⁠ - Ensure your web app is usable by people with a spectrum of physical and mental abilities, not just neurotypical and able-bodied individuals. See also the UK Government’s Do’s and don’ts on designing for accessibility⁠⁠.

Monetization & distribution

Web Payments⁠⁠ - Flexible, standard interface for online payments intended to work on any browser or device and with any payment or payment service provider.
Digital Goods API⁠⁠ 🔮 - Flexible, standard interface for querying and managing in-app purchases from web applications, including support for common purchase types like one-time purchases, repeatable purchases (like in-game gems/currency), and subscriptions. Works in conjunction with Web Payments.
Trusted Web Activity⁠⁠ - Create an Android app for your PWA so it can be listed for download in compatible stores, for instance Google Play.

Clipboard access

Async Clipboard⁠⁠ - Read and write text and images to the user’s clipboard, and listen for copy and paste events from the user.

Notifications

If your web app needs to notify users, for instance a chat app or background encoding being worked on, you may want to consider implementing the following APIs:

Web Push Notifications⁠⁠ - Once a user has opted-in, allows your web app to push notifications to them.
Badging API⁠⁠ - Allows your installed web app to set an application-wide badge on the app icon, optionally with a number.
Notification Triggers⁠⁠ 🔮 - Send notifications to users when a triggering condition has been met, for instance time-based or location based (think calendar event notifications)

URL protocol registration⁠⁠ 🚩α - Enable web applications to register themselves as handlers of custom URL protocols/schemes using their installation manifest.
Web Share⁠⁠ - Use the built-in system sharing UI on supported devices to share URLs, text, and files to other installed apps on their device. Your app does not need to be installed.
Web Share Target⁠⁠ - Have your installed PWA available in built-in system sharing UI on supported devices to allow users to share text and files to your app from other apps.

Opening & saving files

File Handling API⁠⁠ 🚩 - Have your installed web app register with the operating system their ability to handle (read/stream/edit) files with given MIME types and/or file extensions, allowing for, for instance, them to be an option in a context menu’s “Open With Application…” list.
File System Access API⁠⁠ - Robust access to the user’s file system per session, allowing for the following interactions (as needed by your app)
- Read files from the local file system - Shows a file picker and allow a user to pick one or, optionally, multiple files to open, including limiting allowed file types by MIME type and extension.
- Save changes to open file - Save changes to a file opened with FSA directly, without prompting the user to choose where to save the file or have them download a copy.
- Create a new file on the local file system - Allow a user to create a new file, optionally with default file extension, on their local file system, that your app then has access to save to.
- Recently opened files - File handlers created with FSA can be stored in IndexedDB allowing you to show a list of recently used files between user sessions (although editing permissions still don’t persist between sessions)
- Read, write, and manipulate a directory - Allow a user to choose a directory on their local file system that your app then can read the contents of, create, read, and delete files and subdirectories in, and determine relative file path within.
Compression Streams⁠⁠ - Compress or decompress using the gzip and deflate compression algorithms.

Window Management

Fullscreen API⁠⁠ - Allow a user to make an element in your web app, for instance a video, take up the whole screen
Cross-Screen Window Placement API⁠⁠ 🔮 - Allows your web app to get information about connected displays and position windows relative to those displays allowing for multi-window, multi-display web apps.
Tabbed Application Display Mode⁠⁠ 🚩 - Allow your installed web app to be displayed in one or more tabs, not just in a single window.

Deeper OS integration

Local Fonts API⁠⁠ 🔮 - Allows your web app to list locally installed fonts and request low-level (byte-oriented) SFNT container access that includes the full font data, allowing your app to custom-render locally installed fonts.
Wake Lock⁠⁠ - Allows your web app to prevent a screen from going to sleep, allowing your web app to perform long-running tasks without fear of interruption (i.e. file transcoding, or keeping a recipe up while cooking)
Idle Detection⁠⁠ 🔮 - Allows your web app to detect when the user isn’t actively using their device.

Expanded offline support

If you want your web app to work even better offline, you may want to consider implementing the following APIs:

Background Sync⁠⁠ - When offline, queue requests that need a connection then sync your web app’s data in the background, when the network is available, instead of not processing requests offline at all. For instance, allowing messages to be sent or incremental changes to a document synced when back online.
Periodic Background Sync⁠⁠ - Allow your installed and frequently used web app to have its service worker periodically woken up, based on a minimum amount of time passing, and run, for instance to update a cache, allowing content to be up-to-date for when a user opens the app.
Content Indexing API⁠⁠ - Allow your web app to tell the browser what content is available offline to allow the browser to surface it to users.
Background Fetch⁠⁠ - Allow for long-running background fetches, such as downloading movies or uploading videos and images, without risking the service worker being killed.

Media streaming, encoding, & decoding

If your web app plays back media files, like video or audio files, you may want to consider implementing the following APIs:

Adaptive Streaming⁠⁠ - Allow video streams to switch between bit rates based on network performance
Picture-in-Picture⁠⁠ - Allow a user to pop video out of your web app into an always-on-top window, which then can be moved and resized independently
Media Session API⁠⁠ - Allow a user to control media playback for your web app using hardware and OS-level software functionality (like play/pause/stop buttons in keyboards or on lock screens), as well as control OS-level media notifications (like title, artist, album, and artwork)
Chromecast API⁠⁠ - Allow a user to cast media to an available Chromecast receiver, for instance to play a video from your web app on their TV.
Web Codecs⁠⁠ 🔮 - Access to built-in hardware and software media encoders and decoders, useful for both real-time usecases like low-latency live streaming and encoding, decoding, and transcoding of files.

Expanded input support

Pointer Events⁠⁠ - React to touch, stylus, and mouse events using a single API, allowing more input options for your users. See also best practices for touch-friendly UIs⁠⁠ and user input and controls⁠⁠.
Gamepad API⁠⁠ - Allows your web app to respond to input from common gamepads
Web HID⁠⁠ 🚩 - Allows your web app to access non-standard human interface devices (like custom controllers)

Advanced peripheral support

Web USB⁠⁠ - Allows your web app to access non-standard (i.e. keyboards and mice) USB devices from your app
Serial API⁠⁠ 🔮 - Adds an API for communicating with hardware devices over a physical or virtual serial port.

Your PWA checklist

Ready to start enhancing your PWA with these new powerful APIs? Choose one of the usecases below to see a recommended set of APIs to use, or make your own checklist, and work towards completing it!