Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Require transient activation #351

Open
wants to merge 3 commits into
base: gh-pages
Choose a base branch
from
Open

Require transient activation #351

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9416565
Require transient activation
marcoscaceres Sep 28, 2022
f3b0a1c
Update index.html
marcoscaceres Sep 28, 2022
6db34fb
Update index.html
marcoscaceres Sep 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 79 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,8 +312,10 @@ <h3>
The <code>request(|type:WakeLockType|)</code> method steps are:
</p>
<ol class="algorithm">
<li>Let |document:Document| be [=this=]'s [=relevant global
object=]'s [=associated Document=].
<li>Let |global:Window| be the [=relevant global object=] of
[=this=].
</li>
<li>Let |document:Document| be |global|'s [=associated `Document`=].
</li>
<li data-tests="wakelock-disabled-by-feature-policy.https.sub.html">
If |document| is not [=allowed to use=] the [=policy-controlled
Expand All @@ -337,6 +339,11 @@ <h3>
|document|'s [=Document/visibility state=] is "`hidden`", return [=a
promise rejected with=] {{"NotAllowedError"}} {{DOMException}}.
</li>
<li>If |global| does not have [=transient activation=], return [=a
promise rejected with=] {{"NotAllowedError"}} {{DOMException}}.
</li>
<li>[=Consume user activation=] of |global|.
</li>
marcoscaceres marked this conversation as resolved.
Show resolved Hide resolved
<li>Let |promise:Promise| be [=a new promise=].
</li>
<li>Run the following steps <a>in parallel</a>:
Expand Down Expand Up @@ -782,14 +789,42 @@ <h2>
<h2>
Examples
</h2>
<pre class="example js" title="Acquires and releases a screen wake lock">
function tryKeepScreenAlive(minutes) {
navigator.wakeLock.request("screen").then(lock =&gt; {
setTimeout(() =&gt; lock.release(), minutes * 60 * 1000);
});
}

tryKeepScreenAlive(10);
<pre class="example html" title=
"Acquires and releases a screen wake lock">
&lt;button id="request" onclick="requestWakeLock(this)"&gt;
Request lock
&lt;/button&gt;
&lt;button id="release" onclick="releaseWakeLock(this)" disabled&gt;
Release lock
&lt;/button&gt;
&lt;script&gt;
let lock = null;
async function requestWakeLock(elem) {
elem.disabled = true;
try {
lock = await navigator.wakeLock.request("screen");
console.log("Screen Wake Lock acquired");
} catch (err) {
console.error(`${err.name}, ${err.message}`);
elem.disabled = false;
return;
}
const release = document.getElementById("release");
lock.addEventListener("release", () =&gt; {
console.log("Screen Wake Lock released");
release.disabled = true;
elem.disabled = false;
});
release.disabled = false;
}
async function releaseWakeLock(elem) {
await lock.release();
lock = null;
elem.disabled = true;
const request = document.getElementById("request");
request.disabled = false;
}
&lt;/script&gt;
</pre>
<p>
This example allows the user to request a screen wake lock by clicking
Expand All @@ -800,21 +835,44 @@ <h2>
const checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
document.body.appendChild(checkbox);

const sentinel = await navigator.wakeLock.request("screen");
checkbox.checked = !sentinel.released;
sentinel.onrelease = () =&gt; checkbox.checked = !sentinel.released;
let lock = null;
checkbox.addEventListener("change", async () =&gt; {
if (checkbox.checked) {
// Acquire lock...
lock = await navigator.wakeLock.request("screen");
// ...and update checkbox state in case lock is lost.
lock.onrelease = () =&gt; {
if (checkbox.checked) checkbox.checked = false;
}
} else {
await lock?.release();
lock = null;
}
});
</pre>
<p>
In this example, two different wake lock requests are created and
released independently:
In this example, independent wake lock are created and released
marcoscaceres marked this conversation as resolved.
Show resolved Hide resolved
concurrently:
</p>
<pre class="example js">
let lock1 = await navigator.wakeLock.request("screen");
let lock2 = await navigator.wakeLock.request("screen");
<pre class="example html">
&lt;script&gt;
const locks = [];
// Lock is created when a button is pressed
async function lockScreen() {
const lock = await navigator.wakeLock.request("screen");
locks.push(lock);
}

lock1.release();
lock2.release();
async function releaseAllLocks() {
await Promise.all(locks.map(lock =&gt; lock.release()));
}
&lt;/script&gt;
&lt;button onclick="lockScreen()"&gt;
Lock screen
&lt;/button&gt;
&lt;button onclick="releaseAllLocks()"&gt;
Release locks
&lt;/button&gt;
</pre>
</section>
<section id="conformance">
Expand Down