Modern Browser APIs

Modern browsers have created a handful of APIs that can help developers to build applications that can perform better, work offline, and provide a better user experience.

Includes knowledge areas


Internet connections can be flakey or non-existent on the go, which is why offline support and reliable performance are common features in progressive web apps. Even in perfect wireless environments, judicious use of caching and other storage techniques can substantially improve the user experience. There are several ways to cache static application resources (HTML, JavaScript, CSS, images, etc.), and data (user data, news articles, etc.).

Web Sockets

A WebSocket is a persistent connection between a client and server. WebSockets provide a bidirectional, full-duplex communications channel that operates over HTTP through a single TCP/IP socket connection. At its core, the WebSocket protocol facilitates message passing between a client and server.LocationsBrowsers offer a common JavaScript geolocation service you can use to enrich your HTML driven experiences. A common use of geolocation is to show where stores are located and possible driving directions.
Identifying the real geographic location of an Internet-connected device is possible by linking to the location of the IP address, MAC address, or via Wi-Fi positioning methods.

Device Orientation

Web-enabled devices are capable of determining their orientation; that is, they can report data indicating changes to their orientation with relation to the pull of gravity. In particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height.


The Payment Request API allows merchants to easily collect payment information with minimal integration. The API is an open and cross-browser standard that replaces traditional checkout flows by allowing merchants to request and accept any payment in a single API call. The API eliminates manual and tedious entry by storing the user's information securely in the browser. The browser passes addresses and credit card (or other payment) details directly to the website. And, because the browser is collecting payment information from the user, making a payment goes from " n " taps to one tap.


The Credential Management API lets a website store and retrieve password, public key, and federated credentials. These capabilities allow users to sign in without typing passwords, see the federated account they used to sign in to a site, and resume a session without the explicit sign-in flow of an expired session.

PRPL Pattern

PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster: Push (or preload) the most important resources. Render the initial route as soon as possible. Pre-cache remaining assets. Lazy load other routes and non-critical assets.


Notifications can be used by the service worker to show new information to the user, or at least alert them when something has been updated. Notifications can work without push, but are very useful when combined with them.


Push is used to deliver new content from the server to the app without any client-side intervention, and its operation is handled by the app's service worker.

Is a part of:



The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.