What follows is a list of APIs and features that are uncommon to see in the wild, but have use cases nonetheless and the potential to greatly improve the experience your users have while visiting your website. Each feature below has a link to a demo so you can try it out in your browser. Without further ado...
This feature allows your PWA, when installed on the home screen, to show shortcut options when the app icon is long-pressed by the user. It is often used by messaging apps to provide shortcuts to frequently messaged users, though dynamically updating the shortcuts in your app manifest for a use case like that is not easy.
Alright, this one is more well known but I feel like it is important enough that it should be included anyway. This API allows web apps on mobile devices to use the native share dialog.
This is different from the notifications API. It's used to send notifications, but the important addition here is that the website does not need to be open in the browser in order for notifications to come through.
This API allows web applications to store and retrieve credentials such as username/password pairs or federated login data. This could be used to provide a quick way to use saved logins without visiting a login page and clicking the log in button with autofilled credentials.
Web OTP API (aka SMS Receiver API)
The Web OTP API provides a simple way to use SMS for two-factor authentication. It lets the web application intercept certain text messages (ones which contain its origin) and use them to authorize the user if given permission. Definitely simpler for the user than having to type in a code!
content-visibility CSS Property
The content-visibility property allows browser engines to render content much quicker by only rendering what is above the fold and waiting to render other content. This property has three possible values:
-
visible- no effect -
hidden- similar todisplay: nonebut the browser does not discard the previous rendering state, so changing fromcontent-visibility: hiddentovisibleis more performant than changing fromdisplay: nonetoblock. -
auto- turns on "containment" - a way for the browser to estimate the size of an element in various ways without rendering descendants (for performance).
More information is available in the link above or in the spec.
Allows web apps in fullscreen mode, such as games or remote desktop applications, to listen to the activation of certain key combinations which would otherwise be trapped by the browser or OS (such as Alt + Tab or Ctrl + W).
Provides a way for web apps to open files and save them directly to the user's file system. This kind of thing is very useful for file editors. If you want to try the demo above, make sure to use Chrome and enable the experimental web platform feature chrome://flags/#native-file-system-api.
Wish the screen wouldn't go to sleep while your web app is being used, even if not actively in a way which would normally keep the screen on? The Wake Lock API can be used to keep the user's device from going to sleep while they are, say, reading a recipe. This API helped Betty Crocker achieve a 300% increase in purchase intent indicators on their website.
Periodic Background Sync API
Sorry I couldn't find a demo for this one. The background sync API is similar to the Push API in that it requires a service worker and receives information in the background. The app will periodically receive a periodicsync event on the service worker which allows it an opportunity to fetch data. This API is most useful when you want to save content for offline use, but could be used to keep content cached and fresh so it is loaded instantly when the site is opened. More information can be found on the web.dev blog post about this feature.
The flip side of the Web Share coin is that not only can you share content to other apps, your app can be a target to receive shared content. First, however, the PWA must be installed. The demo above, as well as the API itself, only work in Chrome for Android at the time of this writing.
This API lets users select contacts to upload to a website through a contact picker widget. Names, emails, telephone numbers, addresses, and icons can all be requested.
The loading attribute on an HTML img element, when set to "lazy", instructs the browser not to load the image until it is in view or about to be scrolled into view. This results in bandwidth savings for users.
The payment request API is undoubtedly the most streamlined method to integrate payments into your website. It can show the user what they are buying, show how much it will cost, and even ask for shipping information. The user can pay with their saved credit card information or third party payment processor.
As a less intrusive (and permissionless) alternative to showing notifications is app badging. This API allows your app to set a badge number, such as a number of new unread notifications, on its icon.
Activates vibration hardware in the user's device, but must be in response to a click. (Vibration for notifications can be done through the notifications API.) Use sparingly--vibration is often more annoying than helpful, which may explain the API's absence in iOS Safari.
Top comments (0)