Merge pull request #29491 from Expensify/rodrigo-prompt-install-mweb

added manifest to web to prompt app install in chrome
Expensify · Oct 23, 2023 · 7bbcda6 · 7bbcda6
2 parents ed5009d + 2ca8853
commit 7bbcda6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
@@ -83,6 +83,8 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                 {from: 'web/favicon-unread.png'},
                 {from: 'web/og-preview-image.png'},
                 {from: 'web/apple-touch-icon.png'},
+                {from: 'assets/images/expensify-app-icon.svg'},
+                {from: 'web/manifest.json'},
                 {from: 'assets/css', to: 'css'},
                 {from: 'assets/fonts/web', to: 'fonts'},
                 {from: 'node_modules/react-pdf/dist/esm/Page/AnnotationLayer.css', to: 'css/AnnotationLayer.css'},

diff --git a/web/index.html b/web/index.html
@@ -94,31 +94,31 @@
             transition: transform var(--label-transition-duration);
         }
 
-        @media screen and (min-width: 480px) { 
-            .splash-logo > svg { 
-                width: 104px; 
-                height: 104px; 
+        @media screen and (min-width: 480px) {
+            .splash-logo > svg {
+                width: 104px;
+                height: 104px;
             }
         }
 
-        @media screen and (max-width: 479px) { 
-            .splash-logo > svg { 
-                width: 52px; 
-                height: 52px; 
+        @media screen and (max-width: 479px) {
+            .splash-logo > svg {
+                width: 52px;
+                height: 52px;
             }
         }
 
         #splash {
-            position: absolute; 
+            position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
             top: 0;
-            background-color: #061B09; 
-            width: 100%; 
-            height: 100%; 
-            display: flex; 
-            justify-content: center; 
+            background-color: #061B09;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
             align-items: center;
             transition-duration: 250ms;
             transition-property: opacity;
@@ -131,6 +131,7 @@
         <!-- polyfill.io is only needed on Web to support older browsers. It should not be loaded for desktop -->
         <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CResizeObserver&flags=gated"></script>
     <% } %>
+    <link rel="manifest" href="/manifest.json" />
 </head>
 <body>
     <div style="position: absolute; top: 0; left: 0; right: 0; height: 30px;" data-drag-area="true"></div>

diff --git a/web/manifest.json b/web/manifest.json
@@ -0,0 +1,20 @@
+{
+    "short_name": "New Expensify",
+    "name": "New Expensify",
+    "icons": [
+        {
+            "src": "expensify-app-icon.svg",
+            "type": "image/svg+xml",
+            "sizes": "any"
+        }
+    ],
+    "prefer_related_applications": true,
+    "related_applications": [
+        {
+            "platform": "play",
+            "id": "com.expensify.chat"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone"
+}