quran · agungsb · Jun 28, 2017
diff --git a/package.json b/package.json
@@ -140,6 +140,7 @@
     "strip-loader": "0.1.2",
     "style-loader": "0.13.1",
     "superagent": "3.3.1",
+    "sw-precache-webpack-plugin": "0.11.3",
     "url": "0.11.0",
     "url-loader": "0.5.7",
     "webpack": "^2.5.1",

diff --git a/src/client.js b/src/client.js
@@ -19,6 +19,8 @@ import createStore from './redux/create';
 import routes from './routes';
 import Root from './containers/Root';
 
+import registerServiceWorker from './registerServiceWorker';
+
 const client = new ApiClient();
 const store = createStore(browserHistory, client, window.reduxData);
 const history = syncHistoryWithStore(browserHistory, store);
@@ -49,13 +51,12 @@ match(
     const component = (
       <Router
         {...renderProps}
-        render={props => (
+        render={props =>
           <ReduxAsyncConnect
             {...props}
             helpers={{ client }}
             render={applyRouterMiddleware(useScroll())}
-          />
-        )}
+          />}
       />
     );
 
@@ -87,3 +88,5 @@ match(
     }
   }
 );
+
+registerServiceWorker();
diff --git a/src/helpers/Html.js b/src/helpers/Html.js
@@ -17,14 +17,16 @@ const Html = ({ store, component, assets }) => {
         {head.script.toComponent()}
         {head.style.toComponent()}
 
-        {Object.keys(assets.styles).map((style, i) => (
+        <link rel="manifest" href="/manifest.json" />
+
+        {Object.keys(assets.styles).map((style, i) =>
           <link
             href={assets.styles[style]}
             key={i}
             rel="stylesheet"
             type="text/css"
           />
-        ))}
+        )}
         {Object.keys(assets.styles).length === 0
           ? <style
             dangerouslySetInnerHTML={{
@@ -62,12 +64,12 @@ const Html = ({ store, component, assets }) => {
           }}
           charSet="UTF-8"
         />
-        <script
+        {/* <script
           dangerouslySetInnerHTML={{
             __html: `if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/quran-service-worker.js', {scope: './'}).then(function(registration) {}).catch(function(error) {});}`
           }}
           charSet="UTF-8"
-        />
+        />*/}
         <script
           dangerouslySetInnerHTML={{
             __html: `window.reduxData=${serialize(store.getState())};`
@@ -92,9 +94,9 @@ const Html = ({ store, component, assets }) => {
           <script src="https://cdn.ravenjs.com/3.0.4/raven.min.js" />}
         {Object.keys(assets.javascript)
           .filter(script => !assets.javascript[script].includes('-chunk'))
-          .map((script, i) => (
+          .map((script, i) =>
             <script src={assets.javascript[script]} key={i} />
-          ))}
+          )}
       </body>
     </html>
   );

diff --git a/src/progressive.js b/src/progressive.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/server';
+import Html from './helpers/Html';
+
+export default function () {
+  return `<!doctype html>${ReactDOM.renderToStaticMarkup(
+    <Html assets={{}} />
+  )}`;
+}
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
@@ -0,0 +1,53 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+export default function register() {
+  // sw-precache-webpack-plugin is not supported in webpack-dev-server
+  // https://github.com/goldhand/sw-precache-webpack-plugin/issues/17
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      const swUrl = '/quran-com-service-worker.js';
+      navigator.serviceWorker
+        .register(swUrl)
+        .then((registration) => {
+          registration.onupdatefound = () => {
+            const installingWorker = registration.installing;
+            installingWorker.onstatechange = () => {
+              if (installingWorker.state === 'installed') {
+                if (navigator.serviceWorker.controller) {
+                  // At this point, the old content will have been purged and
+                  // the fresh content will have been added to the cache.
+                  // It's the perfect time to display a "New content is
+                  // available; please refresh." message in your web app.
+                  console.log('New content is available; please refresh.');
+                } else {
+                  // At this point, everything has been precached.
+                  // It's the perfect time to display a
+                  // "Content is cached for offline use." message.
+                  console.log('Content is cached for offline use.');
+                }
+              }
+            };
+          };
+        })
+        .catch((error) => {
+          console.error('Error during service worker registration:', error);
+        });
+    });
+  }
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.unregister();
+    });
+  }
+}
diff --git a/static/manifest.json b/static/manifest.json
@@ -6,11 +6,12 @@
   "background_color": "#fff",
   "description": "The Quran translated into many languages in a simple and easy interface.",
   "theme_color": "#004f54",
-  "icons": [{
-    "src": "/android-chrome-48x48.png",
-    "sizes": "48x48",
-    "type": "image/png"
-  },
+  "icons": [
+    {
+      "src": "/android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
     {
       "src": "/android-chrome-144x144.png",
       "sizes": "144x144",
@@ -28,14 +29,18 @@
     }
   ],
   "prefer_related_applications": true,
-  "related_applications": [{
-    "platform": "play",
-    "url": "https://play.google.com/store/apps/details?id=com.quran.labs.androidquran"
-  },{
-    "platform": "itunes",
-    "url": "https://itunes.apple.com/us/app/quran-by-quran.com-qran/id1118663303"
-  },{
-    "platform": "web",
-    "url": "https://quran.com"
-  }]
-}
+  "related_applications": [
+    {
+      "platform": "play",
+      "url": "https://play.google.com/store/apps/details?id=com.quran.labs.androidquran"
+    },
+    {
+      "platform": "itunes",
+      "url": "https://itunes.apple.com/us/app/quran-by-quran.com-qran/id1118663303"
+    },
+    {
+      "platform": "web",
+      "url": "https://quran.com"
+    }
+  ]
+}