Back to Library
Region: Switch to ID
Intermediate webdev • webdev-pwa

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.

{% Aside ‘gotchas’ %} While there are many capabilities on the web, there are still gaps, and that’s where the web capabilities project comes in. The project describes a group of APIs to increase what the web is capable of. We discussed this project and how you can participate in it in the Experimental chapter. {% endAside %}

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.

{% Aside %} Some capabilities require user permission: in most cases, the permission dialog appears on first usage. Today, you can request a single permission at a time, but in the future, it may be possible to request many permissions in one dialog on some platforms, using the Permissions API. {% endAside %}

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

{% Aside %} Safari also supports Gesture events, a non-standard API for detecting rotation and pinching gestures, which should be used with care. {% endAside %}

  • 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

{% Aside %} You can integrate your PWA with many platform-specific apps using URI schemes and universal URLs, as I showed in the OS Integration chapter. {% endAside %}

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

{% Aside %} Accessing hardware devices on the web offers a comprehensive guide to understanding how different hardware APIs interact with each other. {% endAside %}

  • 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

{% Aside %} If you publish a PWA to some app catalogs and stores, you may access additional APIs. For example, if you publish a PWA to Google Play using a Trusted Web Activity, you can use the Digital Goods API to charge your users for subscriptions and premium content. {% endAside %}

{% Aside ‘gotchas’ %} If you have a legitimate use case that cannot be realized with the present set of APIs, you can submit a request to analyze the use case for a possible future web API, as we’ll see in the Experimental chapter. {% endAside %}

Resources