lertsoft
diff --git a/‎README.md‎
Lines changed: 8 additions & 0 deletions b/‎README.md‎
Lines changed: 8 additions & 0 deletions
diff --git a/‎next.config.js‎
Lines changed: 11 additions & 0 deletions b/‎next.config.js‎
Lines changed: 11 additions & 0 deletions
diff --git a/‎package-lock.json‎
Lines changed: 10462 additions & 4996 deletions b/‎package-lock.json‎
Lines changed: 10462 additions & 4996 deletions
diff --git a/‎package.json‎
Lines changed: 1 addition & 0 deletions b/‎package.json‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎public/icon-192x192.png‎
7.56 KB b/‎public/icon-192x192.png‎
7.56 KB
diff --git a/‎public/icon-256x256.png‎
15.3 KB b/‎public/icon-256x256.png‎
15.3 KB
diff --git a/‎public/icon-384x384.png‎
19.2 KB b/‎public/icon-384x384.png‎
19.2 KB
diff --git a/‎public/icon-512x512.png‎
31.5 KB b/‎public/icon-512x512.png‎
31.5 KB
diff --git a/‎public/manifest.json‎
Lines changed: 38 additions & 0 deletions b/‎public/manifest.json‎
Lines changed: 38 additions & 0 deletions
diff --git a/‎src/layout/Meta.tsx‎
Lines changed: 8 additions & 14 deletions b/‎src/layout/Meta.tsx‎
Lines changed: 8 additions & 14 deletions
@@ -26,6 +26,7 @@ Developer experience first:
 - 🖱️ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
 - 🌈 Include a FREE minimalist theme
 - 💯 Maximize lighthouse score
+- 🧩 Progresive web App
 
 Built-in feature from Next.js:
 
@@ -39,6 +40,13 @@ Built-in feature from Next.js:
 - SEO-friendly
 - 🚀 Production-ready
 
+### Getting things PWA ready
+
+- Create the app [maskable](https://maskable.app/editor) icon
+- Generate the icons and [manifest.json](https://www.simicart.com/manifest-generator.html/) files
+- publish the app anywhere with [PWA Builder](https://www.pwabuilder.com/
+- Check the /layout/Meta for all metadata :)
+
 ### Requirements
 
 - Node.js 14+ and npm
 
@@ -15,3 +15,14 @@ module.exports = withBundleAnalyzer({
   // You can remove `basePath` if you don't need it.
   reactStrictMode: true,
 });
+
+const withPWA = require('next-pwa');
+
+module.exports = withPWA({
+  // ...before
+  pwa: {
+    dest: 'public',
+    register: true,
+    skipWaiting: true,
+  },
+});
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "next": "^12.1.0",
+    "next-pwa": "^5.5.5",
     "next-seo": "^5.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
 
@@ -0,0 +1,38 @@
+{
+  "theme_color": "#4a90e2",
+  "background_color": "#ffffff",
+  "display": "browser",
+  "scope": "/",
+  "start_url": "/",
+  "name": "typescript_next_template",
+  "short_name": "typescript_next_template",
+  "icons": [
+    {
+      "src": "/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "192x1192",
+      "type": "image/x-icon",
+      "purpose": "maskable"
+    }
+  ],
+  "description": "typescript_next_template"
+}
@@ -17,30 +17,24 @@ const Meta = (props: IMetaProps) => {
     <>
       <Head>
         <meta charSet="UTF-8" key="charset" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         <meta
           name="viewport"
-          content="width=device-width,initial-scale=1"
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
           key="viewport"
         />
         <link
           rel="apple-touch-icon"
           href={`${router.basePath}/apple-touch-icon.png`}
           key="apple"
         />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href={`${router.basePath}/favicon-32x32.png`}
-          key="icon32"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href={`${router.basePath}/favicon-16x16.png`}
-          key="icon16"
+        <meta
+          name="typescript_next_template"
+          content="typescript_next_template"
         />
+        <meta name="theme-color" content="#000" />
+        <title>typescript_next_template</title>
+        <link rel="manifest" href="/manifest.json" />
         <link
           rel="icon"
           href={`${router.basePath}/favicon.ico`}