Progressive Web App 閒置中 Idle Detection API 空閒檢測入門實做

me
林彥成
2021-09-24 | 1 min.
文章目錄
  1. 1. 什麼是 Idle Detection API
  2. 2. 怎麼使用 Idle Detection API

什麼是 Idle Detection API

Idle Detection API 的設計是當 App 被用戶閒置超過設定的時間時觸發,目前這個 API 還在提議的階段。

API 的相關文件: https://wicg.github.io/idle-detection/

空閒檢測可以解決什麼問題?

  • 聊天的應用可以透過這個來顯示聯絡人狀態
  • 博物館中公開互動的 Web App 若無人使用可以自動回到首頁
  • 挖礦等級耗費效能的運算可以等到閒置時執行

在有這個 API 前其實有個 visibilitychange 事件能夠達到一半的目的,瀏覽器會偵測是否還 Focus 在當前的 Tab。

1
2
3
4
5
6
7
document.addEventListener("visibilitychange", function () {
if (document.visibilityState === "visible") {
backgroundMusic.play();
} else {
backgroundMusic.pause();
}
});

怎麼使用 Idle Detection API

主要是透過用戶、螢幕兩方面去偵測

  • 用戶空閒狀態:停止操作 (active 或 idle)
  • 螢幕空閒狀態:螢幕鎖定(locked 或 unlocked)
1
2
3
4
5
6
7
8
9
enum UserIdleState {
"active",
"idle"
};

enum ScreenIdleState {
"locked",
"unlocked"
};

直接看官方的範例:

  1. 看瀏覽器是否存在 API
  2. 取得相關權限
  3. New 一個 IdleDetector,最小的 threshold 目前是 60 秒
  4. 可以透過 abort 去終止
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const main = async () => {
// 有就可以用
if (!("IdleDetector" in window)) {
return console.log("IdleDetector is not available.");
}
// 但還是需要先取得權限
if ((await IdleDetector.requestPermission()) !== "granted") {
return console.log("Idle detection permission not granted.");
}

try {
const controller = new AbortController();
const signal = controller.signal;

const idleDetector = new IdleDetector();
idleDetector.addEventListener("change", () => {
console.log(
`Idle change: ${idleDetector.userState}, ${idleDetector.screenState}.`
);
});
await idleDetector.start({
threshold: 60000,
signal,
});
console.log("IdleDetector is active.");

window.setTimeout(() => {
controller.abort();
console.log("IdleDetector is stopped.");
}, 120000);
} catch (err) {
// Deal with initialization errors like permission denied,
// running outside of top-level frame, etc.
console.error(err.name, err.message);
}
};

main();

這也是一個漸進式增強的實際的範例,讓 App 能夠逐步支援更多的功能。

這個頁面在勾選觸發後,只要在 60 秒不活動後就會清除繪畫的內容。這個應用案例可以想像這成被部署在公眾場合供參觀的使用者塗鴉。

Demo 連結: https://idle-detection.glitch.me/


喜歡這篇文章,請幫忙拍拍手喔 🤣

share