Chrome 84 - What's new?
Tags: chrome, google, pwa, ux
Published: 2020-07-20 01:53:34

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](#app-icon)
* [Wake Lock](#wake-lock)
* [Idle Detection](#idle)
* [Addtional Features](#additional)
* [Conclusion](#overview)

## App Icon Shortcut<a name="app-icon"></a>
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.

  ![Twitter Shortcut](https://developers.google.com/web/updates/images/2020/07/twitter-app-icon-shortcut.jpg)<figcaption>*Twitter's PWA (Image from developers.google.com)*</figcaption>



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<a name="wake-lock"></a>
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](https://wake-lock-demo.glitch.me/).


## Idle Detection<a name="idle"></a>
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](https://web.dev/idle-detection/) to learn more about Idle Detection

## Aditional Feature<a name="additional"></a>
There are many more amazing features added to Chrome 84. Learn more about them
* [Web Animation API](https://web.dev/web-animations/)
* [Content Indexing API](https://web.dev/content-indexing-api/)
* [SameSite Cookie Changes](https://blog.chromium.org/2020/05/resuming-samesite-cookie-changes-in-july.html)

## holistic overview<a name="overview"></a>
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.