Merge pull request #374 from schlagmichdoch/pwa_standalone

Enable standalone mode for PWA

Author: schlagmichdoch

public/index.html

@@ -10,6 +10,7 @@
     <meta name="theme-color" content="#3367d6">
     <meta name="color-scheme" content="dark light">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="PairDrop">
     <meta name="application-name" content="PairDrop">
     <!-- Descriptions -->
@@ -841,4 +842,4 @@ <h3>PairDrop works only with JavaScript</h3>
         </x-noscript>
     </noscript>
 </body>
-</html>
+</html>

public/manifest.json

@@ -26,7 +26,7 @@
         }
     ],
     "background_color": "#efefef",
-    "display": "minimal-ui",
+    "display": "standalone",
     "theme_color": "#3367d6",
     "screenshots" : [
         {

public/scripts/main.js

@@ -81,7 +81,7 @@ class PairDrop {
     }
 
     onPwaInstallable(e) {
-        if (!window.matchMedia('(display-mode: minimal-ui)').matches) {
+        if (!window.matchMedia('(display-mode: standalone)').matches) {
             // only display install btn when not installed
             this.$headerInstallBtn.removeAttribute('hidden');
             this.$headerInstallBtn.addEventListener('click', () => {

public/scripts/ui-main.js

@@ -357,7 +357,6 @@ class BackgroundCanvas {
         this.w = document.documentElement.clientWidth;
         this.h = document.documentElement.clientHeight;
         this.offset = this.$footer.offsetHeight - 27;
-        if (this.h >= 800) this.offset += 10;
 
         if (oldW === this.w && oldH === this.h && oldOffset === this.offset) return; // nothing has changed
 

public/styles/styles-main.css

@@ -899,7 +899,7 @@ x-peers:empty~x-instructions {
 
 @media screen and (min-height: 800px) {
     footer {
-        margin-bottom: 16px;
+        padding-bottom: 10px;
     }
 }
 
@@ -909,6 +909,13 @@ x-peers:empty~x-instructions {
     }
 }
 
+/* PWA Standalone styles */
+@media all and (display-mode: standalone) {
+    footer {
+        padding-bottom: 34px;
+    }
+}
+
 /* Constants */
 
 :root {