Chrome 84 was recently released and I am in love with the updates in the new version. In this post, I'll discuss a few of them.

Table of Content

• App Icon Shortcut
• Wake Lock
• Idle Detection
• Addtional Features
• Conclusion

App Icon Shortcut

App Icon shortcuts are helpful to navigate or perform an action quickly. They are the shortcuts available to you, so you can directly navigate to a specific page without first opening the app and then navigating.
On a desktop, you can see these shortcuts by right-clicking the app icon, on android, you can long hold an app icon to see these shortcuts.

Adding Shortcuts is pretty easy, you have to add shortcut property in your manifest.json

"shortcuts": [
  {
    "name": "Open Notifications",
    "short_name": "Notifications",
    "description": "View all your notifications",
    "url": "/notifications",
    "icons": [
      { "src": "//bell.png", "sizes": "192x192" }
    ]
  },
]

Wake Lock

Think of that time when you are trying to make a delicious dish using the master recipe that you just found on google. Your hands are dirty and your mobile screen turns off. Agghh! Now you have to wash your hands, to use turn on the screen. I dislike this experience. I'm sure you don't want your website users to experience the same.
Good News! you can use Wake lock to avoid screen lock.

navigator.wakeLock.request('screen')

This function will stop the screen from locking.
Note: Wake Lock might fail sometimes (e.g. if the battery is low). It's better to use it in try..catch statement
A live demo of wake lock is available here.

Idle Detection

Idle Detection API helps you to find out if the user is not interacting with the device anymore. To use idle Detection, you have to make sure your user has granted Notifications.
The Idle detector API has two types of the idle state.

• The user Idle state: active or idle: the user has or has not interacted with the user agent (browser) for some time.
• The screen idle state: locked or unlocked: the system has an active screen lock (like a screensaver) preventing interaction with the user agent. Here's an example of how to use Idle Detector API

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
});

Take a look at Detect inactive users with the Idle Detection API to learn more about Idle Detection

Aditional Feature

There are many more amazing features added to Chrome 84. Learn more about them

• Web Animation API
• Content Indexing API
• SameSite Cookie Changes

holistic overview

Chrome 84 has quite amazing and impressive features.

• App Icon Shortcuts helps you to add shortcuts to your app icon.
• Wake Lock helps your give your users a better experience by avoiding screen locks.
• Idle Detectings is an API that helps you to detect if a user is currently idle.