-
Notifications
You must be signed in to change notification settings - Fork 468
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updates for Win32, WPF, WinForms, UWP and WinUI3 sample apps from 130…
….0.2839.0
- Loading branch information
1 parent
d1cf80d
commit 799322c
Showing
7 changed files
with
578 additions
and
320 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
151 changes: 151 additions & 0 deletions
151
SampleApps/WebView2APISample/assets/ScenarioServiceWorkerSyncRegistrationManager.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>ScenarioServiceWorkerSyncRegistrationManager</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h3>Periodic Background Sync Example</h3> | ||
| <h4>Registrations</h4> | ||
| <p id="periodic-sync-registrations"></p> | ||
| <div style="display: inline-block;"> | ||
| <input type="text" placeholder="tag name" id="add-tag1"> | ||
| <input type="text" placeholder="min interval" id="add-interval"> | ||
| <button onclick="registeredSync('periodic-sync')"> Register </button> | ||
| </div> | ||
|
|
||
| <div> | ||
| <input type="text" placeholder="tag name" id="remove-tag1"> | ||
| <button onclick="unregisterSync('periodic-sync')"> Unregister </button> | ||
| </div> | ||
|
|
||
| <div> | ||
| <input type="text" placeholder="tag name" id="dispatch-tag"> | ||
| <button onclick="dispatchPeriodicSyncEvent()"> Dispatch Periodic Sync Task </button> | ||
| </div> | ||
|
|
||
| <div> | ||
| <button onclick="getSyncRegistrationsFromWebView2('periodic-sync')"> Get all Periodic Sync Registrations from WebView2</button> | ||
| </div> | ||
| <hr> | ||
|
|
||
| <h3>Background Sync Example</h3> | ||
| <h4>Registrations</h4> | ||
| <p id="background-sync-registrations"></p> | ||
| <div style="display: inline-block;"> | ||
| <input type="text" placeholder="tag name" id="add-tag2"> | ||
| <button onclick="registeredSync('background-sync')"> Register </button> | ||
| </div> | ||
|
|
||
| <div> | ||
| <input type="text" placeholder="tag name" id="remove-tag2"> | ||
| <button onclick="unregisterSync('background-sync')"> Unregister </button> | ||
| </div> | ||
| <div> | ||
| <button onclick="getSyncRegistrationsFromWebView2('background-sync')"> Get all Background Sync Registrations from WebView2</button> | ||
| </div> | ||
|
|
||
| <script> | ||
| async function checkPermission() { | ||
| const status = await navigator.permissions.query({name: 'periodic-background-sync'}); | ||
| if (status.state === 'granted') { | ||
| console.log("periodic-background-sync permission is granted"); | ||
| } else { | ||
| console.log("periodic-background-sync permission is denied"); | ||
| } | ||
| } | ||
|
|
||
| async function registerServiceWorker() { | ||
| if ('serviceWorker' in navigator) { | ||
| const registration = await navigator.serviceWorker.register( | ||
| 'ScenarioServiceWorkerSyncRegistrationManagerServiceWorker.js', { | ||
| scope: './', | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| async function unregisterSync(type) { | ||
| const registration = await navigator.serviceWorker.ready; | ||
| let tag = document.getElementById("remove-tag1").value; | ||
| if (type === "periodic-sync") { | ||
| if ('periodicSync' in registration) { | ||
| await registration.periodicSync.unregister(tag); | ||
| } | ||
| } else if (type === "background-sync") { | ||
| tag = document.getElementById("remove-tag2").value; | ||
| if ('sync' in registration) { | ||
| await registration.sync.unregister(tag); | ||
| } | ||
| } | ||
| getSyncRegistrations(type); | ||
| } | ||
|
|
||
| async function registeredSync(type) { | ||
| const registration = await navigator.serviceWorker.ready; | ||
| let tag = document.getElementById("add-tag1").value; | ||
| if (type === "periodic-sync") { | ||
| const interval = document.getElementById("add-interval").value; | ||
| if ('periodicSync' in registration) { | ||
| try { | ||
| await registration.periodicSync.register(tag, { minInterval: interval }); | ||
| } catch (error) { | ||
| console.log(error); | ||
| } | ||
| } | ||
| } else if (type === "background-sync") { | ||
| tag = document.getElementById("add-tag2").value; | ||
| if ('sync' in registration) { | ||
| try { | ||
| await registration.sync.register(tag); | ||
| } catch (error) { | ||
| console.log(error); | ||
| } | ||
| } | ||
| } | ||
| getSyncRegistrations(type); | ||
| } | ||
|
|
||
| async function getSyncRegistrations(type) { | ||
| const registration = await navigator.serviceWorker.ready; | ||
| let elementId = "periodic-sync-registrations"; | ||
| let tags; | ||
| if (type === "background-sync") { | ||
| elementId = "background-sync-registrations"; | ||
| tags = await registration.sync.getTags(); | ||
| } else if (type === "periodic-sync") { | ||
| tags = await registration.periodicSync.getTags(); | ||
| } | ||
| var registrations = ""; | ||
| tags.forEach(tag => { | ||
| registrations += "Tag name: "; | ||
| registrations += tag; | ||
| registrations += " "; | ||
| }); | ||
| if (registrations === "") { | ||
| registrations = "empty"; | ||
| } | ||
| document.getElementById(elementId).textContent = registrations; | ||
| } | ||
|
|
||
| async function dispatchPeriodicSyncEvent() { | ||
| const registration = await navigator.serviceWorker.ready; | ||
| const tag = document.getElementById("dispatch-tag").value; | ||
| chrome.webview.postMessage(`DispatchPeriodicSyncEvent ${tag}`); | ||
| } | ||
|
|
||
| async function getSyncRegistrationsFromWebView2(type) { | ||
| if (type === "periodic-sync") { | ||
| chrome.webview.postMessage("GetPeriodicSyncRegistrations"); | ||
| } else if ("background-sync") { | ||
| chrome.webview.postMessage("GetBackgroundSyncRegistrations"); | ||
| } | ||
| } | ||
|
|
||
| checkPermission(); | ||
| registerServiceWorker(); | ||
| getSyncRegistrations("periodic-sync"); | ||
| getSyncRegistrations("background-sync"); | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
12 changes: 12 additions & 0 deletions
12
...pps/WebView2APISample/assets/ScenarioServiceWorkerSyncRegistrationManagerServiceWorker.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| function fetchAndCacheLatestNews() { | ||
| console.log("Fetched news from a server"); | ||
| } | ||
|
|
||
| self.addEventListener("periodicsync", (event) => { | ||
| console.log("Periodic Sync Task Tag: " + event.tag + " executed"); | ||
| event.waitUntil(fetchAndCacheLatestNews()); | ||
| }); | ||
|
|
||
| self.addEventListener("sync", (event) => { | ||
| console.log("Background Sync Task Tag: " + event.tag + " executed"); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.