From 9416565e24ce37c07a3202b9603d5faab5a09a78 Mon Sep 17 00:00:00 2001 From: Marcos Caceres Date: Wed, 28 Sep 2022 14:10:40 +1000 Subject: [PATCH 1/3] Require transient activation --- index.html | 100 ++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 79 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index d382d0c..5d1d2a1 100644 --- a/index.html +++ b/index.html @@ -312,8 +312,10 @@

The request(|type:WakeLockType|) method steps are:

    -
  1. Let |document:Document| be [=this=]'s [=relevant global - object=]'s [=associated Document=]. +
  2. Let |global:Window| be the [=relevant global object=] of + [=this=]. +
    3. +
  3. Let |document:Document| be |global|'s [=associated `Document`=].
  4. If |document| is not [=allowed to use=] the [=policy-controlled @@ -337,6 +339,11 @@

    |document|'s [=Document/visibility state=] is "`hidden`", return [=a promise rejected with=] {{"NotAllowedError"}} {{DOMException}}.

    5. +
  5. If |global| does not have [=transient activation=], return [=a + promise rejected with=] {{"NotAllowedError"}} {{DOMException}}. +
    6. +
  6. [=Consume user activation=] of |global|. +
  7. Let |promise:Promise| be [=a new promise=].
  8. Run the following steps in parallel: @@ -782,14 +789,42 @@

    Examples

    - 
    -        function tryKeepScreenAlive(minutes) {
-          navigator.wakeLock.request("screen").then(lock => {
-            setTimeout(() => lock.release(), minutes * 60 * 1000);
-          });
-        }
-
-        tryKeepScreenAlive(10);
+      
    +        <button id="request" onclick="requestWakeLock(this)">
+        Request lock
+        </button>
+        <button id="release" onclick="releaseWakeLock(this)" disabled>
+          Release lock
+        </button>
+        <script>
+          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", () => {
+              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;
+          }
+        </script>
       
    
       
    
         This example allows the user to request a screen wake lock by clicking
@@ -800,21 +835,44 @@ 
    
         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 = () => checkbox.checked = !sentinel.released;
+        let lock = null;
+        checkbox.addEventListener("change", async () => {
+          if (checkbox.checked) {
+            // Acquire lock...
+            lock = await navigator.wakeLock.request("screen");
+            // ...and update checkbox state in case lock is lost.
+            lock.onrelease = () => {
+              if (checkbox.checked) checkbox.checked = false;
+            }
+          } else {
+            await lock?.release();
+            lock = null;
+          }
+        });

    - In this example, two different wake lock requests are created and - released independently: + In this example, independent wake lock are created and released + concurrently:

    - 
    -        let lock1 = await navigator.wakeLock.request("screen");
-        let lock2 = await navigator.wakeLock.request("screen");
+      
    +        <script>
+        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 => lock.release()));
+        }
+        </script>
+        <button onclick="lockScreen()">
+          Lock screen
+        </button>
+        <button onclick="releaseAllLocks()">
+          Release locks
+        </button>
       
    
     
     
    

From f3b0a1c6fc01190d94c18f2135224360eae62a6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcos=20C=C3=A1ceres?= 
Date: Wed, 28 Sep 2022 14:35:20 +1000
Subject: [PATCH 2/3] Update index.html

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 5d1d2a1..257b8e9 100644
--- a/index.html
+++ b/index.html
@@ -851,7 +851,7 @@ 
    
         });

    - In this example, independent wake lock are created and released + In this example, independent wake locks are created and released concurrently: 

    
From 6db34fb9cf50416a59af6d2ac572f0f54069df09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcos=20C=C3=A1ceres?= 
Date: Thu, 29 Sep 2022 09:44:47 +1000
Subject: [PATCH 3/3] Update index.html

---
 index.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/index.html b/index.html
index 257b8e9..4026099 100644
--- a/index.html
+++ b/index.html
@@ -342,8 +342,6 @@ 
    
           
  9. If |global| does not have [=transient activation=], return [=a
           promise rejected with=] {{"NotAllowedError"}} {{DOMException}}.
           
    10. 
-          
  10. [=Consume user activation=] of |global|.
-          
    11. 
           
  11. Let |promise:Promise| be [=a new promise=].
           
    12. 
           
  12. Run the following steps in parallel: