✨ Introducing PWA and offline caching! (#191)

.gitignore

@@ -32,3 +32,8 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# next-pwa
+public/workbox-*.js
+public/sw.js
+public/*.map

next-seo.config.js

@@ -6,6 +6,25 @@ export default {
       property: 'keywords',
       content: 'readme, easiest, create, markdown, git, github, gitlab',
     },
+    {
+      name: 'theme_color',
+      content: '#10B981',
+    },
+  ],
+  additionalLinkTags: [
+    {
+      rel: 'icon',
+      href: '/favicon.ico',
+    },
+    {
+      rel: 'apple-touch-icon',
+      href: '/icons/icon-96x96.png',
+      sizes: '96x96',
+    },
+    {
+      rel: 'manifest',
+      href: '/manifest.json',
+    },
   ],
   openGraph: {
     type: 'website',

next.config.js

@@ -1,6 +1,7 @@
 const { i18n } = require('./next-i18next.config')
+const withPWA = require('next-pwa')
 
-module.exports = {
+module.exports = withPWA({
   i18n,
   webpackDevMiddleware: (config) => {
     config.watchOptions = {
@@ -9,4 +10,8 @@ module.exports = {
     }
     return config
   },
-}
+  pwa: {
+    dest: 'public',
+    disable: process.env.NODE_ENV === 'development',
+  },
+})

package.json

@@ -8,7 +8,7 @@
     "start": "next start",
     "test": "jest",
     "test:watch": "jest --watchAll",
-    "lint": "prettier --check .",
+    "lint": "next lint && prettier --check .",
     "format": "prettier --write . && git add -A .",
     "postinstall": "husky install"
   },
@@ -17,9 +17,10 @@
     "@dnd-kit/modifiers": "^1.0.5",
     "@dnd-kit/sortable": "^2.0.1",
     "@monaco-editor/react": "^4.1.1",
-    "next": "^10.2.3",
+    "next": "^11.0.1",
     "next-i18next": "^8.1.3",
-    "next-seo": "^4.23.0",
+    "next-pwa": "^5.2.24",
+    "next-seo": "^4.26.0",
     "nextjs-progressbar": "0.0.11",
     "react": "17.0.2",
     "react-dom": "17.0.2",

public/manifest.json

@@ -0,0 +1,72 @@
+{
+  "name": "readme.so",
+  "display": "standalone",
+  "description": "Use readme.so's markdown editor and ready made templates to easily create a simple README for your repositories",
+  "start_url": "/",
+  "scope": "/",
+  "theme_color": "#10B981",
+  "background_color": "#FFF",
+  "shortcuts": [
+    {
+      "name": "Editor",
+      "url": "/editor",
+      "icons": [
+        {
+          "src": "/icons/icon-142x142.png",
+          "sizes": "142x142"
+        },
+        {
+          "src": "/icons/icon-176x176.png",
+          "sizes": "176x176"
+        },
+        {
+          "src": "/icons/icon-600x600.png",
+          "sizes": "600x600"
+        }
+      ]
+    }
+  ],
+  "icons": [
+    {
+      "src": "/icons/icon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-142x142.png",
+      "sizes": "142x142",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-176x176.png",
+      "sizes": "176x176",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-600x600.png",
+      "sizes": "600x600",
+      "type": "image/png"
+    },
+    {
+      "src": "/maskable_icon.png",
+      "sizes": "176x176",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}