Added offline support

Author: nelsie borja

.gitignore

@@ -12,3 +12,4 @@ tomcat.8080/
 
 # Client
 node_modules
+public

README.md

@@ -358,6 +358,8 @@ env: {
 
 [For Code Splitting](https://github.com/thejameskyle/react-loadable) or [without using a library](https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html)
 
+[For offline support using Service Workers](https://developers.google.com/web/tools/workbox/get-started/webpack)
+
 ---
 
 ## Dev Tools

TODO

@@ -14,15 +14,6 @@
   * https://github.com/geelen/react-snapshot
 
 
- 2. Offline Support
-  * https://github.com/NekR/offline-plugin
-  * External/api support:
-    https://github.com/NekR/offline-plugin/issues/64
-    https://github.com/NekR/offline-plugin/issues/26
-    https://github.com/NekR/offline-plugin/issues/117 (Sample implementation)
-  * https://github.com/goldhand/sw-precache-webpack-plugin (pre-cache)
-
-
 3. Potential Libraries/References
   * https://github.com/jasonslyvia/react-lazyload
   * https://github.com/amsul/react-translated/tree/master/examples/react-dom

src/main/webapp/client/app/index.js

@@ -1,10 +1,13 @@
 import React from "react";
 import { render } from "react-dom";
 import Provider from "./components/Provider";
+import serviceWorker from "./sw";
 
 if (process.env.APP_ENV === "development") {
   const { whyDidYouUpdate } = require("why-did-you-update");
   whyDidYouUpdate(React);
+} else {
+  serviceWorker();
 }
 
 const rootEl = document.querySelector("#root");

src/main/webapp/client/app/sw.js

@@ -0,0 +1,14 @@
+export default () => {
+  if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () => {
+      navigator.serviceWorker
+        .register("./public/sw.js")
+        .then(registration => {
+          console.log("SW registered: ", registration);
+        })
+        .catch(registrationError => {
+          console.log("SW registration failed: ", registrationError);
+        });
+    });
+  }
+};

src/main/webapp/client/package.json

@@ -42,6 +42,7 @@
     "sass-resources-loader": "^1.3.1",
     "webpack-dev-server": "^2.9.3",
     "webpack-merge": "^4.1.1",
-    "why-did-you-update": "^0.1.0"
+    "why-did-you-update": "^0.1.0",
+    "workbox-webpack-plugin": "^2.1.2"
   }
 }

src/main/webapp/client/webpack.common.js

@@ -4,6 +4,7 @@ const CleanWebpackPlugin = require("clean-webpack-plugin");
 
 // Directories
 const APP_DIR = path.resolve(__dirname, "./app");
+const PUBLIC_DIR = path.resolve(__dirname, "../public");
 
 module.exports = {
   entry: {
@@ -22,7 +23,7 @@ module.exports = {
     publicPath: "/public/",
 
     // Output folder
-    path: path.resolve(__dirname, "../public")
+    path: PUBLIC_DIR
   },
 
   plugins: [

src/main/webapp/client/webpack.prod.js

@@ -4,10 +4,12 @@ const webpack = require("webpack");
 const merge = require("webpack-merge");
 const common = require("./webpack.common.js");
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const WorkboxPlugin = require("workbox-webpack-plugin");
 
 // Directories
 const APP_DIR = path.resolve(__dirname, "./app");
 const SCSS_RESOURCES = path.resolve(__dirname, "./app/scss/resources/*.scss");
+const PUBLIC_DIR = path.resolve(__dirname, "../public");
 
 module.exports = merge(common, {
   plugins: [
@@ -35,7 +37,24 @@ module.exports = merge(common, {
     new webpack.optimize.AggressiveMergingPlugin(),
 
     // Extract SCSS/CSS from bundle into a file; Including minification
-    new ExtractTextPlugin("style.css")
+    new ExtractTextPlugin("style.css"),
+
+    new WorkboxPlugin({
+      globDirectory: PUBLIC_DIR,
+      // globPatterns: ["**/*.{html,js}"], // Set specific file pattern to cache
+      swDest: path.join(PUBLIC_DIR, "sw.js"),
+      // Instructs the latest service worker to take control of all clients as soon as it's activated
+      clientsClaim: true,
+      //  Instructs the latest service worker to activate as soon as it enters the waiting phase
+      skipWaiting: true,
+      // Usually for APIs
+      runtimeCaching: [
+        {
+          urlPattern: new RegExp("https://www.carrefouruae.com"),
+          handler: "staleWhileRevalidate"
+        }
+      ]
+    })
   ],
 
   module: {