Fill out PWA manifest

.eleventy.js

@@ -55,6 +55,8 @@ module.exports = (eleventyConfig) => {
     }
   );
 
+  eleventyConfig.addPassthroughCopy({ "src/pwa/**/*.png": "/" });
+
   // Apply custom transforms to bundled JS and CSS
   eleventyConfig.addPlugin(bundlerPlugin, {
     transforms: [

src/index.webc

@@ -12,6 +12,7 @@ meta:
     <meta name="description" :content="meta.description" />
     <meta name="generator" :content="eleventy.generator" />
     <title @html="meta.title"></title>
+    <link rel="icon" type="image/png" href="/icon32x32.png" />
 
     <link rel="manifest" href="/manifest.json" />
 

src/js/game.mjs

@@ -34,17 +34,18 @@ function getWordScore(word) {
   };
 }
 
-const openGameDBPromise = import(
-  "https://cdn.jsdelivr.net/npm/idb@7/+esm"
-).then(({ openDB }) =>
-  openDB("SpellingBee", 1, {
+const importIdb = import("https://cdn.jsdelivr.net/npm/idb@7/+esm");
+
+async function openGameDB() {
+  const { openDB } = await importIdb;
+  return openDB("SpellingBee", 1, {
     upgrade(db) {
       db.createObjectStore("dailyGames", {
         keyPath: "timestamp",
       });
     },
-  })
-);
+  });
+}
 
 let wordData;
 async function loadWordData() {
@@ -137,8 +138,9 @@ Alpine.store("game", {
   ],
   async syncWithDB() {
     try {
-      const gameDB = await openGameDBPromise;
+      const gameDB = await openGameDB();
       const gameData = await gameDB.get("dailyGames", this.timestamp);
+      gameDB.close();
 
       if (gameData) {
         this.centerLetter = gameData.centerLetter;
@@ -171,15 +173,17 @@ Alpine.store("game", {
     const validWords = this.validWords.slice();
     const guessedWords = this.guessedWords.slice();
 
-    return openGameDBPromise
+    return openGameDB()
       .then((gameDB) =>
-        gameDB.put("dailyGames", {
-          timestamp,
-          centerLetter,
-          outerLetters,
-          validWords,
-          guessedWords,
-        })
+        gameDB
+          .put("dailyGames", {
+            timestamp,
+            centerLetter,
+            outerLetters,
+            validWords,
+            guessedWords,
+          })
+          .then(() => gameDB.close())
       )
       .catch((e) => console.error("Error updating DB", e));
   },

src/pwa/manifest.json

@@ -2,5 +2,20 @@
   "name": "Open Spelling Bee",
   "description": "An open source spelling bee game for the web",
   "start_url": "/",
-  "display": "fullscreen"
+  "id": "/",
+  "display": "fullscreen",
+  "icons": [
+    {
+      "src": "/icon512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "/icon32x32.png",
+      "type": "image/png",
+      "sizes": "32x32"
+    }
+  ],
+  "theme_color": "#fdd000",
+  "background_color": "#ffffff"
 }

src/pwa/serviceWorker.js

@@ -1,4 +1,4 @@
-const cacheName = "open-spelling-bee-1.1.5";
+const cacheName = "open-spelling-bee-1.1.6";
 const cacheFiles = ["/", "/index.html"];
 
 self.addEventListener("install", (e) => {