Pulse7
9/11/2017 - 4:39 PM

Service Workers

chrome://serviceworker-internals/ chrome://inspect/#service-workers

service-worker.js
content_copyfile_download
var cacheName = "v3";
var cacheFiles = [
    "./",
    "./index.html",
    "./css/reset.css",
    "./css/style.css",
    "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic",
    "./js/app.js",
]

self.addEventListener('install', function (e) {
    console.log("[ServiceWorker] Installed");
    e.waitUntil(
        caches.open(cacheName).then(function (cache) {
            console.log("[ServiceWorker] Caching cacheFiles");
            return cache.addAll(cacheFiles);
        })
    )
});

self.addEventListener('activate', function (e) {
    console.log("[ServiceWorker] Activated");

    e.waitUntil(
        caches.keys().then(function (cacheNames) {
            return Promise.all(cacheNames.map(thisCacheName => {
                if (thisCacheName !== cacheName) {
                    console.log("[Service Worker] Removing Cached Files from ", thisCacheName);
                    return caches.delete(thisCacheName);
                }
            }))
        })
    );
});

self.addEventListener('fetch', function (e) {
    console.log("[ServiceWorker] Fetching", e.request.url);

    e.respondWith(
        caches.match(e.request).then(function (response) {
            //if cache exists for this request
            if (response) {
                console.log("[ServiceWorker] Found in cache", e.request.url);
                return response;
            }

            var requestClone = e.request.clone();

            fetch(e.request)
                .then(function(response){
                    if (!response){
                        console.log("[ServiceWorker] No response from fetch");
                        return response;
                    }
                    var responseClone = response.clone();
                    return caches.open(cacheName).then(function(cache){
                        cache.put(e.request, responseClone);
                        return response;
                    })
                })
                .catch(function(err){
                    console.log("[ServiceWorker] Error fetching & Caching");
                })
        })
    )
})
app.js
content_copyfile_download
if ('serviceWorker' in navigator){
    navigator.serviceWorker
        .register("service-worker.js",{scope:'./'})
        .then(function(registration){
            console.log("Service Worker Registered");
        })
        .catch(function(err){
            console.log("Service Worker Failed to Register",err);
        })
}

var get = function(url){
    return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readyState === XMLHttpRequest.DONE){
                if (xhr.status === 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    resolve(result);
                } else {
                    reject(xhr);
                }
            }
        }
        xhr.open("GET", url, true);
        xhr.send();
    });
}

get("https://api.github.com/users/ab")
    .then(function(response){
        console.log("Success", response);
        document.getElementsByClassName('targetImage')[0].src = response.avatar_url;
    })
    .catch(function(err){
        console.log("Error", err);
    })
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Service Worker</title>
</head>
<body>
    <h1 id="fader" class="fadeable">Hello Service Workers!</h1>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>