|
| 1 | +/* |
| 2 | + * TERMS OF USE: MIT License |
| 3 | + * |
| 4 | + * Permission is hereby granted, free of charge, to any person obtaining a |
| 5 | + * copy of this software and associated documentation files (the "Software"), |
| 6 | + * to deal in the Software without restriction, including without limitation |
| 7 | + * the rights to use, copy, modify, merge, publish, distribute, sublicense, |
| 8 | + * and/or sell copies of the Software, and to permit persons to whom the |
| 9 | + * Software is furnished to do so, subject to the following conditions: |
| 10 | + * |
| 11 | + * The above copyright notice and this permission notice shall be included in |
| 12 | + * all copies or substantial portions of the Software. |
| 13 | + * |
| 14 | + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 15 | + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 16 | + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFINGEMENT. IN NO EVENT SHALL |
| 17 | + * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 18 | + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
| 19 | + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER |
| 20 | + * DEALINGS IN THE SOFTWARE. |
| 21 | + */ |
| 22 | + |
| 23 | +import {initToolbarIcons} from './modules/load_images'; |
| 24 | +import {Workbox} from 'workbox-window'; |
| 25 | +import {logConsoleMessage} from './modules/utility'; |
| 26 | + |
| 27 | + |
| 28 | +/** |
| 29 | + * Initialize deferredPrompt for use later to show browser install prompt. |
| 30 | +* @type {BeforeInstallPromptEvent} |
| 31 | + */ |
| 32 | +export let deferredPrompt; |
| 33 | + |
| 34 | +/** |
| 35 | + * Flag to indicate that the app is installed and active. |
| 36 | + * @type {boolean} |
| 37 | + */ |
| 38 | +export let pwaActive = false; |
| 39 | + |
| 40 | + |
| 41 | +// Load the service worker if the browser supports it. |
| 42 | +if ("serviceWorker" in navigator) { |
| 43 | + // Register the service worker only after the page load is complete. This |
| 44 | + // will ensure that all page assets have been loaded before the service worker |
| 45 | + // is registered. The service worker will begin loading assets into a local |
| 46 | + // cache once it is registered. |
| 47 | + window.addEventListener("load", () => { |
| 48 | + logConsoleMessage(`Page has been loaded. Register the root service worker.`) |
| 49 | + // Do nothing if the app is already installed |
| 50 | + if (pwaActive) { |
| 51 | + return; |
| 52 | + } |
| 53 | + |
| 54 | + const installButtonElement = document.getElementById('btn-install-pwa'); |
| 55 | + let wb = null; |
| 56 | + |
| 57 | + pwaBeforeInstall(); |
| 58 | + |
| 59 | + try { |
| 60 | + logConsoleMessage(`Newing a WorkBox object`); |
| 61 | + wb = new Workbox("./sw.js"); |
| 62 | + logConsoleMessage(`Workbox object created`); |
| 63 | + } catch (err) { |
| 64 | + logConsoleMessage(`Workbox init failed: ${err.message}`); |
| 65 | + return; |
| 66 | + } |
| 67 | + |
| 68 | + installButtonElement.addEventListener('click', async () => { |
| 69 | + console.log(`User clicked the install app button.`) |
| 70 | + |
| 71 | + // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent` |
| 72 | + deferredPrompt.prompt(); |
| 73 | + |
| 74 | + // Find out whether the user confirmed the installation or not |
| 75 | + const {outcome} = await deferredPrompt.userChoice; |
| 76 | + |
| 77 | + // The deferredPrompt can only be used once. |
| 78 | + deferredPrompt = null; |
| 79 | + |
| 80 | + // Act on the user's choice |
| 81 | + if (outcome === 'accepted') { |
| 82 | + console.log('User accepted the install prompt.'); |
| 83 | + } else if (outcome === 'dismissed') { |
| 84 | + console.log('User dismissed the install prompt'); |
| 85 | + } |
| 86 | + |
| 87 | + // Hide the 'Install' button |
| 88 | + pwaInstallButton(false); |
| 89 | + }); |
| 90 | + |
| 91 | + // Fires when the registered service worker has installed but is waiting to activate. |
| 92 | + wb.addEventListener("waiting", (event) => { |
| 93 | + logConsoleMessage(`Service worker is installed but waiting to activate...`); |
| 94 | + logConsoleMessage(`Waiting event: ${event}`); |
| 95 | + |
| 96 | + // Hide the 'install' button |
| 97 | + pwaInstallButton(false); |
| 98 | + |
| 99 | + const button = document.getElementById('btn-install-pwa'); |
| 100 | + button.addEventListener("click", (event) => { |
| 101 | + console.log(`Install button clicked.`, event) |
| 102 | + |
| 103 | + // Set up a listener that will reload the page as soon as the previously |
| 104 | + // waiting service worker has taken control. |
| 105 | + wb.addEventListener("controlling", () => { |
| 106 | + window.location.reload(); |
| 107 | + }); |
| 108 | + |
| 109 | + // Send a message telling the service worker to skip waiting. |
| 110 | + // This will trigger the `controlling` event handler above. |
| 111 | + wb.messageSW({type: "SKIP_WAITING"}); |
| 112 | + |
| 113 | + // It may seem that this is the same as registering a service worker yourself using |
| 114 | + // navigator.serviceWorker.register. However, Workbox.register takes care of waiting |
| 115 | + // until the window load event before registering the service worker. This is desirable |
| 116 | + // in situations where precaching is involved so bandwidth contention that may delay |
| 117 | + // page startup can be avoided. |
| 118 | + wb.register(); |
| 119 | + }); |
| 120 | + }); |
| 121 | + |
| 122 | + // Intercept the browser's prompt to install the application |
| 123 | +// |
| 124 | +// The 'beforeinstallprompt' event fires on devices when a user is about to |
| 125 | +// be prompted to "install" a web application. It may be saved for later |
| 126 | +// and used to prompt the user at a more suitable time. |
| 127 | +// |
| 128 | +// Here, the event details are stored in a global variable, deferredPrompt, |
| 129 | +// that will be referenced later. |
| 130 | +// ---------------------------------------------------------------------------- |
| 131 | + window.addEventListener('beforeinstallprompt', (e) => { |
| 132 | + console.log(`Before install prompt fires...`); |
| 133 | + |
| 134 | + // Log the platforms that the beforeinstallprompt event was sent to. |
| 135 | + // The platforms property is an array of strings. Typically, it should |
| 136 | + // contain a single element, 'web', when the site is viewed from a web |
| 137 | + // browser. |
| 138 | + console.log(`Platforms: ${e.platforms}`); |
| 139 | + |
| 140 | + // Prevent the mini-info bar from appearing on mobile |
| 141 | + e.preventDefault(); |
| 142 | + |
| 143 | + // Stash the event so it can be triggered later. |
| 144 | + deferredPrompt = e; |
| 145 | + |
| 146 | + // Update UI notify the user they can install the PWA |
| 147 | + // showInstallPromotion(); |
| 148 | + |
| 149 | + return false; |
| 150 | + }); |
| 151 | + }); |
| 152 | +} |
| 153 | + |
| 154 | +/** |
| 155 | + * Install listener for the 'beforeinstallprompt' event. |
| 156 | + * @param {HTMLElement} button |
| 157 | + */ |
| 158 | +function pwaBeforeInstall() { |
| 159 | + window.addEventListener('beforeinstallprompt', (event) => { |
| 160 | + console.log(`BeforeInstallPrompt...`) |
| 161 | + |
| 162 | + // Prevent the mini-info bar from appearing on mobile. |
| 163 | + event.preventDefault(); |
| 164 | + |
| 165 | + // Stash the event so it can be triggered later. |
| 166 | + window.deferredPrompt = event; |
| 167 | + |
| 168 | + // Remove the 'hidden' class from the 'install' button container. |
| 169 | + console.log(`Show the install button on the toolbar`) |
| 170 | + |
| 171 | + // Temporarily disable the 'install' button while the details of updating |
| 172 | + // a pwa are addressed. |
| 173 | + // pwaInstallButton(true); |
| 174 | + pwaInstallButton(false); |
| 175 | + }); |
| 176 | +} |
| 177 | + |
| 178 | +function showInstallPromotion() { |
| 179 | + console.log(`Prompt the user to install the application.`) |
| 180 | +} |
| 181 | + |
| 182 | +/** |
| 183 | + * Unregister the application from the browser. |
| 184 | + */ |
| 185 | +function serviceWorkerUnregister() { |
| 186 | + navigator.serviceWorker.getRegistrations() |
| 187 | + .then(function(registrations) { |
| 188 | + for(let registration of registrations) { |
| 189 | + registration.unregister() |
| 190 | + } |
| 191 | + }); |
| 192 | +} |
| 193 | + |
| 194 | +/** |
| 195 | + * Set the state of the PWA installation button |
| 196 | + * @param {boolean} enable |
| 197 | + */ |
| 198 | +export function pwaInstallButton(enable) { |
| 199 | + const installButtonElement = document.getElementById('btn-install-pwa'); |
| 200 | + if (enable) { |
| 201 | + logConsoleMessage(`Showing PWA Install button`); |
| 202 | + installButtonElement.classList.remove("hidden"); |
| 203 | + } else { |
| 204 | + logConsoleMessage(`Hiding PWA Install button`); |
| 205 | + installButtonElement.classList.add("hidden"); |
| 206 | + } |
| 207 | +} |
| 208 | + |
| 209 | + |
| 210 | +/** |
| 211 | + * Set the state of the PWA update button |
| 212 | + * @param {boolean} enable |
| 213 | + */ |
| 214 | +function pwaUpdateButton(enable) { |
| 215 | + |
| 216 | +} |
| 217 | + |
| 218 | + |
| 219 | +function getPWADisplayMode() { |
| 220 | + const isStandalone = window.matchMedia('(display-mode: standalone)').matches; |
| 221 | + if (document.referrer.startsWith('android-app://')) { |
| 222 | + return 'twa'; |
| 223 | + } else if (navigator.standalone || isStandalone) { |
| 224 | + return 'standalone'; |
| 225 | + } |
| 226 | + return 'browser'; |
| 227 | +} |
| 228 | + |
| 229 | +initToolbarIcons(); |
| 230 | + |
| 231 | +logConsoleMessage(`Starting the editor...`); |
| 232 | + |
| 233 | +import './modules/editor'; |
0 commit comments