Merge pull request vinitshahdeo#86 from UddeshJain/feature/frontend

Making PWA

react-frontend/public/index.html

@@ -40,5 +40,20 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', function() {
+          navigator.serviceWorker.register('worker.js').then(function(registration) {
+            console.log('Worker registration successful', registration.scope);
+          }, function(err) {
+            console.log('Worker registration failed', err);
+          }).catch(function(err) {
+            console.log(err);
+          });
+        });
+      } else {
+        console.log('Service Worker is not supported by browser.');
+      }
+    </script>
   </body>
 </html>

react-frontend/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Water-monitoring-system",
+  "name": "Water-monitoring-system",
   "icons": [
     {
       "src": "favicon.ico",

react-frontend/public/worker.js

@@ -0,0 +1,51 @@
+var CACHE_NAME = 'water-monitoring-system';
+var urlsToCache = [
+  '/'
+];
+
+// Install a service worker
+self.addEventListener('install', event => {
+  // Perform install steps
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(function(cache) {
+        console.log('Opened cache');
+        return cache.addAll(urlsToCache);
+      })
+      .catch(err => console.error(err))
+  );
+});
+
+// Cache and return requests
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request)
+      .then(function(response) {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      }
+    )
+    .catch(err => console.error(err))
+  );
+});
+
+// Update a service worker
+self.addEventListener('activate', event => {
+  var cacheWhitelist = ['uddesh-portfolio-pwa'];
+  event.waitUntil(
+    caches.keys()
+    .then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+    .catch(err => console.error(err))
+  );
+});

react-frontend/src/index.js

@@ -10,4 +10,4 @@ ReactDOM.render(<App />, document.getElementById('root'));
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.register();

react-frontend/src/pages/Home.js

@@ -21,8 +21,8 @@ class Home extends Component {
             </center>
           </div>
           <div className="row m-5 d-flex justify-content-center align-items-center">
-            {this.props.tanks.map(tank=> (
-              <div>
+            {this.props.tanks.map((tank, index)=> (
+              <div key={index}>
                 <div className="col-lg-3 d-flex align-items-center" id={tank.id}>
                   <center>
                     <TankCircle>
@@ -50,9 +50,11 @@ class Home extends Component {
             </div>
           </div>
           <hr/>
-          <p>
-            <center><strong>Made by Vinit Shahdeo</strong></center>
-          </p>
+          <center>
+            <p>
+              <strong>Made by Vinit Shahdeo</strong>
+            </p>
+          </center>
         </div>
       </div>
     )