diff --git a/misc/dist/html/full-size.html b/misc/dist/html/full-size.html
index 54571e27c7b8..8ae25362f8d8 100644
--- a/misc/dist/html/full-size.html
+++ b/misc/dist/html/full-size.html
@@ -218,8 +218,29 @@
threads: GODOT_THREADS_ENABLED,
});
if (missing.length !== 0) {
- const missingMsg = 'Error\nThe following features required to run Godot projects on the Web are missing:\n';
- displayFailureNotice(missingMsg + missing.join('\n'));
+ if (GODOT_CONFIG['serviceWorker'] && GODOT_CONFIG['ensureCrossOriginIsolationHeaders'] && 'serviceWorker' in navigator) {
+ // There's a chance that installing the service worker would fix the issue
+ Promise.race([
+ navigator.serviceWorker.getRegistration().then((registration) => {
+ if (registration != null) {
+ return Promise.reject(new Error('Service worker already exists.'));
+ }
+ return registration;
+ }).then(() => engine.installServiceWorker()),
+ // For some reason, `getRegistration()` can stall
+ new Promise((resolve) => {
+ setTimeout(() => resolve(), 2000);
+ }),
+ ]).catch((err) => {
+ console.error('Error while registering service worker:', err);
+ }).then(() => {
+ window.location.reload();
+ });
+ } else {
+ // Display the message as usual
+ const missingMsg = 'Error\nThe following features required to run Godot projects on the Web are missing:\n';
+ displayFailureNotice(missingMsg + missing.join('\n'));
+ }
} else {
setStatusMode('indeterminate');
engine.startGame({
diff --git a/misc/dist/html/service-worker.js b/misc/dist/html/service-worker.js
index 70e7a399e114..a5da7482f441 100644
--- a/misc/dist/html/service-worker.js
+++ b/misc/dist/html/service-worker.js
@@ -3,101 +3,163 @@
// that they need an Internet connection to run the project if desired.
// 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_PREFIX = "___GODOT_NAME___-sw-cache-";
+/** @type {string} */
+const CACHE_VERSION = '___GODOT_VERSION___';
+/** @type {string} */
+const CACHE_PREFIX = '___GODOT_NAME___-sw-cache-';
const CACHE_NAME = CACHE_PREFIX + CACHE_VERSION;
-const OFFLINE_URL = "___GODOT_OFFLINE_PAGE___";
+/** @type {string} */
+const OFFLINE_URL = '___GODOT_OFFLINE_PAGE___';
+/** @type {boolean} */
+const ENSURE_CROSSORIGIN_ISOLATION_HEADERS = ___GODOT_ENSURE_CROSSORIGIN_ISOLATION_HEADERS___;
// Files that will be cached on load.
+/** @type {string[]} */
const CACHED_FILES = ___GODOT_CACHE___;
// Files that we might not want the user to preload, and will only be cached on first load.
+/** @type {string[]} */
const CACHABLE_FILES = ___GODOT_OPT_CACHE___;
const FULL_CACHE = CACHED_FILES.concat(CACHABLE_FILES);
-self.addEventListener("install", (event) => {
- event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(CACHED_FILES)));
+self.addEventListener('install', (event) => {
+ event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(CACHED_FILES)));
});
-self.addEventListener("activate", (event) => {
+self.addEventListener('activate', (event) => {
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();
- })
- );
+ 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) {
+/**
+ * Ensures that the response has the correct COEP/COOP headers
+ * @param {Response} response
+ * @returns {Response}
+ */
+function ensureCrossOriginIsolationHeaders(response) {
+ if (response.headers.get('Cross-Origin-Embedder-Policy') === 'require-corp'
+ && response.headers.get('Cross-Origin-Opener-Policy') === 'same-origin') {
+ return response;
+ }
+
+ const crossOriginIsolatedHeaders = new Headers(response.headers);
+ crossOriginIsolatedHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
+ crossOriginIsolatedHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
+ const newResponse = new Response(response.body, {
+ status: response.status,
+ statusText: response.statusText,
+ headers: crossOriginIsolatedHeaders,
+ });
+
+ return newResponse;
+}
+
+/**
+ * Calls fetch and cache the result if it is cacheable
+ * @param {FetchEvent} event
+ * @param {Cache} cache
+ * @param {boolean} isCacheable
+ * @returns {Response}
+ */
+async function fetchAndCache(event, cache, isCacheable) {
// Use the preloaded response, if it's there
+ /** @type { Response } */
let response = await event.preloadResponse;
- if (!response) {
+ if (response == null) {
// Or, go over network.
response = await self.fetch(event.request);
}
- if (isCachable) {
+
+ if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+ response = ensureCrossOriginIsolationHeaders(response);
+ }
+
+ if (isCacheable) {
// 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 || "";
- const referrer = event.request.referrer || "";
- const base = referrer.slice(0, referrer.lastIndexOf("/") + 1);
- const local = url.startsWith(base) ? url.replace(base, "") : "";
- const isCachable = FULL_CACHE.some(v => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
- if (isNavigate || isCachable) {
- event.respondWith(async function () {
- // 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);
+self.addEventListener(
+ 'fetch',
+ /**
+ * Triggered on fetch
+ * @param {FetchEvent} event
+ */
+ (event) => {
+ const isNavigate = event.request.mode === 'navigate';
+ const url = event.request.url || '';
+ const referrer = event.request.referrer || '';
+ const base = referrer.slice(0, referrer.lastIndexOf('/') + 1);
+ const local = url.startsWith(base) ? url.replace(base, '') : '';
+ const isCachable = FULL_CACHE.some((v) => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
+ if (isNavigate || isCachable) {
+ event.respondWith((async () => {
+ // Try to use cache first
+ const cache = await caches.open(CACHE_NAME);
+ if (isNavigate) {
+ // Check if we have full cache during HTML page request.
+ /** @type {Response[]} */
+ 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).
+ const response = await fetchAndCache(event, cache, isCachable);
+ return response;
+ } catch (e) {
+ // And return the hopefully always cached offline page in case of network failure.
+ console.error('Network error: ', e); // eslint-disable-line no-console
+ return caches.match(OFFLINE_URL);
+ }
}
}
- }
- const cached = await cache.match(event.request);
- if (cached) {
- return cached;
- } else {
+ let cached = await cache.match(event.request);
+ if (cached != null) {
+ if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+ cached = ensureCrossOriginIsolationHeaders(cached);
+ }
+ return cached;
+ }
// Try network if don't have it in cache.
- return await fetchAndCache(event, cache, isCachable);
- }
- }());
+ const response = await fetchAndCache(event, cache, isCachable);
+ return response;
+ })());
+ } else if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+ event.respondWith((async () => {
+ let response = await fetch(event.request);
+ response = ensureCrossOriginIsolationHeaders(response);
+ return response;
+ })());
+ }
}
-});
+);
-self.addEventListener("message", (event) => {
+self.addEventListener('message', (event) => {
// No cross origin
- if (event.origin != self.origin) {
+ if (event.origin !== self.origin) {
return;
}
- const id = event.source.id || "";
- const msg = event.data || "";
+ 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") {
+ if (msg === 'claim') {
self.skipWaiting().then(() => self.clients.claim());
- } else if (msg === "clear") {
+ } 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 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/web/.eslintrc.sw.js b/platform/web/.eslintrc.sw.js
new file mode 100644
index 000000000000..cba9ed8001c2
--- /dev/null
+++ b/platform/web/.eslintrc.sw.js
@@ -0,0 +1,14 @@
+module.exports = {
+ "extends": [
+ "./.eslintrc.js",
+ ],
+ "rules": {
+ "no-restricted-globals": 0,
+ },
+ "globals": {
+ "onClientMessage": true,
+ "___GODOT_ENSURE_CROSSORIGIN_ISOLATION_HEADERS___": true,
+ "___GODOT_CACHE___": true,
+ "___GODOT_OPT_CACHE___": true,
+ },
+};
diff --git a/platform/web/doc_classes/EditorExportPlatformWeb.xml b/platform/web/doc_classes/EditorExportPlatformWeb.xml
index f07f265b0d58..37cdd9ab8e6a 100644
--- a/platform/web/doc_classes/EditorExportPlatformWeb.xml
+++ b/platform/web/doc_classes/EditorExportPlatformWeb.xml
@@ -35,6 +35,10 @@
+
+ When enabled, the progressive web app will make sure that each request has cross-origin isolation headers (COEP/COOP).
+ This can simplify the setup to serve the exported game.
+
diff --git a/platform/web/export/export_plugin.cpp b/platform/web/export/export_plugin.cpp
index 706bfca8ba4b..41c969b5f4ab 100644
--- a/platform/web/export/export_plugin.cpp
+++ b/platform/web/export/export_plugin.cpp
@@ -150,6 +150,7 @@ void EditorExportPlatformWeb::_fix_html(Vector &p_html, const Refget("progressive_web_app/ensure_cross_origin_isolation_headers");
String head_include;
if (p_preset->get("html/export_icon")) {
@@ -222,10 +223,12 @@ Error EditorExportPlatformWeb::_build_pwa(const Ref &p_prese
const String dir = p_path.get_base_dir();
const String name = p_path.get_file().get_basename();
bool extensions = (bool)p_preset->get("variant/extensions_support");
+ bool ensure_crossorigin_isolation_headers = (bool)p_preset->get("progressive_web_app/ensure_cross_origin_isolation_headers");
HashMap replaces;
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";
+ replaces["___GODOT_ENSURE_CROSSORIGIN_ISOLATION_HEADERS___"] = ensure_crossorigin_isolation_headers ? "true" : "false";
// Files cached during worker install.
Array cache_files;
@@ -353,6 +356,7 @@ void EditorExportPlatformWeb::get_export_options(List *r_options)
r_options->push_back(ExportOption(PropertyInfo(Variant::BOOL, "html/focus_canvas_on_start"), true));
r_options->push_back(ExportOption(PropertyInfo(Variant::BOOL, "html/experimental_virtual_keyboard"), false));
r_options->push_back(ExportOption(PropertyInfo(Variant::BOOL, "progressive_web_app/enabled"), false));
+ r_options->push_back(ExportOption(PropertyInfo(Variant::BOOL, "progressive_web_app/ensure_cross_origin_isolation_headers"), true));
r_options->push_back(ExportOption(PropertyInfo(Variant::STRING, "progressive_web_app/offline_page", PROPERTY_HINT_FILE, "*.html"), ""));
r_options->push_back(ExportOption(PropertyInfo(Variant::INT, "progressive_web_app/display", PROPERTY_HINT_ENUM, "Fullscreen,Standalone,Minimal UI,Browser"), 1));
r_options->push_back(ExportOption(PropertyInfo(Variant::INT, "progressive_web_app/orientation", PROPERTY_HINT_ENUM, "Any,Landscape,Portrait"), 0));
diff --git a/platform/web/js/engine/engine.js b/platform/web/js/engine/engine.js
index 3d6720a2fcac..7e24ad9ae232 100644
--- a/platform/web/js/engine/engine.js
+++ b/platform/web/js/engine/engine.js
@@ -179,9 +179,7 @@ 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);
- }
+ me.installServiceWorker();
resolve();
});
});
@@ -242,6 +240,17 @@ const Engine = (function () {
this.rtenv['request_quit']();
}
},
+
+ /**
+ * Install the progressive-web app service worker.
+ * @returns {Promise} The service worker registration promise.
+ */
+ installServiceWorker: function () {
+ if (this.config.serviceWorker && 'serviceWorker' in navigator) {
+ return navigator.serviceWorker.register(this.config.serviceWorker);
+ }
+ return Promise.resolve();
+ },
};
Engine.prototype = proto;
@@ -252,6 +261,7 @@ const Engine = (function () {
Engine.prototype['startGame'] = Engine.prototype.startGame;
Engine.prototype['copyToFS'] = Engine.prototype.copyToFS;
Engine.prototype['requestQuit'] = Engine.prototype.requestQuit;
+ Engine.prototype['installServiceWorker'] = Engine.prototype.installServiceWorker;
// Also expose static methods as instance methods
Engine.prototype['load'] = Engine.load;
Engine.prototype['unload'] = Engine.unload;
diff --git a/platform/web/package.json b/platform/web/package.json
index 5da0e2a76bf3..4e17cd530b82 100644
--- a/platform/web/package.json
+++ b/platform/web/package.json
@@ -5,18 +5,20 @@
"description": "Development and linting setup for Godot's Web platform code",
"scripts": {
"docs": "jsdoc --template js/jsdoc2rst/ js/engine/engine.js js/engine/config.js js/engine/features.js --destination ''",
- "lint": "npm run lint:engine && npm run lint:libs && npm run lint:modules && npm run lint:tools && npm run lint:html",
+ "lint": "npm run lint:engine && npm run lint:libs && npm run lint:modules && npm run lint:tools && npm run lint:sw && npm run lint:html",
"lint:engine": "eslint \"js/engine/*.js\" --no-eslintrc -c .eslintrc.engine.js",
+ "lint:sw": "eslint \"../../misc/dist/html/service-worker.js\" --no-eslintrc -c .eslintrc.sw.js",
"lint:libs": "eslint \"js/libs/*.js\" --no-eslintrc -c .eslintrc.libs.js",
"lint:modules": "eslint \"../../modules/**/*.js\" --no-eslintrc -c .eslintrc.libs.js",
"lint:tools": "eslint \"js/jsdoc2rst/**/*.js\" --no-eslintrc -c .eslintrc.engine.js",
"lint:html": "eslint \"../../misc/dist/html/*.html\" --no-eslintrc -c .eslintrc.html.js",
- "format": "npm run format:engine && npm run format:libs && npm run format:modules && npm run format:tools && npm run format:html",
+ "format": "npm run format:engine && npm run format:libs && npm run format:modules && npm run format:tools && format:sw && npm run format:html",
"format:engine": "npm run lint:engine -- --fix",
"format:libs": "npm run lint:libs -- --fix",
"format:modules": "npm run lint:modules -- --fix",
"format:tools": "npm run lint:tools -- --fix",
- "format:html": "npm run lint:html -- --fix"
+ "format:html": "npm run lint:html -- --fix",
+ "format:sw": "npm run lint:sw -- --fix"
},
"author": "Godot Engine contributors",
"license": "MIT",