config(apps/analytics): pwa

.gitignore

@@ -63,5 +63,9 @@ generated
 artifacts
 
 # workers
+**/public/sw.js
 **/public/workbox-*.js
-**/public/sw.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map

apps/analytics/next.config.mjs

@@ -1,5 +1,9 @@
+import nextPwa from 'next-pwa'
 import transpileModules from 'next-transpile-modules'
 
+const withPwa = nextPwa({
+  dest: 'public',
+})
 const withTranspileModules = transpileModules([
   '@sushiswap/redux-localstorage',
   '@sushiswap/wagmi',
@@ -44,4 +48,4 @@ const nextConfig = {
   },
 }
 
-export default withTranspileModules(nextConfig)
+export default withPwa(withTranspileModules(nextConfig))

apps/analytics/package.json

@@ -29,6 +29,7 @@
     "graphql": "16.6.0",
     "isomorphic-fetch": "^3.0.0",
     "next": "^12.3.0",
+    "next-pwa": "^5.6.0",
     "next-seo": "^5.5.0",
     "next-sitemap": "^3.1.20",
     "react": "^18.2.0",

apps/analytics/public/manifest.json

@@ -2,22 +2,53 @@
     "name": "Analytics by Sushi",
     "description": "Dive deep into the Analytics of Sushi",
     "short_name": "Analytics",
-    "display": "standalone",
+    "display": "fullscreen",
     "orientation": "portrait",
     "theme_color": "#0f172a",
     "background_color": "#0f172a",
-    "start_url": "/analytics",
-    "iconPath": "/analytics/favicon-32x32.png",
+    "id": "/analytics",
+    "start_url": "./analytics",
+    "scope": "./",
+    "iconPath": "favicon-32x32.png?v=1",
     "icons": [
       {
-          "src": "/analytics/android-chrome-192x192.png?v=1",
-          "sizes": "192x192",
-          "type": "image/png"
+        "src": "icon-512x512.svg?v=1",
+        "sizes": "512x512",
+        "type": "image/svg+xml"
       },
       {
-          "src": "/analytics/android-chrome-512x512.png?v=1",
-          "sizes": "512x512",
-          "type": "image/png"
+        "src": "icon-192x192.png?v=1",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "icon-512x512.png?v=1",
+        "sizes": "512x512",
+        "type": "image/png"
+      },
+      {
+        "src": "icon-128x128.png?v=1",
+        "sizes": "128x128",
+        "type": "image/png",
+        "purpose": "maskable"
+      },
+      {
+        "src": "maskable-icon-192x192.png?v=1",
+        "sizes": "192x192",
+        "type": "image/png",
+        "purpose": "maskable"
+      },
+      {
+        "src": "maskable-icon-384x384.png?v=1",
+        "sizes": "384x384",
+        "type": "image/png",
+        "purpose": "maskable"
+      },
+      {
+        "src": "maskable-icon-512x512.png?v=1",
+        "sizes": "512x512",
+        "type": "image/png",
+        "purpose": "maskable"
       }
     ]
   }

apps/swap/pages/_app.tsx

@@ -52,13 +52,6 @@ const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
         <link rel="shortcut icon" href="/swap/favicon.ico?v=1" />
         <meta name="msapplication-TileColor" content="#2b5797" />
         <meta name="theme-color" content="#FA52A0" />
-        <meta name="application-name" content="SushiSwap" />
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-        <meta name="apple-mobile-web-app-title" content="SushiSwap" />
-        <meta name="description" content="Easiest way to trade your tokens and supported by 22 networks." />
-        <meta name="format-detection" content="telephone=no" />
-        <meta name="mobile-web-app-capable" content="yes" />
       </Head>
       <Script strategy="afterInteractive" src={`https://www.googletagmanager.com/gtag/js?id=G-JW8KWJ48EF`} />
       <Script