Full-PWA

Yay! So happy to have things getting this far now. I did some more cross-browser testing today, and everything is working great in Chrome, Safari, and Firefox on desktop, as well as Safari on mobile, iPad *and* iOS! Gonna start adding more nice-to-have PWA features, like Web Share, Web Share Target, File Handling, File System Access, you name it. I didn't quite realize that both the Web App Manifest, and the Theme Color entry are both supported on Standalone mode on iOS! Just found that out in person today, and I was very suprised to see that! I think it was added a while back, but I think it took a little while for it to fully roll out, and be bug free. https://firt.dev/notes/pwa-ios/ This makes PWA setup so much nicer now! You don't have to worry about iOS-specific meta tags anymore, it all just works exactly like you want it to. This is also the case for PWA icons, which is an even better thing to find out! Now you essentially only have to make two icon sizes (maybe 3, now that iOS is using them. I was using 192 and 512 before, and I think iOS likes to look for 180). So I added fullscreen support using the Safe Area Insets style properties, created an initial app icon, Window Controls Overlay support, and a Web App Manifest for full (cross-platform) PWA installations. Listened to almost 3 PT records so far tonight. Started with Stupid Dream, next Lightbulb Sun, and I'm at 'The Creator Has a Mastertape' on In Absentia now. That made me think of a new thing I haven't done before: Listen to a given artist's catalog fully all the way through in one go! That would be a very long day, but I'm gonna do it sometime. I really like the sound of that. I can't wait to try that with Marco Minnemann's solo work! I have all of his albums in my library, can't believe I have them all. I definitely recommend his work too! There's SOO much to listen to there. I'm starting to do that with Mike Keneally's catalog too, that's also taking some time for it to soak into my brain. Sometimes albums from those guys can take a while to really click, any of the progger guys for that matter XD. I think that's what I'm striving to have with my own writing too. Started listening through my next album projects, may start doing initial mixing for them tomorrow!
Offroaders123 · Mar 16, 2023 · e5deb69 · e5deb69
1 parent 847267a
commit e5deb69
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -5,10 +5,12 @@
 
 <title>Dovetail</title>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
 <meta name="color-scheme" content="light dark">
-<meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="apple-mobile-web-app-title" content="Dovetail">
+<meta name="theme-color" content="#445985">
+<link rel="manifest" href="./manifest.webmanifest">
+<link rel="icon" type="image/png" sizes="16x16" href="./resources/icon-16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="./resources/icon-32.png">
 
 <link rel="stylesheet" href="./styles.css">
 
@@ -17,6 +19,7 @@
 <body>
 
 <header>
+  <img height="32" src="./resources/app-512.png">
   <button id="saver" disabled>Save</button>
   <input id="opener" type="file" accept="application/octet-stream, application/gzip, .nbt, .dat">
 </header>

diff --git a/manifest.webmanifest b/manifest.webmanifest
@@ -0,0 +1,23 @@
+{
+  "name": "Dovetail",
+  "short_name": "Dovetail",
+  "description": "A cross-platform NBT editor built on the web!",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "display_override": ["window-controls-overlay"],
+  "theme_color": "#445985",
+  "background_color": "#445985",
+  "icons": [
+    {
+      "src": "./resources/app-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "./resources/app-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}
diff --git a/resources/app-192.png b/resources/app-192.png
diff --git a/resources/app-512.png b/resources/app-512.png
diff --git a/resources/icon-16.png b/resources/icon-16.png
diff --git a/resources/icon-32.png b/resources/icon-32.png
diff --git a/resources/icon.png b/resources/icon.png
diff --git a/service-worker.js b/service-worker.js
@@ -2,7 +2,7 @@
 /// <reference no-default-lib="true"/>
 /// <reference types="better-typescript/worker"/>
 
-const version = "Dovetail v1.1.1";
+const version = "Dovetail v1.2.0";
 
 self.addEventListener("activate",event => {
   event.waitUntil(removeOutdatedVersions());

diff --git a/styles.css b/styles.css
@@ -11,7 +11,8 @@ body {
   margin: 0;
   height: 100%;
   position: fixed;
-  inset: 0;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   font-family: system-ui, sans-serif;
@@ -24,22 +25,41 @@ body > * {
 }
 
 header {
-  padding: 1rem;
+  padding: 0.5rem;
   display: flex;
+  align-items: center;
   gap: 0.5em;
+  border: 0 solid transparent;
+  border-left-width: env(safe-area-inset-left);
+  border-right-width: env(safe-area-inset-right);
+}
+
+@media (display-mode: window-controls-overlay) {
+  header {
+    min-height: env(titlebar-area-height);
+    color: white;
+    background: #445985;
+    border-left-width: env(titlebar-area-x);
+    border-top-width: env(titlebar-area-y);
+  }
 }
 
 textarea {
+  margin: 0;
   padding: 8px 1rem;
   flex-grow: 1;
   font-size: 13px;
   font-family: ui-monospace, "Noto Sans Mono", "Cousine", monospace;
   line-height: 1.4;
+  caret-color: currentColor;
   background: #aaaaaa40;
   border: 0 solid transparent;
-  border-radius: 0;
+  border-left-width: env(safe-area-inset-left);
+  border-right-width: env(safe-area-inset-right);
   border-top: 1px solid #80808080;
   border-bottom-width: env(safe-area-inset-bottom);
+  border-radius: 0;
+  outline: none;
   resize: none;
 }