Merge pull request #51 from dallen4/pwa-updates

Update PWA Configurations

web/atoms/Assets.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { themeColors } from '@config/app';
+
+export const Assets = () => {
+    return (
+        <>
+            {/* APP ICONS */}
+
+            <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+            <link
+                rel="apple-touch-icon"
+                sizes="152x152"
+                href="/icons/touch-icon-ipad.png"
+            />
+            <link
+                rel="apple-touch-icon"
+                sizes="180x180"
+                href="/icons/touch-icon-iphone-retina.png"
+            />
+            <link
+                rel="apple-touch-icon"
+                sizes="167x167"
+                href="/icons/touch-icon-ipad-retina.png"
+            />
+
+            <link
+                rel="icon"
+                type="image/png"
+                sizes="32x32"
+                href="/icons/favicon-32x32.png"
+            />
+            <link
+                rel="icon"
+                type="image/png"
+                sizes="16x16"
+                href="/icons/favicon-16x16.png"
+            />
+            <link rel="manifest" href="/manifest.json" />
+            <link
+                rel="mask-icon"
+                href="/icons/handshake.svg"
+                color={themeColors.primary}
+            />
+            <link rel="shortcut icon" href="/favicon.ico" />
+
+            {/* SPLASH SCREENS */}
+
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+                href="splashscreens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+                href="splashscreens/iPhone_15_Pro__iPhone_15__iPhone_14_Pro_landscape.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+                href="splashscreens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+                href="splashscreens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_landscape.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+                href="splashscreens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_landscape.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+                href="splashscreens/iPhone_11_Pro_Max__iPhone_XS_Max_landscape.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+                href="splashscreens/iPhone_11__iPhone_XR_landscape.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+                href="splashscreens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_landscape.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+                href="splashscreens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_landscape.png"
+            />
+
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+                href="splashscreens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_portrait.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+                href="splashscreens/iPhone_15_Pro__iPhone_15__iPhone_14_Pro_portrait.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+                href="splashscreens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+                href="splashscreens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+                href="splashscreens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+                href="splashscreens/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+                href="splashscreens/iPhone_11__iPhone_XR_portrait.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+                href="splashscreens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png"
+            />
+            <link
+                rel="apple-touch-startup-image"
+                media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+                href="splashscreens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png"
+            />
+        </>
+    );
+};

web/pages/_document.tsx

@@ -10,6 +10,7 @@ import { ServerStyles, createStylesServer } from '@mantine/next';
 import getConfig from 'next/config';
 import { emotionCache } from 'lib/emotion';
 import { description, themeColors, title } from '@config/app';
+import { Assets } from 'atoms/Assets';
 
 const { publicRuntimeConfig } = getConfig();
 
@@ -64,45 +65,7 @@ export default class _Document extends Document {
                     <meta name="msapplication-tap-highlight" content="no" />
                     <meta name="theme-color" content={themeColors.primary} />
 
-                    <link
-                        rel="apple-touch-icon"
-                        href="/icons/apple-touch-icon.png"
-                    />
-                    <link
-                        rel="apple-touch-icon"
-                        sizes="152x152"
-                        href="/icons/touch-icon-ipad.png"
-                    />
-                    <link
-                        rel="apple-touch-icon"
-                        sizes="180x180"
-                        href="/icons/touch-icon-iphone-retina.png"
-                    />
-                    <link
-                        rel="apple-touch-icon"
-                        sizes="167x167"
-                        href="/icons/touch-icon-ipad-retina.png"
-                    />
-
-                    <link
-                        rel="icon"
-                        type="image/png"
-                        sizes="32x32"
-                        href="/icons/favicon-32x32.png"
-                    />
-                    <link
-                        rel="icon"
-                        type="image/png"
-                        sizes="16x16"
-                        href="/icons/favicon-16x16.png"
-                    />
-                    <link rel="manifest" href="/manifest.json" />
-                    <link
-                        rel="mask-icon"
-                        href="/icons/handshake.svg"
-                        color={themeColors.primary}
-                    />
-                    <link rel="shortcut icon" href="/favicon.ico" />
+                    <Assets />
                 </Head>
                 <body>
                     <Main />

web/public/manifest.json

@@ -1,6 +1,13 @@
 {
     "name": "deadrop",
+    "description": "e2e encrypted secret sharing",
+    "categories": ["development"],
     "short_name": "deadrop",
+    "theme_color": "#1971C2",
+    "background_color": "#1A1B1E",
+    "start_url": "/",
+    "display": "standalone",
+    "orientation": "portrait",
     "icons": [
         {
             "src": "/icons/android-chrome-192x192.png",
@@ -19,9 +26,28 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#1971C2",
-    "background_color": "#1A1B1E",
-    "start_url": "/",
-    "display": "standalone",
-    "orientation": "portrait"
+    "screenshots": [
+        {
+            "src": "screenshots/1280x800-screenshot.png",
+            "sizes": "1280x800",
+            "type": "image/png"
+        },
+        {
+            "src": "screenshots/750x1334-screenshot.png",
+            "sizes": "750x1334",
+            "type": "image/png"
+        }
+    ],
+    "shortcuts": [
+        {
+            "name": "Drop",
+            "url": "/drop",
+            "description": "Drop a secret to a friend"
+        },
+        {
+            "name": "Grab",
+            "url": "/grab",
+            "description": "Grab a secret from a friend"
+        }
+    ]
 }