@jon49/sw 0.14.6 → 0.14.8

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.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")
+  }
 }
-

package/lib/new-app-notifier.ts

@@ -1,66 +1,79 @@
 // 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
 navigator.serviceWorker.addEventListener('controllerchange', function () {
-    if (refreshing) return
-    refreshing = true
-    window.location.reload()
+  if (refreshing) return
+  refreshing = true
+  window.location.reload()
 })
 
 /// Checks if there is a new version of the app available
 /// @param fn - Callback function to be called when a new version is available
 /// @returns void
 /// @example
-/// notifier((state, worker) => {
-///     if (state !== "waiting") {
-///         // Show notification
-///     }
-///     if (/* user confirms update */) {
-///         worker.postMessage("skipWaiting")
-///     }
+/// notifier((worker) => {
+///   // Show notification to user about new version
+///   if (/* user confirms update */) {
+///     worker.postMessage("skipWaiting")
+///   }
 /// })
-function notifier(fn: (state: "" | "waiting", worker: ServiceWorker) => void) {
-    let newWorker: ServiceWorker | undefined | null
+function notifier(fn: (worker: ServiceWorker) => void) {
+  let newWorker: ServiceWorker | undefined | null
 
-    if ('serviceWorker' in navigator) {
-        // Register the service worker
-        navigator.serviceWorker.register('/web/sw.js').then(reg => {
-            if ((newWorker = reg.waiting)?.state === 'installed') {
-                // @ts-ignore
-                fn("waiting", newWorker)
-                return
-            }
-            reg.addEventListener('updatefound', () => {
-                // An updated service worker has appeared in reg.installing!
-                newWorker = reg.installing
+  if ('serviceWorker' in navigator) {
+    // Register the service worker
+    navigator.serviceWorker.register('/web/sw.js').then(reg => {
+      if ((newWorker = reg.waiting)?.state === 'installed') {
+        // @ts-ignore
+        fn(newWorker)
+        return
+      }
+      reg.addEventListener('updatefound', () => {
+        // An updated service worker has appeared in reg.installing!
+        newWorker = reg.installing
 
-                newWorker?.addEventListener('statechange', () => {
+        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)
+            }
 
-                })
-            })
         })
-    }
+      })
+    })
+  }
 }
 
 notifier(notifyUserAboutNewVersion)
 
-function notifyUserAboutNewVersion(state = "", worker: ServiceWorker) {
-    let nav = document.getElementById("sw-message")
-    nav?.insertAdjacentHTML("afterbegin", `<div class=inline><a traits=skip-waiting href="#">Click here to update your app.</a></div>`)
-    // @ts-ignore
-    window.app = window.app || {}
+function skipWaiting(id: string) {
+  let el = document.getElementById(id)
+  el?.addEventListener("click", (e: MouseEvent) => {
+    e.preventDefault()
     // @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 traits=skip-waiting href="#">Click to update the app.</a>` }
-    }))
+    window.app.sw.postMessage({ action: 'skipWaiting' })
+  })
+}
+
+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
+  skipWaiting("skipWaiting")
+  // @ts-ignore
+  window.app = window.app || {}
+  // @ts-ignore
+  window.app.sw = worker
 }

package/package.json

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