mirror/godot
2
0
Fork 0
mirror of https://github.com/godotengine/godot.git synced 2025-01-18 20:40:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

[HTML5] PWA service worker prefers cached version.

Browse Source 
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.
This commit is contained in:
Fabio Alessandrelli 2021-12-21 14:41:26 +01:00
parent 95719930a8
commit cc4612277b
4 changed files with 112 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
misc/dist/html/service-worker.js vendored
View File

@ -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);
// 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);
}
}
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;
}
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);
}
});
});

52
platform/javascript/export/export_plugin.cpp
View File

@ -139,8 +139,7 @@ void EditorExportPlatformJavaScript::_fix_html(Vector<uint8_t> &p_html, const Re
}
if (p_preset->get("progressive_web_app/enabled")) {
head_include += "<link rel='manifest' href='" + p_name + ".manifest.json'>\n";
head_include += "<script type='application/javascript'>window.addEventListener('load', () => {if ('serviceWorker' in navigator) {navigator.serviceWorker.register('" +
p_name + ".service.worker.js');}});</script>\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<EditorExportPreset> &p_preset, const String p_path, const Vector<SharedObject> &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<String, String> 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<uint8_t> sw;
@ -256,10 +266,6 @@ Error EditorExportPlatformJavaScript::_build_pwa(const Ref<EditorExportPreset> &
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]);

8
platform/javascript/js/engine/config.js
View File

@ -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.<string>}
@ -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);

3
platform/javascript/js/engine/engine.js
View File

@ -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();
});
});