@mapvx/web-components 0.0.25 → 0.0.27

package/dist/sw/mvx-tiles-sw.js

@@ -0,0 +1,63 @@
+/*
+  MapVX Tiles Service Worker (Workbox)
+  - Cache-first for PBF tiles
+  - Stale-while-revalidate for other assets
+  - Restricted to lazarillo.app and mapvx.com (any subdomain)
+
+  How to use:
+  1) Copy this file to your site root as "/mvx-tiles-sw.js"
+  2) Ensure the site is served over HTTPS
+  3) Our Web Components will attempt to register it at load time
+*/
+
+/* eslint-env serviceworker */
+/* global workbox, importScripts */
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js');
+
+const { registerRoute } = workbox.routing;
+const { CacheFirst, StaleWhileRevalidate } = workbox.strategies;
+const { CacheableResponsePlugin } = workbox.cacheableResponse;
+const { ExpirationPlugin } = workbox.expiration;
+
+// Preload modules as recommended by Workbox (avoid async imports inside handlers)
+workbox.loadModule('workbox-routing');
+workbox.loadModule('workbox-strategies');
+workbox.loadModule('workbox-cacheable-response');
+workbox.loadModule('workbox-expiration');
+
+const ALLOWED_HOSTS = ['mapvx.com', 'lazarillo.app'];
+const isAllowedHost = hostname => ALLOWED_HOSTS.some(host => hostname.endsWith(host));
+
+// API cache for mapvx. Adjust the pattern if needed for additional endpoints
+registerRoute(
+  ({ url }) => url.hostname === 'api.mapvx.com',
+  new workbox.strategies.NetworkFirst({
+    cacheName: 'api-cache',
+    plugins: [
+      new workbox.cacheableResponse.CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+    ],
+  })
+);
+
+// PBF tiles → CacheFirst
+registerRoute(
+  ({ url }) => isAllowedHost(url.hostname) && /\.pbf($|\?)/.test(url.pathname),
+  new CacheFirst({
+    cacheName: 'tiles-pbf',
+    plugins: [
+      new CacheableResponsePlugin({ statuses: [0, 200] }),
+      new ExpirationPlugin({ maxEntries: 10000, maxAgeSeconds: 60 * 60 * 24 }),
+    ],
+  })
+);
+
+// Other assets → Stale-While-Revalidate
+registerRoute(
+  ({ url }) => isAllowedHost(url.hostname) && !/\.pbf($|\?)/.test(url.pathname),
+  new StaleWhileRevalidate({
+    cacheName: 'map-assets',
+    plugins: [new CacheableResponsePlugin({ statuses: [0, 200] })],
+  })
+);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapvx/web-components",
   "description": "MapVX Web Components is a web components library that provides interactive and accessible mapping solutions. Built with Lit, it offers a modern, lightweight, and framework-agnostic way to integrate maps into any web application.",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "type": "module",
   "author": "Mapvx",
   "homepage": "https://mapvx.com",
@@ -37,10 +37,11 @@
   },
   "scripts": {
     "dev": "vite --force",
-    "build": "npm run build:es && npm run build:cjs && npm run build:iife",
+    "build": "npm run build:es && npm run build:cjs && npm run build:iife && npm run build:copy-sw",
     "build:es": "BUILD_FORMAT=es vite build",
     "build:cjs": "BUILD_FORMAT=cjs vite build",
     "build:iife": "BUILD_FORMAT=iife-route-view-totems vite build && BUILD_FORMAT=iife-map-view-with-modal vite build",
+    "build:copy-sw": "mkdir -p dist/sw && cp src/sw/mvx-tiles-sw.js dist/sw/mvx-tiles-sw.js",
     "preview": "vite preview",
     "lint": "eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",