Use Window Controls Overlay to hide the title bar

tecdrop · Jun 29, 2024 · 4f8361f · 4f8361f
1 parent fc63419
commit 4f8361f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 11 deletions.
diff --git a/public/index.html b/public/index.html
@@ -20,8 +20,10 @@
 </head>
 
 <body>
-  <!-- We need some content for the Lighthouse audit to pass. It's black on black, so it's invisible. -->
-  <p>The Simplest Progressive Web App Ever?</p>
+
+  <!-- Because we are using the Window Controls Overlay feature, we need to add a "title bar" div to enable dragging the window -->
+  <div class="empty-title-bar">
+  </div>
 
   <script type="module" src="/scripts/app.js"></script>
 

diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
@@ -4,6 +4,7 @@
   "description": "The simplest Progressive Web App ever? It's just a black window / screen, but it can be used to test PWA support on any browser and platform. Other uses?",
   "dir": "ltr",
   "display": "standalone",
+  "display_override": ["window-controls-overlay"],
   "icons": [
     {
       "src": "/images/icons/blackpwa-app-icon-192.png",

diff --git a/public/scripts/app.js b/public/scripts/app.js
@@ -1,8 +0,0 @@
-    // When running as standalone (PWA), clear the document title using an invisible (zero-width) control character
-    function clearTitle(mql) {
-      if (mql.matches) document.title = '\u200E';
-    }
-
-    const mql = window.matchMedia('(display-mode: standalone)');
-    clearTitle(mql);
-    mql.addEventListener('change', (e) => clearTitle(e));

diff --git a/public/styles/app.css b/public/styles/app.css
@@ -1,4 +1,16 @@
 body {
   background: black;
   color: black;
+}
+
+/* The "title bar" div that is used to drag the window around. */
+.empty-title-bar {
+  position: fixed;
+  -webkit-app-region: drag;
+  app-region: drag;
+
+  left: env(titlebar-area-x, 0);
+  top: env(titlebar-area-y, 0);
+  width: env(titlebar-area-width, 100%);
+  height: env(titlebar-area-height, 33px);
 }
diff --git a/public/sw.js b/public/sw.js
@@ -7,7 +7,7 @@
  *
  */
 
-const curCacheVersion = "0";
+const curCacheVersion = "1";
 const curCacheName = `blackpwa-${curCacheVersion}`;
 const urlsToCache = [
   '/',