Powerful PWAs

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)

Intent sharing & protocol handling

• 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.