From d9076932edc5a488424c4fe7629a0ee7740f84c8 Mon Sep 17 00:00:00 2001
From: Mithilesh Kohale <beingtmk@gmail.com>
Date: Sat, 14 Dec 2019 16:20:36 +0530
Subject: [PATCH 1/4] establish basic Service Worker

---
 modules/core/server-ts/middleware/website.tsx     |  1 +
 modules/pwa/client-react/__tests__/Pwa.test.ts    |  1 +
 modules/pwa/client-react/index.js                 |  4 ++++
 modules/pwa/client-react/index.native.js          |  1 +
 modules/pwa/client-react/initServiceWorker.js     | 14 ++++++++++++++
 modules/pwa/client-react/package.json             |  5 +++++
 modules/pwa/client-react/sw/basicServiceWorker.js | 13 +++++++++++++
 packages/client/package.json                      |  1 +
 packages/client/src/modules.ts                    |  2 ++
 9 files changed, 42 insertions(+)
 create mode 100644 modules/pwa/client-react/__tests__/Pwa.test.ts
 create mode 100644 modules/pwa/client-react/index.js
 create mode 100644 modules/pwa/client-react/index.native.js
 create mode 100644 modules/pwa/client-react/initServiceWorker.js
 create mode 100644 modules/pwa/client-react/package.json
 create mode 100644 modules/pwa/client-react/sw/basicServiceWorker.js
