Add tags for PWA support (Palats#35)

Makes Mapshot behaves like a PWA when opening a map. That also improves a bit the UI on mobile.
sakuro · Oct 2, 2023 · d950099 · d950099
1 parent eca6623
commit d950099
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/embed/regen.go b/embed/regen.go
@@ -313,6 +313,7 @@ func main() {
 	viewerFiles := sortFiles(append(append(
 		loader.LoadTextGlob("frontend/dist/viewer/*.js", nil),
 		loader.LoadTextFile("frontend/dist/viewer/index.html"),
+		loader.LoadTextFile("frontend/dist/viewer/manifest.json"),
 		loader.LoadBinaryFile("thumbnail.png"),
 	), loader.LoadTextGlob("frontend/dist/viewer/*.svg", nil)...))
 

diff --git a/frontend/manifest.json b/frontend/manifest.json
@@ -0,0 +1,14 @@
+{
+  "name": "Mapshot",
+  "icons": [
+    {
+      "src": "thumbnail.png",
+      "type": "image/png",
+      "sizes": "144x144"
+    }
+  ],
+  "background_color": "#000000",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "description": "Factorio map viewer"
+}
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
@@ -38,6 +38,9 @@ export default [{
         copy({
             targets: [{ src: '../thumbnail.png', dest: 'dist/viewer' }]
         }),
+        copy({
+            targets: [{ src: "manifest.json", dest: "dist/viewer" }],
+        }),
     ].concat(plugins),
 }, {
     input: 'listing.html',
@@ -53,4 +56,4 @@ export default [{
             targets: [{ src: '../thumbnail.png', dest: 'dist/listing' }]
         }),
     ].concat(plugins),
-}];
+}];
diff --git a/frontend/viewer.html b/frontend/viewer.html
@@ -2,6 +2,11 @@
 
 <head>
     <title>Mapshot</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link rel="apple-touch-icon" href="thumbnail.png">
+    <link rel="manifest" href="manifest.json">
     <link rel="icon" href="thumbnail.png" sizes="144x144">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
         integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
@@ -17,4 +22,4 @@
     <script type="module" src="./viewer.ts"></script>
 </body>
 
-</html>
+</html>