add progressive web app functionality, improve lighthouse audit metrics (hasura#47)

Author: praveenweb

Dockerfile

@@ -4,6 +4,7 @@ FROM node:buster
 WORKDIR /app
 
 # Install app dependencies
+# RUN npm -g install serve
 RUN npm -g install gatsby-cli
 
 COPY package*.json ./
@@ -17,4 +18,5 @@ COPY . .
 RUN npm run build
 
 # serve on port 8080
+# CMD ["serve", "-l", "tcp://0.0.0.0:8080", "public"]
 CMD ["gatsby", "serve", "--verbose", "--prefix-paths", "-p", "8080", "--host", "0.0.0.0"]

README.md

@@ -15,6 +15,7 @@ We also wanted to serve these tutorials in sub paths of [learn.hasura.io](https:
 - GitBook style theme
 - Syntax Highlighting using Prism [`Bonus`: Code diff highlighting]
 - Search Integration with Algolia
+- Progressive Web App, Works Offline
 - Google Analytics Integration
 - Automatically generated sidebar navigation, table of contents, previous/next
 - Edit on Github
@@ -74,17 +75,45 @@ Open `config.js` for templating variables. Broadly configuration is available fo
 ### Algolia Configuration
 
 To setup Algolia, go to `config.js` and update the `search` object to look like the one below:
+
 ```...,
-		"search": {
-			"enabled": true,
-			"indexName": "MY_INDEX_NAME",
-			"algoliaAppId": process.env.GATSBY_ALGOLIA_APP_ID,
-			"algoliaSearchKey": process.env.GATSBY_ALGOLIA_SEARCH_KEY,
-			"algoliaAdminKey": process.env.ALGOLIA_ADMIN_KEY
-		}...,
+	"search": {
+		"enabled": true,
+		"indexName": "MY_INDEX_NAME",
+		"algoliaAppId": process.env.GATSBY_ALGOLIA_APP_ID,
+		"algoliaSearchKey": process.env.GATSBY_ALGOLIA_SEARCH_KEY,
+		"algoliaAdminKey": process.env.ALGOLIA_ADMIN_KEY
+	},
 ```
+
 Values for Algolia App ID, Search Key, and Admin Key can be obtained from Algolia Dashboard with the right set of permissions. Replace `MY_INDEX_NAME` with the Algolia Index name of your choice. To build the Algolia index, you need to run `npm run build` which will do a gatsby build along with content indexing in Algolia.
 
+### Progressive Web App, Offline
+
+To enable PWA, go to `config.js` and update the `pwa` object to look like the one below:
+
+```
+   "pwa": {
+        "enabled": false, // disabling this will also remove the existing service worker.
+        "manifest": {
+            "name": "Gatsby Gitbook Starter",
+            "short_name": "GitbookStarter",
+            "start_url": "/",
+            "background_color": "#6b37bf",
+            "theme_color": "#6b37bf",
+            "display": "standalone",
+            "crossOrigin": "use-credentials",
+            icons: [
+                {
+                    src: "src/pwa-512.png",
+                    sizes: `512x512`,
+                    type: `image/png`,
+                },
+            ],
+        },
+    }
+```
+
 ## Live Code Editor
 
 To render react components for live editing, add the `react-live=true` to the code section. For example:

config.js

@@ -15,8 +15,8 @@ const config = {
 			{ "text": "", "link": ""}
 		],
 		"search": {
-			"enabled": true,
-			"indexName": "learn-hasura-test",
+			"enabled": false,
+			"indexName": "",
 			"algoliaAppId": process.env.GATSBY_ALGOLIA_APP_ID,
 			"algoliaSearchKey": process.env.GATSBY_ALGOLIA_SEARCH_KEY,
 			"algoliaAdminKey": process.env.ALGOLIA_ADMIN_KEY
@@ -40,6 +40,25 @@ const config = {
 		"docsLocation": "https://github.com/hasura/gatsby-gitbook-boilerplate/tree/master/content",
 		"favicon": "https://graphql-engine-cdn.hasura.io/img/hasura_icon_black.svg"
 	},
+	"pwa": {
+		"enabled": false, // disabling this will also remove the existing service worker.
+		"manifest": {
+			"name": "Gatsby Gitbook Starter",
+			"short_name": "GitbookStarter",
+			"start_url": "/",
+			"background_color": "#6b37bf",
+			"theme_color": "#6b37bf",
+			"display": "standalone",
+			"crossOrigin": "use-credentials",
+			icons: [
+				{
+					src: "src/pwa-512.png",
+					sizes: `512x512`,
+					type: `image/png`,
+				},
+			],
+		},
+	}
 };
 
 module.exports = config;

gatsby-browser.js

@@ -0,0 +1,9 @@
+export const onServiceWorkerUpdateReady = () => {
+  const answer = window.confirm(
+    `This tutorial has been updated. ` +
+      `Reload to display the latest version?`
+  )
+  if (answer === true) {
+    window.location.reload()
+  }
+}

gatsby-config.js

@@ -11,6 +11,15 @@ const plugins = [
     }
   },
   'gatsby-plugin-emotion',
+  'gatsby-plugin-remove-trailing-slashes',
+  'gatsby-plugin-react-helmet',
+  {
+    resolve: "gatsby-source-filesystem",
+    options: {
+      name: "docs",
+      path: `${__dirname}/content/`
+    }
+  },
   {
     resolve: 'gatsby-plugin-mdx',
     options: {
@@ -29,15 +38,6 @@ const plugins = [
       extensions: [".mdx", ".md"]
     }
   },
-  'gatsby-plugin-remove-trailing-slashes',
-  'gatsby-plugin-react-helmet',
-  {
-    resolve: "gatsby-source-filesystem",
-    options: {
-      name: "docs",
-      path: `${__dirname}/content/`
-    }
-  },
   {
     resolve: `gatsby-plugin-gtag`,
     options: {
@@ -50,6 +50,7 @@ const plugins = [
     },
   },
 ];
+// check and add algolia
 if (config.header.search && config.header.search.enabled && config.header.search.algoliaAppId && config.header.search.algoliaAdminKey) {
   plugins.push({
     resolve: `gatsby-plugin-algolia`,
@@ -61,6 +62,21 @@ if (config.header.search && config.header.search.enabled && config.header.search
     }}
   )
 }
+// check and add pwa functionality
+if (config.pwa && config.pwa.enabled && config.pwa.manifest) {
+  plugins.push({
+      resolve: `gatsby-plugin-manifest`,
+      options: {...config.pwa.manifest},
+  });
+  plugins.push({
+    resolve: 'gatsby-plugin-offline',
+    options: {
+      appendScript: require.resolve(`./src/custom-sw-code.js`),
+    },
+  });
+} else {
+  plugins.push('gatsby-plugin-remove-serviceworker');
+}
 module.exports = {
   pathPrefix: config.gatsby.pathPrefix,
   siteMetadata: {

gatsby-node.js

@@ -49,7 +49,10 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
       modules: [path.resolve(__dirname, "src"), "node_modules"],
-      alias: { $components: path.resolve(__dirname, "src/components") }
+      alias: { 
+        $components: path.resolve(__dirname, "src/components"),
+        buble: '@philpl/buble' // to reduce bundle size
+      }
     }
   });
 };