diff --git a/modules/core/server-ts/middleware/website.tsx b/modules/core/server-ts/middleware/website.tsx
index e8a5669533..d1093d9241 100644
--- a/modules/core/server-ts/middleware/website.tsx
+++ b/modules/core/server-ts/middleware/website.tsx
@@ -62,6 +62,7 @@ const Html = ({ content, state, css, headElements, helmet }: HtmlProps) => (
     </head>
     <body {...helmet.bodyAttributes.toComponent()}>
       <div id="root" dangerouslySetInnerHTML={{ __html: content || '' }} />
+      <script src="initServiceWorker.js" />
       <script
         dangerouslySetInnerHTML={{
           __html: `window.__APOLLO_STATE__=${serialize(state, {
diff --git a/modules/pwa/client-react/__tests__/Pwa.test.ts b/modules/pwa/client-react/__tests__/Pwa.test.ts
new file mode 100644
index 0000000000..00dafa80dd
--- /dev/null
+++ b/modules/pwa/client-react/__tests__/Pwa.test.ts
@@ -0,0 +1 @@
+// Tests Here
\ No newline at end of file
diff --git a/modules/pwa/client-react/index.js b/modules/pwa/client-react/index.js
new file mode 100644
index 0000000000..1bdb737348
--- /dev/null
+++ b/modules/pwa/client-react/index.js
@@ -0,0 +1,4 @@
+// Loading the initialization for service workers
+require('!file-loader?name=./initServiceWorker.js!./initServiceWorker.js'); // eslint-disable-line import/no-webpack-loader-syntax
+// Logading the service workers
+require('!file-loader?name=./basicServiceWorker.js!./sw/basicServiceWorker.js'); // eslint-disable-line import/no-webpack-loader-syntax
\ No newline at end of file
diff --git a/modules/pwa/client-react/index.native.js b/modules/pwa/client-react/index.native.js
new file mode 100644
index 0000000000..5a55871062
--- /dev/null
+++ b/modules/pwa/client-react/index.native.js
@@ -0,0 +1 @@
+// Placeholder for mobile platforms
diff --git a/modules/pwa/client-react/initServiceWorker.js b/modules/pwa/client-react/initServiceWorker.js
new file mode 100644
index 0000000000..27c528a377
--- /dev/null
+++ b/modules/pwa/client-react/initServiceWorker.js
@@ -0,0 +1,14 @@
+/*global navigator*/
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('basicServiceWorker.js').then(registration => {
+            console.log('Service Worker registration successful', registration.scope);
+        }, err => {
+            console.log('Service Worker registration failed', err);
+        }).catch(err => {
+            console.log(`Service Worker error: ${err}`);
+        });
+    });
+} else {
+    console.log('Service Worker is not supported by browser.');
+}
\ No newline at end of file
diff --git a/modules/pwa/client-react/package.json b/modules/pwa/client-react/package.json
new file mode 100644
index 0000000000..a3898c3498
--- /dev/null
+++ b/modules/pwa/client-react/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "@gqlapp/pwa-client-react",
+  "version": "1.0.0",
+  "private": true
+}
diff --git a/modules/pwa/client-react/sw/basicServiceWorker.js b/modules/pwa/client-react/sw/basicServiceWorker.js
new file mode 100644
index 0000000000..edc8667ff1
--- /dev/null
+++ b/modules/pwa/client-react/sw/basicServiceWorker.js
@@ -0,0 +1,13 @@
+/*global self*/
+/*eslint no-undef: "error"*/
+self.addEventListener('install', function() {
+    console.log('install');
+  });
+  
+  self.addEventListener('activate', function() {
+    console.log('activate');
+  });
+  
+  self.addEventListener('fetch', function(event) {
+    console.log('event', event);
+  });
\ No newline at end of file
diff --git a/packages/client/package.json b/packages/client/package.json
index 69c210effc..af9291c7f6 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -51,6 +51,7 @@
     "@gqlapp/i18n-common-react": "^0.1.0",
     "@gqlapp/module-client-react": "^0.1.0",
     "@gqlapp/payments-client-react": "^0.1.0",
+    "@gqlapp/pwa-client-react": "^1.0.0",
     "@gqlapp/reports-client-react": "^0.1.0",
     "@gqlapp/validation-common-react": "^0.1.0",
     "@loadable/component": "^5.10.1",
diff --git a/packages/client/src/modules.ts b/packages/client/src/modules.ts
index 3eb3cf5b83..5aa6d6c8fc 100644
--- a/packages/client/src/modules.ts
+++ b/packages/client/src/modules.ts
@@ -1,3 +1,4 @@
+import pwa from '@gqlapp/pwa-client-react';
 import core from '@gqlapp/core-client-react';
 import look from '@gqlapp/look-client-react';
 import i18n from '@gqlapp/i18n-client-react';
@@ -19,6 +20,7 @@ const pagination = require('@gqlapp/pagination-client-react').default;
 const user = require('@gqlapp/user-client-react').default;
 
 const modules = new ClientModule(
+  pwa,
   look,
   validation,
   defaultRouter,

From a3eadbc8867d0e82f305ecaf75c8de24b8d2289f Mon Sep 17 00:00:00 2001
From: Mithilesh Kohale <beingtmk@gmail.com>
Date: Sat, 14 Dec 2019 16:29:29 +0530
Subject: [PATCH 2/4] lint

---
 .../containers/AddSubscription.tsx            |  4 +--
 .../pwa/client-react/__tests__/Pwa.test.ts    |  2 +-
 modules/pwa/client-react/index.js             |  4 +--
 modules/pwa/client-react/initServiceWorker.js | 28 +++++++++++--------
 .../pwa/client-react/sw/basicServiceWorker.js | 21 +++++++-------
 5 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/modules/payments/client-react/stripe/subscription/containers/AddSubscription.tsx b/modules/payments/client-react/stripe/subscription/containers/AddSubscription.tsx
index 3696308679..1ff8b36fb9 100644
--- a/modules/payments/client-react/stripe/subscription/containers/AddSubscription.tsx
+++ b/modules/payments/client-react/stripe/subscription/containers/AddSubscription.tsx
@@ -77,8 +77,8 @@ const AddSubscription = ({ t, history, navigation }: AddSubscriptionProps) => {
                   <AddSubscriptionView submitting={submitting} onSubmit={onSubmit(addSubscription)} t={t} />
                 </StripeProvider>
               ) : (
-                  <AddSubscriptionView submitting={submitting} onSubmit={onSubmit(addSubscription)} t={t} />
-                )}
+                <AddSubscriptionView submitting={submitting} onSubmit={onSubmit(addSubscription)} t={t} />
+              )}
             </Fragment>
           );
         }}
diff --git a/modules/pwa/client-react/__tests__/Pwa.test.ts b/modules/pwa/client-react/__tests__/Pwa.test.ts
index 00dafa80dd..8c464c5f92 100644
--- a/modules/pwa/client-react/__tests__/Pwa.test.ts
+++ b/modules/pwa/client-react/__tests__/Pwa.test.ts
@@ -1 +1 @@
-// Tests Here
\ No newline at end of file
+// Tests Here
diff --git a/modules/pwa/client-react/index.js b/modules/pwa/client-react/index.js
index 1bdb737348..a0d5bb456f 100644
--- a/modules/pwa/client-react/index.js
+++ b/modules/pwa/client-react/index.js
@@ -1,4 +1,4 @@
 // Loading the initialization for service workers
-require('!file-loader?name=./initServiceWorker.js!./initServiceWorker.js'); // eslint-disable-line import/no-webpack-loader-syntax
+require('!file-loader?name=./initServiceWorker.js!./initServiceWorker.js'); // eslint-disable-line import/no-webpack-loader-syntax, import/no-unresolved
 // Logading the service workers
-require('!file-loader?name=./basicServiceWorker.js!./sw/basicServiceWorker.js'); // eslint-disable-line import/no-webpack-loader-syntax
\ No newline at end of file
+require('!file-loader?name=./basicServiceWorker.js!./sw/basicServiceWorker.js'); // eslint-disable-line import/no-webpack-loader-syntax, import/no-unresolved
diff --git a/modules/pwa/client-react/initServiceWorker.js b/modules/pwa/client-react/initServiceWorker.js
index 27c528a377..12863e6af1 100644
--- a/modules/pwa/client-react/initServiceWorker.js
+++ b/modules/pwa/client-react/initServiceWorker.js
@@ -1,14 +1,20 @@
 /*global navigator*/
 if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
-        navigator.serviceWorker.register('basicServiceWorker.js').then(registration => {
-            console.log('Service Worker registration successful', registration.scope);
-        }, err => {
-            console.log('Service Worker registration failed', err);
-        }).catch(err => {
-            console.log(`Service Worker error: ${err}`);
-        });
-    });
+  window.addEventListener('load', () => {
+    navigator.serviceWorker
+      .register('basicServiceWorker.js')
+      .then(
+        registration => {
+          console.log('Service Worker registration successful', registration.scope);
+        },
+        err => {
+          console.log('Service Worker registration failed', err);
+        }
+      )
+      .catch(err => {
+        console.log(`Service Worker error: ${err}`);
+      });
+  });
 } else {
-    console.log('Service Worker is not supported by browser.');
-}
\ No newline at end of file
+  console.log('Service Worker is not supported by browser.');
+}
diff --git a/modules/pwa/client-react/sw/basicServiceWorker.js b/modules/pwa/client-react/sw/basicServiceWorker.js
index edc8667ff1..a601927e5c 100644
--- a/modules/pwa/client-react/sw/basicServiceWorker.js
+++ b/modules/pwa/client-react/sw/basicServiceWorker.js
@@ -1,13 +1,12 @@
 /*global self*/
-/*eslint no-undef: "error"*/
 self.addEventListener('install', function() {
-    console.log('install');
-  });
-  
-  self.addEventListener('activate', function() {
-    console.log('activate');
-  });
-  
-  self.addEventListener('fetch', function(event) {
-    console.log('event', event);
-  });
\ No newline at end of file
+  console.log('install');
+});
+
+self.addEventListener('activate', function() {
+  console.log('activate');
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('event', event);
+});

From ac649a0a816b72c7991c074c5210c947e12c90bf Mon Sep 17 00:00:00 2001
From: Mithilesh Kohale <beingtmk@gmail.com>
Date: Sat, 14 Dec 2019 16:43:20 +0530
Subject: [PATCH 3/4] added basic fetching & caching - service worker

---
 .../pwa/client-react/sw/basicServiceWorker.js | 53 ++++++++++++++++---
 1 file changed, 46 insertions(+), 7 deletions(-)

diff --git a/modules/pwa/client-react/sw/basicServiceWorker.js b/modules/pwa/client-react/sw/basicServiceWorker.js
index a601927e5c..c7aa836371 100644
--- a/modules/pwa/client-react/sw/basicServiceWorker.js
+++ b/modules/pwa/client-react/sw/basicServiceWorker.js
@@ -1,12 +1,51 @@
 /*global self*/
-self.addEventListener('install', function() {
-  console.log('install');
-});
+const CACHE_NAME = 'ausk-v1';
+// let assetsToCache = [
+//   '/',
+// ];
+
+// Install a service worker
+// self.addEventListener('install', event => {
+//   // Perform install steps
+//   event.waitUntil(
+//     caches.open(CACHE_NAME)
+//       .then(cache => {
+//         console.log('Opened cache');
+//         cache.addAll(assetsToCache);
+//       })
+//       .then(() => self.skipWaiting())
+//   );
+// });
 
-self.addEventListener('activate', function() {
-  console.log('activate');
+// Cache and return requests
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    // caching urls while fetching
+    fetch(event.request)
+      .then(res => {
+        const resClone = res.clone();
+        caches
+          .open(CACHE_NAME)
+          .then(cache => {
+            cache.put(event.request, resClone);
+          });
+        return res;
+      }).catch(() => caches.match(event.request).then(res => res))
+  );
 });
 
-self.addEventListener('fetch', function(event) {
-  console.log('event', event);
+// Update a service worker
+self.addEventListener('activate', event => {
+  let cacheWhitelist = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
 });

From 37ab21b223fd6754106b25c87970261ac09f86e6 Mon Sep 17 00:00:00 2001
From: Mithilesh Kohale <beingtmk@gmail.com>
Date: Sat, 14 Dec 2019 17:45:06 +0530
Subject: [PATCH 4/4] Manifest updated

---
 modules/favicon/common/assets/manifest.xjson    |  7 +++++--
 modules/favicon/common/index.js                 |  4 ++++
 .../pwa/client-react/sw/basicServiceWorker.js   | 17 ++++++++---------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/modules/favicon/common/assets/manifest.xjson b/modules/favicon/common/assets/manifest.xjson
index c258200267..ac74bb27df 100644
--- a/modules/favicon/common/assets/manifest.xjson
+++ b/modules/favicon/common/assets/manifest.xjson
@@ -1,5 +1,6 @@
 {
-    "name": "",
+    "short_name": "AUSK",
+    "name": "apollo-universal-starter-kit",
     "icons": [
         {
             "src": "android-chrome-192x192.png",
@@ -12,7 +13,9 @@
             "type": "image/png"
         }
     ],
+    "start_url": ".",
     "theme_color": "#ffffff",
     "background_color": "#ffffff",
-    "display": "standalone"
+    "display": "standalone",
+    "orientation": "portrait"
 }
\ No newline at end of file
diff --git a/modules/favicon/common/index.js b/modules/favicon/common/index.js
index 350717ebb0..d5f61f1014 100644
--- a/modules/favicon/common/index.js
+++ b/modules/favicon/common/index.js
@@ -2,6 +2,10 @@ if (!__TEST__) {
   // Favicon.ico should not be hashed, since some browsers expect it to be exactly on /favicon.ico URL
   require('!file-loader?name=[name].[ext]!./assets/favicon.ico'); // eslint-disable-line
 
+  // android-chrome paths are required to be exact as they are required in manifest file
+  require('!file-loader?name=[name].[ext]!./assets/android-chrome-192x192.png'); // eslint-disable-line
+  require('!file-loader?name=[name].[ext]!./assets/android-chrome-256x256.png'); // eslint-disable-line
+
   // Require all files from assets dir recursively addding them into assets.json
   let req = require.context('!file-loader?name=[hash].[ext]!./assets', true, /.*/);
   req.keys().map(req);
diff --git a/modules/pwa/client-react/sw/basicServiceWorker.js b/modules/pwa/client-react/sw/basicServiceWorker.js
index c7aa836371..27b081d103 100644
--- a/modules/pwa/client-react/sw/basicServiceWorker.js
+++ b/modules/pwa/client-react/sw/basicServiceWorker.js
@@ -8,7 +8,7 @@ const CACHE_NAME = 'ausk-v1';
 // self.addEventListener('install', event => {
 //   // Perform install steps
 //   event.waitUntil(
-//     caches.open(CACHE_NAME)
+//     window.caches.open(CACHE_NAME)
 //       .then(cache => {
 //         console.log('Opened cache');
 //         cache.addAll(assetsToCache);
@@ -24,13 +24,12 @@ self.addEventListener('fetch', event => {
     fetch(event.request)
       .then(res => {
         const resClone = res.clone();
-        caches
-          .open(CACHE_NAME)
-          .then(cache => {
-            cache.put(event.request, resClone);
-          });
+        window.caches.open(CACHE_NAME).then(cache => {
+          cache.put(event.request, resClone);
+        });
         return res;
-      }).catch(() => caches.match(event.request).then(res => res))
+      })
+      .catch(() => window.caches.match(event.request).then(res => res))
   );
 });
 
@@ -38,11 +37,11 @@ self.addEventListener('fetch', event => {
 self.addEventListener('activate', event => {
   let cacheWhitelist = [CACHE_NAME];
   event.waitUntil(
-    caches.keys().then(cacheNames => {
+    window.caches.keys().then(cacheNames => {
       return Promise.all(
         cacheNames.map(cacheName => {
           if (cacheWhitelist.indexOf(cacheName) === -1) {
-            return caches.delete(cacheName);
+            return window.caches.delete(cacheName);
           }
         })
       );
