From cc4612277be252ca7b0b3b718a6142d4e01a6093 Mon Sep 17 00:00:00 2001 From: Fabio Alessandrelli Date: Tue, 21 Dec 2021 14:41:26 +0100 Subject: [HTML5] PWA service worker prefers cached version. Use an offline first approach, where we prefer the cached version over the network one. This forces games using PWA to always re-export the project and not just the PCK, so that the service worker version gets updated correctly, and the end-user cache is correctly cleared on update. --- misc/dist/html/service-worker.js | 112 +++++++++++++++++---------- platform/javascript/export/export_plugin.cpp | 52 +++++++------ platform/javascript/js/engine/config.js | 8 ++ platform/javascript/js/engine/engine.js | 3 + 4 files changed, 112 insertions(+), 63 deletions(-) diff --git a/misc/dist/html/service-worker.js b/misc/dist/html/service-worker.js index 063e40a6cb..310574f21d 100644 --- a/misc/dist/html/service-worker.js +++ b/misc/dist/html/service-worker.js @@ -4,7 +4,8 @@ // Incrementing CACHE_VERSION will kick off the install event and force // previously cached resources to be updated from the network. const CACHE_VERSION = "@GODOT_VERSION@"; -const CACHE_NAME = "@GODOT_NAME@-cache"; +const CACHE_PREFIX = "@GODOT_NAME@-sw-cache-"; +const CACHE_NAME = CACHE_PREFIX + CACHE_VERSION; const OFFLINE_URL = "@GODOT_OFFLINE_PAGE@"; // Files that will be cached on load. const CACHED_FILES = @GODOT_CACHE@; @@ -13,26 +14,35 @@ const CACHABLE_FILES = @GODOT_OPT_CACHE@; const FULL_CACHE = CACHED_FILES.concat(CACHABLE_FILES); self.addEventListener("install", (event) => { - event.waitUntil(async function () { - const cache = await caches.open(CACHE_NAME); - // Clear old cache (including optionals). - await Promise.all(FULL_CACHE.map(path => cache.delete(path))); - // Insert new one. - const done = await cache.addAll(CACHED_FILES); - return done; - }()); + event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(CACHED_FILES))); }); self.addEventListener("activate", (event) => { - event.waitUntil(async function () { - if ("navigationPreload" in self.registration) { - await self.registration.navigationPreload.enable(); - } - }()); - // Tell the active service worker to take control of the page immediately. - self.clients.claim(); + event.waitUntil(caches.keys().then( + function (keys) { + // Remove old caches. + return Promise.all(keys.filter(key => key.startsWith(CACHE_PREFIX) && key != CACHE_NAME).map(key => caches.delete(key))); + }).then(function() { + // Enable navigation preload if available. + return ("navigationPreload" in self.registration) ? self.registration.navigationPreload.enable() : Promise.resolve(); + }) + ); }); +async function fetchAndCache(event, cache, isCachable) { + // Use the preloaded response, if it's there + let response = await event.preloadResponse; + if (!response) { + // Or, go over network. + response = await self.fetch(event.request); + } + if (isCachable) { + // And update the cache + cache.put(event.request, response.clone()); + } + return response; +} + self.addEventListener("fetch", (event) => { const isNavigate = event.request.mode === "navigate"; const url = event.request.url || ""; @@ -42,32 +52,54 @@ self.addEventListener("fetch", (event) => { const isCachable = FULL_CACHE.some(v => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0])); if (isNavigate || isCachable) { event.respondWith(async function () { - try { - // Use the preloaded response, if it's there - let request = event.request.clone(); - let response = await event.preloadResponse; - if (!response) { - // Or, go over network. - response = await fetch(event.request); - } - if (isCachable) { - // Update the cache - const cache = await caches.open(CACHE_NAME); - cache.put(request, response.clone()); - } - return response; - } catch (error) { - const cache = await caches.open(CACHE_NAME); - if (event.request.mode === "navigate") { - // Check if we have full cache. - const cached = await Promise.all(FULL_CACHE.map(name => cache.match(name))); - const missing = cached.some(v => v === undefined); - const cachedResponse = missing ? await caches.match(OFFLINE_URL) : await caches.match(CACHED_FILES[0]); - return cachedResponse; + // Try to use cache first + const cache = await caches.open(CACHE_NAME); + if (event.request.mode === "navigate") { + // Check if we have full cache during HTML page request. + const fullCache = await Promise.all(FULL_CACHE.map(name => cache.match(name))); + const missing = fullCache.some(v => v === undefined); + if (missing) { + try { + // Try network if some cached file is missing (so we can display offline page in case). + return await fetchAndCache(event, cache, isCachable); + } catch (e) { + // And return the hopefully always cached offline page in case of network failure. + console.error("Network error: ", e); + return await caches.match(OFFLINE_URL); + } } - const cachedResponse = await caches.match(event.request); - return cachedResponse; + } + const cached = await cache.match(event.request); + if (cached) { + return cached; + } else { + // Try network if don't have it in cache. + return await fetchAndCache(event, cache, isCachable); } }()); } }); + +self.addEventListener("message", (event) => { + // No cross origin + if (event.origin != self.origin) { + return; + } + const id = event.source.id || ""; + const msg = event.data || ""; + // Ensure it's one of our clients. + self.clients.get(id).then(function (client) { + if (!client) { + return; // Not a valid client. + } + if (msg === "claim") { + self.skipWaiting().then(() => self.clients.claim()); + } else if (msg === "clear") { + caches.delete(CACHE_NAME); + } else if (msg === "update") { + self.skipWaiting().then(() => self.clients.claim()).then(() => self.clients.matchAll()).then(all => all.forEach(c => c.navigate(c.url))); + } else { + onClientMessage(event); + } + }); +}); diff --git a/platform/javascript/export/export_plugin.cpp b/platform/javascript/export/export_plugin.cpp index 92826630b4..d4c198d631 100644 --- a/platform/javascript/export/export_plugin.cpp +++ b/platform/javascript/export/export_plugin.cpp @@ -139,8 +139,7 @@ void EditorExportPlatformJavaScript::_fix_html(Vector &p_html, const Re } if (p_preset->get("progressive_web_app/enabled")) { head_include += "\n"; - head_include += "\n"; + config["serviceWorker"] = p_name + ".service.worker.js"; } // Replaces HTML string @@ -188,35 +187,46 @@ Error EditorExportPlatformJavaScript::_add_manifest_icon(const String &p_path, c } Error EditorExportPlatformJavaScript::_build_pwa(const Ref &p_preset, const String p_path, const Vector &p_shared_objects) { + String proj_name = ProjectSettings::get_singleton()->get_setting("application/config/name"); + if (proj_name.is_empty()) { + proj_name = "Godot Game"; + } + // Service worker const String dir = p_path.get_base_dir(); const String name = p_path.get_file().get_basename(); const ExportMode mode = (ExportMode)(int)p_preset->get("variant/export_type"); Map replaces; - replaces["@GODOT_VERSION@"] = "1"; - replaces["@GODOT_NAME@"] = name; + replaces["@GODOT_VERSION@"] = String::num_int64(OS::get_singleton()->get_unix_time()) + "|" + String::num_int64(OS::get_singleton()->get_ticks_usec()); + replaces["@GODOT_NAME@"] = proj_name.substr(0, 16); replaces["@GODOT_OFFLINE_PAGE@"] = name + ".offline.html"; - Array files; - replaces["@GODOT_OPT_CACHE@"] = Variant(files).to_json_string(); - files.push_back(name + ".html"); - files.push_back(name + ".js"); - files.push_back(name + ".wasm"); - files.push_back(name + ".pck"); - files.push_back(name + ".offline.html"); + + // Files cached during worker install. + Array cache_files; + cache_files.push_back(name + ".html"); + cache_files.push_back(name + ".js"); + cache_files.push_back(name + ".offline.html"); if (p_preset->get("html/export_icon")) { - files.push_back(name + ".icon.png"); - files.push_back(name + ".apple-touch-icon.png"); + cache_files.push_back(name + ".icon.png"); + cache_files.push_back(name + ".apple-touch-icon.png"); } if (mode == EXPORT_MODE_THREADS) { - files.push_back(name + ".worker.js"); - files.push_back(name + ".audio.worklet.js"); - } else if (mode == EXPORT_MODE_GDNATIVE) { - files.push_back(name + ".side.wasm"); + cache_files.push_back(name + ".worker.js"); + cache_files.push_back(name + ".audio.worklet.js"); + } + replaces["@GODOT_CACHE@"] = Variant(cache_files).to_json_string(); + + // Heavy files that are cached on demand. + Array opt_cache_files; + opt_cache_files.push_back(name + ".wasm"); + opt_cache_files.push_back(name + ".pck"); + if (mode == EXPORT_MODE_GDNATIVE) { + opt_cache_files.push_back(name + ".side.wasm"); for (int i = 0; i < p_shared_objects.size(); i++) { - files.push_back(p_shared_objects[i].path.get_file()); + opt_cache_files.push_back(p_shared_objects[i].path.get_file()); } } - replaces["@GODOT_CACHE@"] = Variant(files).to_json_string(); + replaces["@GODOT_OPT_CACHE@"] = Variant(opt_cache_files).to_json_string(); const String sw_path = dir.plus_file(name + ".service.worker.js"); Vector sw; @@ -256,10 +266,6 @@ Error EditorExportPlatformJavaScript::_build_pwa(const Ref & const int orientation = CLAMP(int(p_preset->get("progressive_web_app/orientation")), 0, 3); Dictionary manifest; - String proj_name = ProjectSettings::get_singleton()->get_setting("application/config/name"); - if (proj_name.is_empty()) { - proj_name = "Godot Game"; - } manifest["name"] = proj_name; manifest["start_url"] = "./" + name + ".html"; manifest["display"] = String::utf8(modes[display]); diff --git a/platform/javascript/js/engine/config.js b/platform/javascript/js/engine/config.js index a6f9c4614c..2e5e1ed0d1 100644 --- a/platform/javascript/js/engine/config.js +++ b/platform/javascript/js/engine/config.js @@ -106,6 +106,13 @@ const InternalConfig = function (initConfig) { // eslint-disable-line no-unused- * @default */ experimentalVK: false, + /** + * The progressive web app service worker to install. + * @memberof EngineConfig + * @default + * @type {string} + */ + serviceWorker: '', /** * @ignore * @type {Array.} @@ -249,6 +256,7 @@ const InternalConfig = function (initConfig) { // eslint-disable-line no-unused- this.persistentDrops = parse('persistentDrops', this.persistentDrops); this.experimentalVK = parse('experimentalVK', this.experimentalVK); this.focusCanvas = parse('focusCanvas', this.focusCanvas); + this.serviceWorker = parse('serviceWorker', this.serviceWorker); this.gdnativeLibs = parse('gdnativeLibs', this.gdnativeLibs); this.fileSizes = parse('fileSizes', this.fileSizes); this.args = parse('args', this.args); diff --git a/platform/javascript/js/engine/engine.js b/platform/javascript/js/engine/engine.js index 17a8df9e29..d2ba595083 100644 --- a/platform/javascript/js/engine/engine.js +++ b/platform/javascript/js/engine/engine.js @@ -189,6 +189,9 @@ const Engine = (function () { preloader.preloadedFiles.length = 0; // Clear memory me.rtenv['callMain'](me.config.args); initPromise = null; + if (me.config.serviceWorker && 'serviceWorker' in navigator) { + navigator.serviceWorker.register(me.config.serviceWorker); + } resolve(); }); }); -- cgit v1.2.3 From 3cc72ac03f6d7254220b17e23384196112c60192 Mon Sep 17 00:00:00 2001 From: Fabio Alessandrelli Date: Mon, 31 Jan 2022 15:19:25 +0100 Subject: [HTML5] Improve editor progressive web app behavior. Ensures early claim for aggressive caching. Adds a button to update when it detects a new version asking confirmation due to the necessary reload. --- misc/dist/html/editor.html | 36 +++++++++++++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html index a681a2a1c3..9e03f50c37 100644 --- a/misc/dist/html/editor.html +++ b/misc/dist/html/editor.html @@ -265,6 +265,7 @@ +
@@ -324,10 +325,39 @@
- + //]]>