Service Workers HTML

Сложность: Продвинутый

Service Workers в HTML

Service Workers позволяют создавать оффлайн-приложения.

Базовый пример:

<!-- index.html -->
<script>
// Регистрация Service Worker
if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/sw.js")
        .then(registration => {
            console.log("SW registered: ", registration);
        })
        .catch(error => {
            console.log("SW registration failed: ", error);
        });
}
</script>

<!-- sw.js -->
const CACHE_NAME = "my-cache-v1";
const urlsToCache = [
    "/",
    "/styles/main.css",
    "/script/main.js"
];

self.addEventListener("install", event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    return response;
                }
                return fetch(event.request);
            })
    );
});