[HTML5] Export as Progressive Web App.

Adds possibility to export as a progressive web app. Allows customizing base icons, display mode, orientation and offline page.
godotengine · Apr 27, 2021 · 88c060b · 88c060b
1 parent 3a0cfd3
commit 88c060b
Show file tree

Hide file tree

Showing 4 changed files with 406 additions and 164 deletions.
diff --git a/misc/dist/html/offline-export.html 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
@@ -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) => {

diff --git a/platform/javascript/emscripten_helpers.py b/platform/javascript/emscripten_helpers.py
@@ -1,4 +1,4 @@
-import os
+import os, json
 
 from SCons.Util import WhereIs
 
@@ -59,7 +59,23 @@ def create_template_zip(env, js, wasm, extra):
     if env["tools"]:
         # HTML
         html = "#misc/dist/html/editor.html"
-        subst_dict = {"@GODOT_VERSION@": get_build_version(), "@GODOT_NAME@": "GodotEngine"}
+        cache = [
+            "godot.tools.html",
+            "offline.html",
+            "godot.tools.js",
+            "godot.tools.worker.js",
+            "godot.tools.audio.worklet.js",
+            "logo.svg",
+            "favicon.png",
+        ]
+        opt_cache = ["godot.tools.wasm"]
+        subst_dict = {
+            "@GODOT_VERSION@": get_build_version(),
+            "@GODOT_NAME@": "GodotEngine",
+            "@GODOT_CACHE@": json.dumps(cache),
+            "@GODOT_OPT_CACHE@": json.dumps(opt_cache),
+            "@GODOT_OFFLINE_PAGE@": "offline.html",
+        }
         html = env.Substfile(target="#bin/godot${PROGSUFFIX}.html", source=html, SUBST_DICT=subst_dict)
         in_files.append(html)
         out_files.append(zip_dir.File(binary_name + ".html"))
@@ -82,6 +98,10 @@ def create_template_zip(env, js, wasm, extra):
         # HTML
         in_files.append("#misc/dist/html/full-size.html")
         out_files.append(zip_dir.File(binary_name + ".html"))
+        in_files.append(service_worker)
+        out_files.append(zip_dir.File(binary_name + ".service.worker.js"))
+        in_files.append("#misc/dist/html/offline-export.html")
+        out_files.append(zip_dir.File("godot.offline.html"))
 
     zip_files = env.InstallAs(out_files, in_files)
     env.Zip(