diff --git a/pages/frontpage/frontpage.scarlet b/pages/frontpage/frontpage.scarlet index f13e5a70..1d8a3285 100644 --- a/pages/frontpage/frontpage.scarlet +++ b/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% diff --git a/pages/login/login.pixy b/pages/login/login.pixy index 883cd798..23396163 100644 --- a/pages/login/login.pixy +++ b/pages/login/login.pixy @@ -1,7 +1,9 @@ component Login .login-buttons - a.login-button(href="/auth/google") - img.login-button-image(src="/images/login/google", alt="Google Login", title="Login with your Google account") + a.login-button.login-button-google(href="/auth/google") + Icon("google") + span Sign in via Google - a.login-button(href="/auth/facebook") - img.login-button-image(src="/images/login/facebook", alt="Facebook Login", title="Login with your Facebook account") \ No newline at end of file + a.login-button.login-button-facebook(href="/auth/facebook") + Icon("facebook") + span Sign in via Facebook \ No newline at end of file diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 4301a1e2..13f4d0a0 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -129,12 +129,12 @@ export class AnimeNotifier { registerServiceWorker() { navigator.serviceWorker.register("service-worker", { - scope: "/" + scope: "./" }) - navigator.serviceWorker.ready.then(() => { - console.log("Service worker registered.") - }) + // navigator.serviceWorker.ready.then(() => { + // console.log("Service worker registered.") + // }) } pushAnalytics() { diff --git a/sw/service-worker.ts b/sw/service-worker.ts index 7deffa06..0c93229d 100644 --- a/sw/service-worker.ts +++ b/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.") -}) \ No newline at end of file + + 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) + }) +}