From 4f8361f9a50ae7cb0ec4f0d3b4005a4cbc4dd1b5 Mon Sep 17 00:00:00 2001 From: TechAurelian Date: Sat, 29 Jun 2024 18:05:07 +0300 Subject: [PATCH] Use Window Controls Overlay to hide the title bar --- public/index.html | 6 ++++-- public/manifest.webmanifest | 1 + public/scripts/app.js | 8 -------- public/styles/app.css | 12 ++++++++++++ public/sw.js | 2 +- 5 files changed, 18 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index 0b4101c..af0dfbe 100644 --- a/public/index.html +++ b/public/index.html @@ -20,8 +20,10 @@ - -

The Simplest Progressive Web App Ever?

+ + +
+
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest index b3ce9ef..0834963 100644 --- 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 index 341f058..e69de29 100644 --- 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)); \ No newline at end of file diff --git a/public/styles/app.css b/public/styles/app.css index 1cebabb..c6bec6f 100644 --- 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); } \ No newline at end of file diff --git a/public/sw.js b/public/sw.js index 487b71d..bbf14a6 100644 --- a/public/sw.js +++ b/public/sw.js @@ -7,7 +7,7 @@ * */ -const curCacheVersion = "0"; +const curCacheVersion = "1"; const curCacheName = `blackpwa-${curCacheVersion}`; const urlsToCache = [ '/',