4 files changed, 110 insertions, 15 deletions
diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
index 4785f54973..347c22adf8 100644
--- a/misc/dist/html/editor.html
+++ b/misc/dist/html/editor.html
@@ -58,6 +58,29 @@
 			filter: brightness(82.5%);
 		}
 
+		.welcome-modal {
+			display: none;
+ 			position: fixed;
+			z-index: 1;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			overflow: auto;
+			background-color: hsla(0, 0%, 0%, 0.5);
+		}
+
+		.welcome-modal-content {
+			background-color: #333b4f;
+			box-shadow: 0 0.25rem 0.25rem hsla(0, 0%, 0%, 0.5);
+			line-height: 1.5;
+			max-width: 38rem;
+			margin: 4rem auto 0 auto;
+			color: white;
+			border-radius: 0.5rem;
+			padding: 1rem 1rem 2rem 1rem;
+		}
+
 		#tabs-buttons {
 			/* Match the default background color of the editor window for a seamless appearance. */
 			background-color: #202531;
@@ -206,6 +229,36 @@
 	</style>
 </head>
 <body>
+	<div
+		id="welcome-modal"
+		class="welcome-modal"
+		role="dialog"
+		aria-labelledby="welcome-modal-title"
+		aria-describedby="welcome-modal-description"
+		onclick="if (event.target === this) closeWelcomeModal(false)"
+	>
+		<div class="welcome-modal-content">
+			<h2 id="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.
+					Its main focus is education and experimentation;
+					<strong>it is not recommended for production</strong>.
+				</p>
+				<p>
+					Refer to the
+					<a
+						href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html"
+						target="_blank"
+						rel="noopener"
+					>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>
+	</div>
 	<div id="tabs-buttons">
 		<button id="btn-tab-loader" class="btn tab-btn" onclick="showTab('loader')">Loader</button>
 		<button id="btn-tab-editor" class="btn tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button>
@@ -274,7 +327,19 @@
 			if ("serviceWorker" in navigator) {
 				navigator.serviceWorker.register("service.worker.js");
 			}
+
+			if (localStorage.getItem("welcomeModalDismissed") !== 'true') {
+				document.getElementById("welcome-modal").style.display = "block";
+				document.getElementById("welcome-modal-dismiss").focus();
+			}
 		});
+
+		function closeWelcomeModal(dontShowAgain) {
+			document.getElementById("welcome-modal").style.display = "none";
+			if (dontShowAgain) {
+				localStorage.setItem("welcomeModalDismissed", 'true');
+			}
+		}
 	</script>
 	<script src="godot.tools.js"></script>
 	<script>//<![CDATA[
diff --git a/misc/dist/html/full-size.html b/misc/dist/html/full-size.html
index abc0479739..7afb6fdb6b 100644
--- a/misc/dist/html/full-size.html
+++ b/misc/dist/html/full-size.html
@@ -3,7 +3,6 @@
 <head>
 	<meta charset='utf-8' />
 	<meta name='viewport' content='width=device-width, user-scalable=no' />
-	<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
 	<title>$GODOT_PROJECT_NAME</title>
 	<style type='text/css'>
 
diff --git a/misc/dist/html/offline-export.html b/misc/dist/html/offline-export.html
new file mode 100644
index 0000000000..41ab42b04b
--- /dev/null
+++ b/misc/dist/html/offline-export.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>You are offline</title>
+	<style>
+		html {
+			background-color: #000000;
+			color: #ffffff;
+		}
+
+		body {
+			font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+			margin: 2rem;
+		}
+
+		p {
+			margin-block: 1rem;
+		}
+
+		button {
+			display: block;
+			padding: 1rem 2rem;
+			margin: 3rem auto 0;
+		}
+	</style>
+</head>
+<body>
+	<h1>You are offline</h1>
+	<p>This application requires an Internet connection to run for the first time.</p>
+	<p>Press the button below to try reloading:</p>
+	<button type="button">Reload</button>
+
+	<script>
+		document.querySelector("button").addEventListener("click", () => {
+			window.location.reload();
+		});
+	</script>
+</body>
+</html>
diff --git a/misc/dist/html/service-worker.js b/misc/dist/html/service-worker.js
index d4eaed2b17..f8dee8cd5b 100644
--- a/misc/dist/html/service-worker.js
+++ b/misc/dist/html/service-worker.js
@@ -5,22 +5,11 @@
 // previously cached resources to be updated from the network.
 const CACHE_VERSION = "@GODOT_VERSION@";
 const CACHE_NAME = "@GODOT_NAME@-cache";
-const OFFLINE_URL = "offline.html";
+const OFFLINE_URL = "@GODOT_OFFLINE_PAGE@";
 // Files that will be cached on load.
-const CACHED_FILES = [
-	"godot.tools.html",
-	"offline.html",
-	"godot.tools.js",
-	"godot.tools.worker.js",
-	"godot.tools.audio.worklet.js",
-	"logo.svg",
-	"favicon.png",
-];
-
+const CACHED_FILES = @GODOT_CACHE@;
 // Files that we might not want the user to preload, and will only be cached on first load.
-const CACHABLE_FILES = [
-	"godot.tools.wasm",
-];
+const CACHABLE_FILES = @GODOT_OPT_CACHE@;
 const FULL_CACHE = CACHED_FILES.concat(CACHABLE_FILES);
 
 self.addEventListener("install", (event) => {