Add PWACompat (#1433)

* Add PWACompat (attempt)
Fixes #1425

* Fix CSS, use custom splash screen font

* Respect bottom safe area

package-lock.json

@@ -15719,6 +15719,11 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "pwacompat": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/pwacompat/-/pwacompat-2.0.11.tgz",
+      "integrity": "sha512-fKm/aQg6P+aw0X7JQQOJqCK37wUJYAXrRuGD1jpRfbBWlofg5npkM22kEPPxjw4K10T031BJRgO2+ZwRETy1dQ=="
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "i18next-browser-languagedetector": "4.0.2",
     "nanoid": "2.1.11",
     "open-color": "1.7.0",
+    "pwacompat": "2.0.11",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-scripts": "3.4.1",

public/index.html

@@ -8,11 +8,10 @@
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no"
     />
     <meta name="referrer" content="origin" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
+
     <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-touch-fullscreen" content="yes" />
 
-    <meta name="theme-color" content="#fff" />
+    <meta name="theme-color" content="#000" />
 
     <!-- Origin Trial token for the Native File System API v1 https://developers.chrome.com/origintrials/#/view_trial/3868592079911256065 (Chrome 78–81) -->
     <meta
@@ -57,9 +56,6 @@
     <meta property="og:image:height" content="669" />
     <meta property="og:image:alt" content="Excalidraw logo with byline." />
 
-    <!-- Safari -->
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-
     <!-- Twitter Card tags -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Excalidraw" />
@@ -92,57 +88,12 @@
       crossorigin="anonymous"
     />
 
-    <link rel="manifest" href="manifest.json" />
-    <link
-      href="splashscreen_images/iphone5_splash.png"
-      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreen_images/iphone6_splash.png"
-      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
     <link
-      href="splashscreen_images/iphoneplus_splash.png"
+      rel="manifest"
-      media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
+      href="manifest.json"
-      rel="apple-touch-startup-image"
+      style="--pwacompat-splash-font: 24px Virgil;"
-    />
-    <link
-      href="splashscreen_images/iphonex_splash.png"
-      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreen_images/iphonexr_splash.png"
-      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreen_images/iphonexsmax_splash.png"
-      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreen_images/ipad_splash.png"
-      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreen_images/ipadpro1_splash.png"
-      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreen_images/ipadpro3_splash.png"
-      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreen_images/ipadpro2_splash.png"
-      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
     />
+
     <style>
       .LoadingMessage {
         position: fixed;

src/css/styles.scss

@@ -15,12 +15,14 @@
 
 body {
   margin: 0;
-  --ui-font: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica,
+  --ui-font: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
-    Arial, sans-serif;
+    Helvetica, Arial, sans-serif;
   font-family: var(--ui-font);
   color: var(--text-color-primary);
   -webkit-text-size-adjust: 100%;
   user-select: none;
+  width: 100vw;
+  height: 100vh;
 }
 [contenteditable] {
   user-select: auto;
@@ -58,6 +60,13 @@ canvas {
   right: 0;
 }
 
+.FixedSideContainer {
+  padding-top: var(--sat, 0px);
+  padding-right: var(--sar, 0px);
+  padding-bottom: var(--sab, 0px);
+  padding-left: var(--sal, 0px);
+}
+
 .panelRow {
   display: flex;
   justify-content: space-between;
@@ -186,10 +195,10 @@ button,
   left: 0;
   right: 0;
   --bar-padding: calc(4 * var(--space-factor));
-  padding-top: #{"max(var(--bar-padding), var(--sat))"};
+  padding-top: #{"max(var(--bar-padding), var(--sat, 0px))"};
-  padding-left: var(--sal);
+  padding-right: var(--sar, 0px);
-  padding-right: var(--sar);
+  padding-bottom: var(--sab, 0px);
-  padding-bottom: var(--sab);
+  padding-left: var(--sal, 0px);
   z-index: 4;
   display: flex;
   align-items: flex-end;
@@ -423,8 +432,7 @@ button,
     display: none;
   }
   .scroll-back-to-content {
-    bottom: 80px;
+    bottom: calc(80px + var(--sab, 0px));
-    bottom: calc(80px + var(--sab));
     z-index: -1;
   }
 }

src/index.tsx

@@ -10,6 +10,13 @@ import { register as registerServiceWorker } from "./serviceWorker";
 
 import "./css/styles.scss";
 
+// On Apple mobile devices add the proprietary app icon and splashscreen markup.
+// No one should have to do this manually, and eventually this annoyance will
+// go away once https://bugs.webkit.org/show_bug.cgi?id=183937 is fixed.
+if (/\b(iPad|iPhone|iPod)\b/.test(navigator.userAgent)) {
+  import("pwacompat");
+}
+
 const SentryEnvHostnameMap: { [key: string]: string } = {
   "excalidraw.com": "production",
   "now.sh": "staging",

src/pwacompat.d.ts

@@ -0,0 +1 @@
+declare module "pwacompat";