Этот текст был составлен как проблема и помощь в понимании некоторых вещей по спецификации whatwg. Текст проблемы не был принят во внимание и проигнорирован, а мое объяснение было посоветовано разместить в своем блоге.
Текст ниже является объясняющей частью (можете воспользоваться переводчиком, перевод будет сносным, я смотрел). Не удалять же мне эти интересные находки, может кому-то это будет полезным.
I noticed that Chrome APIs gives ~5000ms for APIs that using transient activation in their algorithms for successfull completion
/// measuring only for Chrome
(() => {
let timerId = null;
let start = null;
const data = navigator.userActivation;
document.documentElement.addEventListener("pointerdown", (e) => {
if(timerId !== null && data.isActive) {
clearTimeout(timerId);
} else if(timerId === null){
console.log("isActive", data.isActive);
start = performance.now();
}
timerId = setInterval(() => {
if(!data.isActive){
console.log("isActive", data.isActive);
console.log("Your transient activation interval: ", performance.now() - start);
clearInterval(timerId);
timerId = null;
}
})
})
})()What I could find for every example of APIs gated by user activation:
-
Sticky activation-gated APIs You may came across to this case when you're closing your tab having event
beforeunloadthat will cause popup message. In Chrome you can track it withnavigator.userActivation.hasBeenActiveif it givestruevalue that means you'll see popup, otherwise you won't see. Also it appears inhistoryAPI -
Transient activation-gated APIs This case you can meet for example in using
document.documentElement.requestFullscreenorinput.showPickerAPIs./// open a blank tab and perform this in console let newEl = document.createElement("input"); newEl.setAttribute("type", "color"); document.body.append(newEl); newEl.showPicker();
In the Firefox you will get the following message of error:
Uncaught DOMException: HTMLInputElement.showPicker: Call was blocked due to lack of user activation.. That's because performing code in the console won't cause activation triggering input event that I see correct by spec. In the same time Chrome won't cause the error such as Firefox, because it thinks that this is activation triggering input event.Also if you run in console this code:
document.documentElement.addEventListener("pointerdown", () => { setTimeout(() => document.documentElement.requestFullscreen(), 5000) })
and commit click within document area, you will see how fullscreen activated, but if you will increase timeout you will have gotten error with notification (in Chrome) and error message (everywhere) that
requestFullscreencan't be aplied due with expired transient activation.And the last one:
/// Transient activation-consuming API and Transient activation-gated API const newEl = document.createElement("input"); newEl.setAttribute("type", "color"); document.body.append(newEl); document.documentElement.addEventListener("pointerdown", () => { window.open(); newEl.showPicker(); })
Using
window.openAPI switch our transient activation to inactive status, that means if any other API that needing in that transient activation can't be perfomed successfully. -
Transient activation-consuming APIs This case appears when you are using such API as
window.open. In Chrome if you open new tab and in console of the dev-tools writewindow.open()and afternavigator.userActivation.isActive, you will get new opened tab andfalsevalue in the opener window, that will be mean thatwindow.openuses transient activation. Also you can write in consolewindow.open(); window.open();(in one moment) that opens two tabs, that shows thatwindow.openAPI doesn't check transient activation for its action. -
Transient activation-gated APIs and Transient activation-consuming APIs This case appears when API uses two concept together
document.documentElement.addEventListener("pointerdown", async () => { await document.documentElement.requestFullscreen(); document.exitFullscreen(); document.documentElement.requestFullscreen(); })
At the first time
requestFullscreenchecks transient activation, if it is active then perform successufully its algorithm and after toggle transient activation to inactive. At the second time falls into fail because transient activation has been toggled in state of transient activation when it is not active.