modified: index.html

modified:   js/sw.js

index.html

@@ -28,14 +28,13 @@
         </div>
     </body>
     <script>
-        if ('serviceWorker' in navigator) {
-    window.addEventListener('load', function() {
-        navigator.serviceWorker.register('https://darkshy.bronyfurry.com/js/pwabuilder-sw.js').then(function(registration) {
-            console.log('ServiceWorker registration successful with scope: ', registration.scope);
-        }, function(err) {
-            console.log('ServiceWorker registration failed: ', err);
-        });
-    });
+       if ('serviceWorker' in navigator) {
+    // Весь код регистрации у нас асинхронный.
+    navigator.serviceWorker.register('./sw.js')
+      .then(() => navigator.serviceWorker.ready.then((worker) => {
+        worker.sync.register('syncdata');
+      }))
+      .catch((err) => console.log(err));
 }
       </script>
 </html>

js/sw.js

@@ -1,15 +1,51 @@
-const CACHE_NAME = 'DarkShy-Cache';
-
-// Add whichever assets you want to precache here:
-const PRECACHE_ASSETS = [
-    '/img/',
-    '/css/'
-]
-
-// Listener for the install event - precaches our assets list on service worker install.
-self.addEventListener('install', event => {
-    event.waitUntil((async () => {
-        const cache = await caches.open(CACHE_NAME);
-        cache.addAll(PRECACHE_ASSETS);
-    })());
+self.addEventListener('install', (event) => {
+    console.log('Установлен');
 });
+
+self.addEventListener('activate', (event) => {
+    console.log('Активирован');
+});
+
+self.addEventListener('fetch', (event) => {
+    console.log('Происходит запрос на сервер');
+});
+const CACHE = 'network-or-cache-v1';
+const timeout = 400;
+// При установке воркера мы должны закешировать часть данных (статику).
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE).then((cache) => cache.addAll([
+                '/img/favicon.ico',
+                '/css/style.css'
+            ])
+        ));
+});
+
+// при событии fetch, мы и делаем запрос, но используем кэш, только после истечения timeout.
+self.addEventListener('fetch', (event) => {
+    event.respondWith(fromNetwork(event.request, timeout)
+      .catch((err) => {
+          console.log(`Error: ${err.message()}`);
+          return fromCache(event.request);
+      }));
+});
+
+// Временно-ограниченный запрос.
+function fromNetwork(request, timeout) {
+    return new Promise((fulfill, reject) => {
+        var timeoutId = setTimeout(reject, timeout);
+        fetch(request).then((response) => {
+            clearTimeout(timeoutId);
+            fulfill(response);
+        }, reject);
+    });
+}
+
+function fromCache(request) {
+// Открываем наше хранилище кэша (CacheStorage API), выполняем поиск запрошенного ресурса.
+// Обратите внимание, что в случае отсутствия соответствия значения Promise выполнится успешно, но со значением `undefined`
+    return caches.open(CACHE).then((cache) =>
+        cache.match(request).then((matching) =>
+            matching || Promise.reject('no-match')
+        ));
+}