1 of 41

New Kids in Browserland

New browser APIs & how to use them to supercharge your web apps

2 of 41

What we will cover -

  • Some of the newest web APIs
  • How to use these to add the further enhance PWA’s.

3 of 41

APIs we’ll talk about -

  • Intersection Observer API
  • Credential Management API
  • Network Information API
  • Web Share API

​

4 of 41

  • Device Memory API
  • NavigatorConcurrentHardware

​

  • Battery API

5 of 41

Intersection Observer API

6 of 41

  • Asynchronously observe changes in the intersection of a target element with -
    • an ancestor element or,
    • with a top-level documents viewport.

7 of 41

Use Cases -

  • Lazy-loading of images or other content as a page is scrolled.
  • Implementing "infinite scrolling" web sites.
  • Reporting of visibility of advertisements in order to calculate ad revenues.

8 of 41

Code Example -

<TBA>

9 of 41

Myntra’s infinte scrolling list page

10 of 41

Visibility of feed cards -

Check which feed cards are seen by user to avoid showing duplicate cards.

11 of 41

Browser Compatibility

12 of 41

Credential Management API

13 of 41

  • The Credential Management API lets a website store and retrieve user, federated, and public key credentials. �
  • These capabilities allow users to sign in without typing password

14 of 41

Code Example -

<TBA>

15 of 41

Browser Support

16 of 41

  • Browser support is patchy.�
  • Use Google Smartlock on unsupported browsers.

17 of 41

Myntra’s PWA - One Tap login

18 of 41

Network Information API

19 of 41

  • The Network Information API provides an interface for web applications to access the underlying connection information of the device.

20 of 41

Effective Connection Type

21 of 41

Code Example -

22 of 41

Browser Support

23 of 41

Web Share API

24 of 41

  • Allows websites to invoke the native sharing capabilities of the host platform.�
  • Make content / products easier to share on web.

25 of 41

Code Usage -

26 of 41

Browser Support

27 of 41

Device Memory API

28 of 41

  • New HTTP Client Hints header and a web exposed API to surface device capabilities for memory (RAM).�
  • Low memory devices devices (under 512MB, 512MB-1GB) are widely used in emerging markets.

​

29 of 41

  • Chrome telemetry indicates a large number of OOM (out-of-memory) crashes on foreground tabs on these devices.
  • Thus, serving a lite version not only improves the user experience, it is necessary for the site to be usable at all.

​

30 of 41

Code Usage -

window.navigator.deviceMemory

31 of 41

Browser Support

  • Supported only on Chrome for Android - v 63 ownwards.

32 of 41

ConcurrentHardware API

33 of 41

  • The navigator.hardwareConcurrency read-only property returns the number of logical processors available to run threads on the user's computer.

34 of 41

Code Usage -

35 of 41

Browser Support

  • Supported only on Chrome for Android - v 63 ownwards.

36 of 41

Battery Usage API

37 of 41

  • The Battery Status API specification defines a means for web developers to programmatically determine the battery status of the hosting device.�
  • The Battery Status API can be used to defer or scale back work when the device is not charging in or is low on battery

38 of 41

Code Example -

39 of 41

Browser Support

40 of 41

Thank YOU

41 of 41

References -