Capabilities

Progressive Web Apps can do more than just rendering content on the screen or connecting to web services. PWAs can deal with files from the file system, they can interact with the system's clipboard, they can access hardware that is connected to the device, and much more. Every Web API is available for your PWA, and there are some extra APIs available when your app is installed.

You can use What Web Can Do Today to know what's possible on each platform. For individual APIs or capabilities, you can use Can I Use or the browser compatibility tables on MDN.

Always check for feature support

The first letter in PWA stands for progressive, and it comes from the idea of progressive enhancement and feature detection. You should not expect your app to work the same way on every device. The diversity of contexts and abilities on billions of devices in different countries makes PWAs an excellent platform, thanks to their progressiveness.

This means that you need to develop your app in layers that may not be available on every device and to check availability before usage.

You need to check with JavaScript if an API exists before using it or ask an API if a service is available on that particular device.

Powerful web

The web is super powerful today. For example:

  • You can build a hyperlocal video chat app with WebRTC, geolocation, and push messages.
  • You can make an app installable.
  • You can add video effects with WebAssembly.
  • You can even bring it into virtual reality with WebGL and WebXR.

Empowering your PWA

Let's split the PWA capabilities APIs into four groups:

  • Green: APIs available on every browser on every platform, when technically possible. Most of them have been shipped for many years, they are considered mature, and you can use them with confidence. An example API from this group is the geolocation API.
  • Light green: APIs are available only on some browsers. Considering the lack of support on some platforms, they matured within the supported subgroup of browsers so that you can use the capability confidently on them. An example API from this group is WebUSB.
  • Yellow: experimental APIs. These APIs are not yet mature; they are only available on some browsers, and within tests or trials. We talked some about these capabilities in the Experimental chapter.
  • Red: the group for APIs that you can't use in a PWA, and where plans to add them are still long term. An example API from this group is geofencing.

Green capabilities

Below is a list of the most important capabilities you can use in your PWA.

Basics

  • Caching files locally using the Cache API, as seen in the Caching chapter.
  • Executing tasks in threads using web workers, as we saw in the Complexity management chapter.
  • Managing network requests with different strategies in a service worker, as seen in the Service workers chapter.
  • 2D Canvas for rendering 2D graphics on the screen using the Canvas API.
  • 2D and 3D high-performance Canvas, or WebGL, for rendering 3D graphics.
  • WebAssembly, or WASM, for executing low-level compiled code for performance.
  • Real-Time communication, using the WebRTC API.
  • Web Performance APIs to measure and help provide a better experience. See the Performance API guide for more information.
  • Store data locally with IndexedDB and storage management to query quota and request persistent storage, as seen in the Offline data chapter.
  • Low-level audio thanks to the Web Audio API.
  • Foreground detection using the Page Visibility API.
  • Network communication using the Fetch API and the WebSocket API.

Hardware and sensors

  • Gamepads to read information coming from standard gamepads and joysticks connected to the device using the Gamepad API.
  • Biometric authentication (such as face or fingerprint recognition) using Web Authentication or WebAuthn.

Operating system integration

Light-green capabilities

Here is a list of the most important capabilities you can use in your PWA, with the caveat that they may not be available on every browser.

The basics

  • WebGL 2.0, the new version of the WebGL spec to match OpenGL 3.0.
  • Codecs, low-level access to the individual frames of a video stream and chunks of audio; useful for web applications that require full control over the way media is processed through the Web Codecs API.

Hardware and sensors

  • Ambient Light reads the current light level or illuminance of the ambient light around the device, in addition to the Sensors API.
  • Vibration gives the user haptic feedback when something happens, if the device supports it, through the Vibration API.
  • Recording media captures the data generated by a MediaStream or HTMLMediaElement object (such as a <video> tag) for analysis, processing, or saving to disk, thanks to the MediaRecorder API.
  • Applying a wake Lock to the screen prevents the device from dimming, or locking the screen, when your PWA needs to keep running, using the Screen Wake Lock API.
  • Virtual reality enables you to use a headset and other devices in your PWA, thanks to the WebXR Device API.
  • Augmented reality can be achieved in your PWA in many ways, such as using the WebXR Device API or the Safari Quick Look app for AR content.
  • Detect inactive users with the Idle Detection API.
  • Orientation lock locks the orientation to portrait or landscape while the PWA is on the screen, thanks to the Screen Orientation API, or the orientation property of the Web App Manifest for installed apps.
  • Present content on projectors and secondary displays, thanks to the Presentation API.
  • Lock a pointer to receive delta movement information from pointers (mice, trackpads, and pointers) instead of position values—useful for some games—thanks to the Pointer Lock API.

Operating system integration

Resources