Added caching to service worker

pages/frontpage/frontpage.scarlet

@@ -39,6 +39,30 @@
 	width auto
 	height auto
 	z-index -100
+	background rgb(32, 32, 32)
+
+.login-button
+	horizontal
+	align-items center
+	border-radius 3px
+	padding 0.75rem 1.25rem
+	margin 0.5rem
+	font-size 1.2rem
+	text-shadow none !important
+	box-shadow shadow-medium
+	default-transition
+
+.login-button-google
+	background hsl(8, 75%, 43%)
+
+	:hover
+		background hsl(8, 75%, 48%)
+
+.login-button-facebook
+	background hsl(222, 67%, 42%)
+
+	:hover
+		background hsl(222, 67%, 47%)
 
 .screenshot
 	max-width 100%

pages/login/login.pixy

@@ -1,7 +1,9 @@
 component Login
 	.login-buttons
-		a.login-button(href="/auth/google")
+		a.login-button.login-button-google(href="/auth/google")
-			img.login-button-image(src="/images/login/google", alt="Google Login", title="Login with your Google account")
+			Icon("google")
+			span Sign in via Google
 
-		a.login-button(href="/auth/facebook")
+		a.login-button.login-button-facebook(href="/auth/facebook")
-			img.login-button-image(src="/images/login/facebook", alt="Facebook Login", title="Login with your Facebook account")
+			Icon("facebook")
+			span Sign in via Facebook

scripts/AnimeNotifier.ts

@@ -129,12 +129,12 @@ export class AnimeNotifier {
 
 	registerServiceWorker() {
 		navigator.serviceWorker.register("service-worker", {
-			scope: "/"
+			scope: "./"
 		})
 
-		navigator.serviceWorker.ready.then(() => {
+		// navigator.serviceWorker.ready.then(() => {
-			console.log("Service worker registered.")
+		// 	console.log("Service worker registered.")
-		})
+		// })
 	}
 
 	pushAnalytics() {

sw/service-worker.ts

@@ -1,5 +1,73 @@
 // pack:ignore
 
-self.addEventListener("install", evt => {
+var CACHE = "v-alpha"
+
+self.addEventListener("install", (evt: any) => {
 	console.log("The service worker is being installed.")
+
+	evt.waitUntil(installCache())
 })
+
+self.addEventListener("activate", (evt: any) => {
+	evt.waitUntil((self as any).clients.claim())
+})
+
+self.addEventListener("fetch", async (evt: any) => {
+	let request = evt.request
+
+	console.log("Serving:", request.url, request, request.method)
+
+	// Do not use cache in some cases
+	if(request.method !== "GET" || request.url.includes("/auth/") || request.url.includes("chrome-extension")) {
+		return evt.waitUntil(evt.respondWith(fetch(request)))
+	}
+	
+	// Start fetching the request
+	let refresh = fetch(request).then(response => {
+		let clone = response.clone()
+
+		// Save the new version of the resource in the cache
+		caches.open(CACHE).then(cache => {
+			cache.put(request, clone)
+		})
+
+		return response
+	})
+
+	// Try to serve cache first and fall back to network response
+	let networkOrCache = fromCache(request).catch(error => {
+		console.log("Cache MISS:", request.url)
+		return refresh
+	})
+
+	return evt.waitUntil(evt.respondWith(networkOrCache))
+})
+
+function installCache() {
+	return caches.open(CACHE).then(cache => {
+		return cache.addAll([
+			"./",
+			"./scripts",
+			"https://fonts.gstatic.com/s/ubuntu/v10/2Q-AW1e_taO6pHwMXcXW5w.ttf"
+		])
+	})
+}
+
+function fromCache(request) {
+	return caches.open(CACHE).then(cache => {
+		return cache.match(request).then(matching => {
+			if(matching) {
+				console.log("Cache HIT:", request.url)
+				return Promise.resolve(matching)
+			}
+
+			return Promise.reject("no-match")
+		})
+	})
+}
+
+function updateCache(request, response) {
+	return caches.open(CACHE).then(cache => {
+		cache.put(request, response)
+	})
+}