@jon49/sw 0.14.7 → 0.15.0

package/bin/lib/file-mapper.ts

@@ -4,84 +4,83 @@ import path from "node:path"
 import { getHash, glob, write } from "./system.ts"
 
 export interface FileMapper {
-    url: string
-    file: string
+  url: string
+  file: string
 }
 
 function isFileMapper(x: any | undefined): x is FileMapper {
-    return x?.url && x?.file
+  return x?.url && x?.file
 }
 
 let option: { isRunning: boolean, isWaiting: NodeJS.Timeout | null } = {
-    isRunning: false,
-    isWaiting: null
+  isRunning: false,
+  isWaiting: null
 }
 
 export async function fileMapper(targetDirectory: string, force = false) {
-    if (option.isRunning || option.isWaiting || !force) {
-        if (option.isWaiting) {
-            clearTimeout(option.isWaiting)
-        }
-        option.isWaiting = setTimeout(() => {
-            option.isWaiting = null
-            fileMapper(targetDirectory, true)
-        }, 30)
-        return
-    }
-    try {
-        option.isRunning = true
-        console.time("File Mapper")
-
-        let oldFileMapperFiles = await glob("**/file-map.*.js", targetDirectory)
-        Promise.all(oldFileMapperFiles.map(async x => {
-            await rm(`${targetDirectory}/${x}`)
-        }))
-
-        let files: string[] = await glob("**/*.{js,css,json,ico,svg,png}", targetDirectory)
-
-        let mapper = files.map(x => {
-            let parsed = path.parse(x)
-            let parsed2 = path.parse(parsed.name)
-            let url = `/${parsed.dir}/${parsed2.name}${parsed.ext}`
-            let file = `/${x}`
-            return {
-                url,
-                file,
-            }
-        })
-        .filter(isFileMapper)
-
-        if (option.isWaiting) return
-        // Write mapper to file in src/web/file-map.js
-        let fileMapJsonContent = JSON.stringify(mapper)
-        let hash = getHash(fileMapJsonContent)
-        let fileMapUrl = `/web/file-map.${hash}.js`
-
-        fileMapJsonContent = `${fileMapJsonContent.slice(0, -1)},{"url":"/web/file-map.js","file":"${fileMapUrl}"}]`
-
-        let fileMapContent = `(() => { self.app = { links: ${fileMapJsonContent} } })()`
-        await write(`${targetDirectory}${fileMapUrl}`, fileMapContent)
-
-        let globalFiles =
-            mapper
-            .filter(x => x.url.includes(".global."))
-            .map(x => x.file)
-            .join(`","`)
-
-        let swFile = mapper.find(x => x.url === "/web/sw.js")?.file
-
-        let globals = `${globalFiles && `"`}${globalFiles}${globalFiles && `",`}`
-        // Create service worker central file
-        if (option.isWaiting) return
-        await write(
-            `${targetDirectory}/web/sw.js`,
-            `importScripts("${fileMapUrl}",${globals}"${swFile}")`)
-
-    } catch (error) {
-        console.error(error)
-    } finally {
-        option.isRunning = false
-        console.timeEnd("File Mapper")
+  if (option.isRunning || option.isWaiting || !force) {
+    if (option.isWaiting) {
+      clearTimeout(option.isWaiting)
     }
+    option.isWaiting = setTimeout(() => {
+      option.isWaiting = null
+      fileMapper(targetDirectory, true)
+    }, 30)
+    return
+  }
+  try {
+    option.isRunning = true
+    console.time("File Mapper")
+
+    let oldFileMapperFiles = await glob("**/file-map.*.js", targetDirectory)
+    Promise.all(oldFileMapperFiles.map(async x => {
+      await rm(`${targetDirectory}/${x}`)
+    }))
+
+    let files: string[] = await glob("**/*.{js,css,json,ico,svg,png}", targetDirectory)
+
+    let mapper = files.map(x => {
+      let parsed = path.parse(x)
+      let parsed2 = path.parse(parsed.name)
+      let url = `/${parsed.dir}/${parsed2.name}${parsed.ext}`
+      let file = `/${x}`
+      return {
+        url,
+        file,
+      }
+    })
+    .filter(isFileMapper)
+
+    if (option.isWaiting) return
+    // Write mapper to file in src/web/file-map.js
+    let fileMapJsonContent = JSON.stringify(mapper)
+    let hash = getHash(fileMapJsonContent)
+    let fileMapUrl = `/web/file-map.${hash}.js`
+
+    fileMapJsonContent = `${fileMapJsonContent.slice(0, -1)},{"url":"/web/file-map.js","file":"${fileMapUrl}"}]`
+
+    let fileMapContent = `(() => { self.sw = { links: ${fileMapJsonContent} } })()`
+    await write(`${targetDirectory}${fileMapUrl}`, fileMapContent)
+
+    let globalFiles =
+      mapper
+      .filter(x => x.url.includes(".global."))
+      .map(x => x.file)
+      .join(`","`)
+
+    let swFile = mapper.find(x => x.url === "/web/sw.js")?.file
+
+    let globals = `${globalFiles && `"`}${globalFiles}${globalFiles && `",`}`
+    // Create service worker central file
+    if (option.isWaiting) return
+    await write(
+      `${targetDirectory}/web/sw.js`,
+      `importScripts("${fileMapUrl}",${globals}"${swFile}")`)
+
+  } catch (error) {
+    console.error(error)
+  } finally {
+    option.isRunning = false
+    console.timeEnd("File Mapper")
+  }
 }
-

package/lib/new-app-notifier.ts

@@ -1,4 +1,5 @@
 // https://deanhume.com/displaying-a-new-version-available-progressive-web-app/
+const isDev = ["localhost", "127.0.0.1"].includes(document.location.hostname)
 let refreshing = false
 // The event listener that is fired when the service worker updates
 // Here we reload the page
@@ -12,15 +13,13 @@ navigator.serviceWorker.addEventListener('controllerchange', function () {
 /// @param fn - Callback function to be called when a new version is available
 /// @returns void
 /// @example
-/// notifier((state, worker) => {
-///   if (state !== "waiting") {
-///     // Show notification
-///   }
+/// notifier((worker) => {
+///   // Show notification to user about new version
 ///   if (/* user confirms update */) {
 ///     worker.postMessage("skipWaiting")
 ///   }
 /// })
-function notifier(fn: (state: "" | "waiting", worker: ServiceWorker) => void) {
+function notifier(fn: (worker: ServiceWorker) => void) {
   let newWorker: ServiceWorker | undefined | null
 
   if ('serviceWorker' in navigator) {
@@ -28,7 +27,7 @@ function notifier(fn: (state: "" | "waiting", worker: ServiceWorker) => void) {
     navigator.serviceWorker.register('/web/sw.js').then(reg => {
       if ((newWorker = reg.waiting)?.state === 'installed') {
         // @ts-ignore
-        fn("waiting", newWorker)
+        fn(newWorker)
         return
       }
       reg.addEventListener('updatefound', () => {
@@ -37,11 +36,19 @@ function notifier(fn: (state: "" | "waiting", worker: ServiceWorker) => void) {
 
         newWorker?.addEventListener('statechange', () => {
 
-          // There is a new service worker available, show the notification
-          if (newWorker?.state === "installed" && navigator.serviceWorker.controller) {
-            navigator.serviceWorker.controller.postMessage("installed")
-            fn("", newWorker)
-          }
+            // There is a new service worker available, show the notification
+            if (newWorker?.state === "installed" && navigator.serviceWorker.controller) {
+              navigator.serviceWorker.controller.postMessage("installed")
+              // If we're in dev/server auto-activate the new worker
+              if (isDev) {
+                try {
+                  newWorker.postMessage({ action: 'skipWaiting' })
+                } catch (err) {
+                  // Ignore if worker doesn't accept messages
+                }
+              }
+              fn(newWorker)
+            }
 
         })
       })
@@ -60,7 +67,7 @@ function skipWaiting(id: string) {
   })
 }
 
-function notifyUserAboutNewVersion(state = "", worker: ServiceWorker) {
+function notifyUserAboutNewVersion(worker: ServiceWorker) {
   let nav = document.getElementById("sw-message")
   nav?.insertAdjacentHTML("afterbegin", `<div class=inline><a id=skipWaiting href="#">Click here to update your app.</a></div>`)
   // @ts-ignore
@@ -69,11 +76,4 @@ function notifyUserAboutNewVersion(state = "", worker: ServiceWorker) {
   window.app = window.app || {}
   // @ts-ignore
   window.app.sw = worker
-  if (state === "waiting") return
-  // Publish custom event for "user-messages" to display a toast.
-  document.dispatchEvent(new CustomEvent("user-messages", {
-    detail: { html: `A new version of the app is available. <a id=skipWaiting1 href="#">Click to update the app.</a>` }
-  }))
-  // @ts-ignore
-  skipWaiting("skipWaiting1")
 }

package/lib/routes.middleware.ts

@@ -3,10 +3,10 @@ import { isHtml } from "./utils.js"
 
 let { links, globalDb } =
     // @ts-ignore
-    self.app as { links: { file: string, url: string }[], html: Function, db: any, globalDb: any }
+    self.sw as { links: { file: string, url: string }[], html: Function, db: any, globalDb: any }
 
 if (!links) {
-    console.error("Expecting links defined with `self.app.links`, but found none.")
+    console.error("Expecting links defined with `self.sw.links`, but found none.")
 }
 
 function redirect(req: Request) {
@@ -66,12 +66,12 @@ export async function findRoute(url: URL, method: unknown) {
     let validMethod: MethodTypes = isMethod(method)
     if (validMethod) {
         // @ts-ignore
-        if (!self.app?.routes) {
-            console.error("Expecting routes defined with `self.app.routes`, but found none.")
+        if (!self.sw?.routes) {
+            console.error("Expecting routes defined with `self.sw.routes`, but found none.")
             return null
         }
         // @ts-ignore
-        for (const r of self.app.routes) {
+        for (const r of self.sw.routes) {
             // @ts-ignore
             if (r.file
                 && (r.route instanceof RegExp && r.route.test(url.pathname)
@@ -262,8 +262,8 @@ async function cacheResponse(url: string, req?: Request | undefined): Promise<Re
     if (!res || res.status !== 200 || res.type !== "basic") return res
     const responseToCache = res.clone()
     // @ts-ignore
-    let version: string = self.app?.version
-        ?? (console.warn("The version number is not available, expected glboal value `self.app.version`."), "")
+    let version: string = self.sw?.version
+        ?? (console.warn("The version number is not available, expected glboal value `self.sw.version`."), "")
     const cache = await caches.open(version)
     cache.put(url, responseToCache)
     return res

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jon49/sw",
-  "version": "0.14.7",
+  "version": "0.15.0",
   "description": "Packages for MVC service workers.",
   "type": "module",
   "files": [