summaryrefslogtreecommitdiff
path: root/misc/dist/html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/dist/html')
-rw-r--r--misc/dist/html/editor.html95
-rw-r--r--misc/dist/html/manifest.json3
-rw-r--r--misc/dist/html/offline.html2
-rw-r--r--misc/dist/html/service-worker.js112
4 files changed, 159 insertions, 53 deletions
diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
index 8b077a5725..7c44dd45a1 100644
--- a/misc/dist/html/editor.html
+++ b/misc/dist/html/editor.html
@@ -9,8 +9,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="application-name" content="Godot" />
<meta name="apple-mobile-web-app-title" content="Godot" />
- <meta name="theme-color" content="#478cbf" />
- <meta name="msapplication-navbutton-color" content="#478cbf" />
+ <meta name="theme-color" content="#202531" />
+ <meta name="msapplication-navbutton-color" content="#202531" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="msapplication-starturl" content="/latest" />
<meta property="og:site_name" content="Godot Engine Web Editor" />
@@ -68,6 +68,11 @@
height: 100%;
overflow: auto;
background-color: hsla(0, 0%, 0%, 0.5);
+ text-align: left;
+ }
+
+ .welcome-modal-title {
+ text-align: center;
}
.welcome-modal-content {
@@ -238,7 +243,7 @@
onclick="if (event.target === this) closeWelcomeModal(false)"
>
<div class="welcome-modal-content">
- <h2 id="welcome-modal-title">Important - Please read before continuing</h2>
+ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read before continuing</h2>
<div id="welcome-modal-description">
<p>
The Godot Web Editor has some limitations compared to the native version.
@@ -254,9 +259,38 @@
>Web editor documentation</a> for usage instructions and limitations.
</p>
</div>
- <button id="welcome-modal-dismiss" class="btn" type="button" onclick="closeWelcomeModal(true)" style="margin-top: 1rem">
- OK, don't show again
- </button>
+ <div id="welcome-modal-description-no-cross-origin-isolation" style="display: none">
+ <p>
+ The web server does not support cross-origin isolation,
+ which is required for the Godot Web Editor to function.
+ </p>
+ <p>
+ <strong>Reasons for cross-origin isolation being disabled:</strong>
+ <ul>
+ <li id="welcome-modal-reason-not-secure">
+ This page is not served from a secure context (HTTPS <i>or</i> localhost).
+ </li>
+ <li>
+ This page may not be served with cross-origin isolation headers
+ (check with the developer tools' Network tab).
+ </li>
+ </ul>
+ </p>
+ <p>
+ If you are self-hosting the web editor,
+ refer to
+ <a
+ href="https://docs.godotengine.org/en/latest/tutorials/export/exporting_for_web.html#threads"
+ target="_blank"
+ rel="noopener"
+ >Exporting for the Web - Threads</a> for more information.
+ </p>
+ </div>
+ <div style="text-align: center">
+ <button id="welcome-modal-dismiss" class="btn" type="button" onclick="closeWelcomeModal(true)" style="margin-top: 1rem">
+ OK, don't show again
+ </button>
+ </div>
</div>
</div>
<div id="tabs-buttons">
@@ -265,12 +299,13 @@
<button id="btn-close-editor" class="btn close-btn" disabled="disabled" onclick="closeEditor()">×</button>
<button id="btn-tab-game" class="btn tab-btn" disabled="disabled" onclick="showTab('game')">Game</button>
<button id="btn-close-game" class="btn close-btn" disabled="disabled" onclick="closeGame()">×</button>
+ <button id="btn-tab-update" class="btn tab-btn" style="display: none;">Update</button>
</div>
<div id="tabs">
<div id="tab-loader">
<div style="color: #e0e0e0;" id="persistence">
<br />
- <img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" />
+ <img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: min(85%, 50vh); max-height: 250px" />
<br />
@GODOT_VERSION@
<br />
@@ -324,13 +359,51 @@
<div id="status-notice" class="godot" style="display: none;"></div>
</div>
</div>
- <script>
+ <script>//<![CDATA[
window.addEventListener("load", () => {
+ function notifyUpdate(sw) {
+ const btn = document.getElementById("btn-tab-update");
+ btn.onclick = function () {
+ if (!window.confirm("Are you sure you want to update?\nClicking \"OK\" will reload all active instances!")) {
+ return;
+ }
+ sw.postMessage("update");
+ btn.innerHTML = "Updating...";
+ btn.disabled = true;
+ };
+ btn.style.display = "";
+ }
if ("serviceWorker" in navigator) {
- navigator.serviceWorker.register("service.worker.js");
+ navigator.serviceWorker.register("service.worker.js").then(function (reg) {
+ if (reg.waiting) {
+ notifyUpdate(reg.waiting);
+ }
+ reg.addEventListener("updatefound", function () {
+ const update = reg.installing;
+ update.addEventListener("statechange", function () {
+ if (update.state === "installed") {
+ // It's a new install, claim and perform aggressive caching.
+ if (!reg.active) {
+ update.postMessage("claim");
+ } else {
+ notifyUpdate(update);
+ }
+ }
+ });
+ });
+ });
}
- if (localStorage.getItem("welcomeModalDismissed") !== 'true') {
+ if (!crossOriginIsolated) {
+ // Display error dialog as threading support is required for the editor.
+ setButtonEnabled('startButton', false);
+ document.getElementById("welcome-modal-description").style.display = "none";
+ document.getElementById("welcome-modal-description-no-cross-origin-isolation").style.display = "block";
+ document.getElementById("welcome-modal-dismiss").style.display = "none";
+ document.getElementById("welcome-modal-reason-not-secure").style.display = window.isSecureContext ? "none" : "list-item";
+ }
+
+ if (!crossOriginIsolated || localStorage.getItem("welcomeModalDismissed") !== 'true') {
document.getElementById("welcome-modal").style.display = "block";
document.getElementById("welcome-modal-dismiss").focus();
}
@@ -342,7 +415,7 @@
localStorage.setItem("welcomeModalDismissed", 'true');
}
}
- </script>
+ //]]></script>
<script src="godot.tools.js"></script>
<script>//<![CDATA[
diff --git a/misc/dist/html/manifest.json b/misc/dist/html/manifest.json
index 0ca27b3742..ccfb793b20 100644
--- a/misc/dist/html/manifest.json
+++ b/misc/dist/html/manifest.json
@@ -5,8 +5,7 @@
"lang": "en",
"start_url": "./godot.tools.html",
"display": "standalone",
- "orientation": "landscape",
- "theme_color": "#478cbf",
+ "theme_color": "#202531",
"icons": [
{
"src": "favicon.png",
diff --git a/misc/dist/html/offline.html b/misc/dist/html/offline.html
index 000c21b4d3..5cfc3362d9 100644
--- a/misc/dist/html/offline.html
+++ b/misc/dist/html/offline.html
@@ -4,6 +4,8 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="theme-color" content="#202531" />
+ <meta name="msapplication-navbutton-color" content="#202531" />
<title>You are offline</title>
<style>
html {
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);
+ }
+ });
+});
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-17 00:43:35 +0000