Add service-worker

marcodearaujo · marcodearaujo · commit 41c1a9b1f5bb · 2016-12-21T21:14:19.000-02:00
diff --git a/public/index.html b/public/index.html
@@ -5,11 +5,11 @@
         <meta name="theme-color" content="#00d1b2">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <link rel="manifest" href="/manifest.json">
-        <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
-        <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
-        <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
-        <link rel="manifest" href="/manifest.json">
-        <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
+        <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
+        <link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
+        <link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
+        <link rel="manifest" href="manifest.json">
+        <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
         <title>React Client</title>
     </head>
     <body>
@@ -18,6 +18,20 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.8.1/ReactRouter.min.js" integrity="sha256-Ve10xzUoKZr2up5joKtdW0RfY6R/6nWBO0x8AuOxp1s=" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js" integrity="sha256-JIW8lNqN2EtqC6ggNZYnAdKMJXRQfkPMvdRt+b0/Jxc=" crossorigin="anonymous"></script>
         <script async src="dist/bundle.min.js"></script>
+        <script>
+            // Check for browser support of service worker
+            if ('serviceWorker' in navigator) {
+                navigator.serviceWorker.register('service-worker.js')
+                    .then(function(registration) {
+                        // Successful registration
+                        console.log('Hooray. Registration successful, scope is:', registration.scope);
+                    })
+                    .catch(function(error) {
+                        // Failed registration, service worker won’t be installed
+                        console.log('Whoops. Service worker registration failed, error:', error);
+                    });
+            }
+        </script>
         <noscript>
             <p>Ops! JavaScript is disabled. You can't use this app.</p>
         </noscript>
diff --git a/public/service-worker.js b/public/service-worker.js
@@ -0,0 +1,56 @@
+var CACHE_NAME = 'v1::iClient';
+var urlsToCache = [
+    '/',
+    '/index.html',
+    '/dist/bundle.min.js',
+    '/favicons/favicon-16x16.png',
+    'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons.min.js',
+    'https://cdnjs.cloudflare.com/ajax/libs/react-router/2.8.1/ReactRouter.min.js',
+    'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js',
+];
+
+self.addEventListener('install', function(event) {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then(function(cache) {
+            return cache.addAll(urlsToCache);
+        })
+    );
+});
+
+self.addEventListener('activate', function(event) {
+    event.waitUntil(
+        caches.keys().then(function(cacheNames) {
+            return Promise.all(
+                cacheNames.filter(function(cacheName) {
+                    return cacheName !== CACHE_NAME;
+                }).map(function(cacheName) {
+                    return caches.delete(cacheName);
+                })
+            );
+        })
+    );
+});
+self.addEventListener('fetch', function(event) {
+    var requestURL = new URL(event.request.url);
+
+    event.respondWith(
+        caches.open(CACHE_NAME).then(function(cache) {
+            return cache.match(event.request).then(function(response) {
+                if (response) {
+                    return response;
+                }
+                return fetch(event.request).then(function(response) {
+                    if (response.ok) {
+                        cache.put(event.request, response.clone()).catch(function(error) {
+                            return new Response("Request failed!");
+                        });
+                    }
+                    return response;
+                }).catch(function(e) {
+                    return new Response("Request failed!");
+                });
+            });
+        })
+    );
+});
+
