mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-14 03:23:41 +02:00
Merge pull request #6 from VictorWesterlund/feature/sw
Service Worker & Offline Caching
This commit is contained in:
commit
a9d7083e23
4 changed files with 90 additions and 10 deletions
8
public/assets/img/pattern.php
Normal file
8
public/assets/img/pattern.php
Normal file
|
@ -0,0 +1,8 @@
|
|||
<?php
|
||||
|
||||
$gif = imagecreatefromgif("./pattern.gif");
|
||||
|
||||
header("Content-Type: image/gif");
|
||||
|
||||
imagegif($gif);
|
||||
imagedestroy($gif);
|
|
@ -0,0 +1,3 @@
|
|||
if(navigator.serviceWorker) {
|
||||
navigator.serviceWorker.register("sw.js");
|
||||
}
|
|
@ -1,13 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-5PBVM28');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Full-stack web developer from Stockholm, Sweden.">
|
||||
|
@ -17,9 +10,6 @@
|
|||
<title>Victor Westerlund</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5PBVM28" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<main>
|
||||
<div id="intro">
|
||||
<div class="inner">
|
||||
|
|
79
public/sw.js
79
public/sw.js
|
@ -0,0 +1,79 @@
|
|||
const version = "12062129";
|
||||
const root = "/victorwesterlund.com/public/";
|
||||
|
||||
let activeCaches = [
|
||||
`content-${version}`
|
||||
];
|
||||
|
||||
self.addEventListener("install", event => {
|
||||
event.waitUntil(
|
||||
caches.open(`content-${version}`).then(cache => cache.addAll([
|
||||
root,
|
||||
root + "offline.txt",
|
||||
root + "assets/css/style.css",
|
||||
root + "assets/img/favicon.png",
|
||||
root + "assets/js/script.js",
|
||||
root + "assets/img/pattern.gif",
|
||||
root + "assets/fonts/RobotoMono-Bold.woff2",
|
||||
root + "assets/fonts/RobotoMono-Regular.woff2"
|
||||
]))
|
||||
)
|
||||
});
|
||||
|
||||
self.addEventListener("activate", event => {
|
||||
event.waitUntil(
|
||||
// Delete inactive caches
|
||||
caches.keys().then(cacheNames => {
|
||||
return Promise.all(
|
||||
cacheNames.map(cacheName => {
|
||||
if(!activeCaches.includes(cacheName)) {
|
||||
return caches.delete(cacheName);
|
||||
}
|
||||
})
|
||||
)
|
||||
})
|
||||
)
|
||||
});
|
||||
|
||||
// Fetch and save content to bucket
|
||||
async function fetchContent(event) {
|
||||
const networkFetch = fetch(event.request);
|
||||
|
||||
event.waitUntil(
|
||||
networkFetch.then(response => {
|
||||
const responseClone = response.clone();
|
||||
caches.open("bucket").then(cache => cache.put(event.request, responseClone));
|
||||
})
|
||||
);
|
||||
|
||||
const response = await caches.match(event.request);
|
||||
return response || networkFetch;
|
||||
}
|
||||
|
||||
self.addEventListener("fetch", event => {
|
||||
const url = new URL(event.request.url);
|
||||
const origin = (url.origin == location.origin) ? true : false; // Is same-origin
|
||||
|
||||
// Fetch cross-origin content
|
||||
if(!origin) {
|
||||
event.respondWith(fetch(url.href));
|
||||
return;
|
||||
}
|
||||
|
||||
// Get pattern.gif from generator. Fallback to cache on failure
|
||||
if(origin && url.pathname.endsWith("pattern.gif")) {
|
||||
const pattern = new Request(`${location.origin}/${root}assets/img/pattern.php`);
|
||||
event.respondWith(
|
||||
fetch(pattern).catch(() => {
|
||||
return caches.match(event.request);
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Respond with content for cache or fetch and save
|
||||
event.respondWith(
|
||||
caches.match(event.request).then(response => response || fetchContent(event))
|
||||
);
|
||||
});
|
||||
// Victor Westerlund
|
Loading…
Add table
Reference in a new issue