👽 manifest updates, add service worker

funkyFangs · Oct 27, 2024 · 8816634 · 8816634
1 parent 549d211
commit 8816634
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 47 deletions.
diff --git a/src/app.html b/src/app.html
@@ -3,7 +3,7 @@
   <head>
     <title>Shiny Hunter</title>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link rel="icon" href="%sveltekit.assets%/icons/32.png" type="image/png" sizes="32x32" />
     <link rel="manifest" href="%sveltekit.assets%/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

diff --git a/src/lib/api/GenerationResource.ts b/src/lib/api/GenerationResource.ts
@@ -1,14 +1,13 @@
 import type { LinkResource } from '$lib/api/LinkResource'
 import { titleCase } from '$lib/utilities/Strings'
-import { type FetchFunction, getResourceWithCache, type Identifier } from '$lib/api/PokeAPI'
+import { type FetchFunction, getResource, type Identifier } from '$lib/api/PokeAPI'
 import type { PokemonSpecies } from '$lib/api/PokemonSpeciesResource'
 import type { VersionGroup } from '$lib/api/VersionGroupResource'
 
 export const MAX_GENERATION = 7
 export const MIN_GENERATION = 2
 
 export const GENERATION_ENDPOINT = 'generation'
-export const GENERATION_CACHE = 'generations'
 
 export interface GenerationResource {
   name: string
@@ -33,10 +32,5 @@ export async function getGenerationResource(
   identifier: Identifier,
   fetchCallback: FetchFunction = fetch
 ) {
-  return getResourceWithCache<GenerationResource>(
-    GENERATION_ENDPOINT,
-    GENERATION_CACHE,
-    identifier,
-    fetchCallback
-  )
+  return getResource<GenerationResource>(GENERATION_ENDPOINT, identifier, fetchCallback)
 }
diff --git a/src/lib/api/PokeAPI.ts b/src/lib/api/PokeAPI.ts
@@ -1,18 +1,5 @@
-import { fetchWithCache } from '$lib/storage/Cache'
-
 export const API_URL = 'https://pokeapi.co/api/v2'
 
-export async function getResourceWithCache<Resource>(
-  endpoint: string,
-  cacheName: string,
-  identifier: Identifier,
-  fetchCallback: FetchFunction = fetch
-): Promise<Resource> {
-  return fetchWithCache(buildUrl(endpoint, identifier), cacheName, fetchCallback).then((response) =>
-    response.json()
-  )
-}
-
 export async function getResource<Resource>(
   endpoint: string,
   identifier: Identifier,

diff --git a/src/lib/api/PokemonSpeciesResource.ts b/src/lib/api/PokemonSpeciesResource.ts
@@ -1,7 +1,7 @@
 import type { LinkResource } from '$lib/api/LinkResource'
 import type { PokedexNumberResource } from '$lib/api/PokedexNumberResource'
 import type { VarietyResource } from '$lib/api/VarietyResource'
-import { type FetchFunction, getResourceWithCache, type Identifier } from '$lib/api/PokeAPI'
+import { type FetchFunction, getResource, type Identifier } from '$lib/api/PokeAPI'
 import { getPokemon, type Pokemon } from '$lib/api/PokemonResource'
 import { delimitedTitleCase } from '$lib/utilities/Strings'
 
@@ -23,15 +23,13 @@ export interface PokemonSpecies {
 }
 
 export const POKEMON_SPECIES_ENDPOINT = 'pokemon-species'
-export const POKEMON_SPECIES_CACHE = 'pokemonSpecies'
 
 export async function getPokemonSpecies(
   identifier: Identifier,
   fetchCallback: FetchFunction = fetch
 ): Promise<PokemonSpecies> {
-  return getResourceWithCache<PokemonSpeciesResource>(
+  return getResource<PokemonSpeciesResource>(
     POKEMON_SPECIES_ENDPOINT,
-    POKEMON_SPECIES_CACHE,
     identifier,
     fetchCallback
   ).then(async (pokemonSpeciesResource) => ({

diff --git a/src/lib/storage/Cache.ts b/src/lib/storage/Cache.ts
diff --git a/src/service-worker.js b/src/service-worker.js
@@ -0,0 +1,73 @@
+import { build, files, version } from '$service-worker'
+
+const CACHE = `cache-${version}`
+
+const ASSETS = [...build, ...files]
+
+self.addEventListener('install', (event) => {
+  async function addFilesToCache() {
+    const cache = await caches.open(CACHE)
+    await cache.addAll(ASSETS)
+  }
+
+  event.waitUntil(addFilesToCache())
+})
+
+self.addEventListener('activate', (event) => {
+  // Remove previous cached data from disk
+  async function deleteOldCaches() {
+    for (const key of await caches.keys()) {
+      if (key !== CACHE) await caches.delete(key)
+    }
+  }
+
+  event.waitUntil(deleteOldCaches())
+})
+
+self.addEventListener('fetch', (event) => {
+  // ignore POST requests etc
+  if (event.request.method !== 'GET') return
+
+  async function respond() {
+    const url = new URL(event.request.url)
+    const cache = await caches.open(CACHE)
+
+    if (ASSETS.includes(url.pathname)) {
+      const response = await cache.match(url.pathname)
+
+      if (response) {
+        return response
+      }
+    }
+
+    // for everything else, try the network first, but
+    // fall back to the cache if we're offline
+    try {
+      const response = await fetch(event.request)
+
+      // if we're offline, fetch can return a value that is not a Response
+      // instead of throwing - and we can't pass this non-Response to respondWith
+      if (!(response instanceof Response)) {
+        throw new Error('invalid response from fetch')
+      }
+
+      if (response.status === 200) {
+        await cache.put(event.request, response.clone())
+      }
+
+      return response
+    } catch (err) {
+      const response = await cache.match(event.request)
+
+      if (response) {
+        return response
+      }
+
+      // if there's no cache, then just error out
+      // as there is nothing we can do to respond to this request
+      throw err
+    }
+  }
+
+  event.respondWith(respond())
+})
diff --git a/static/favicon.png b/static/favicon.png
diff --git a/static/manifest.json b/static/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Shiny Hunter",
   "description": "Shiny Hunter is a progressive web application built for tracking hunts for shiny Pokémon.",
-  "start_url": "/",
+  "start_url": ".",
   "icons": [
     {
       "src": "icons/512.png",
@@ -19,5 +19,7 @@
       "sizes": "32x32"
     }
   ],
+  "categories": ["games"],
+  "orientation": "portrait",
   "display": "standalone"
 }