Service Workers

// public/sw.js
self.addEventListener('install', (event) => {
  console.log('Service Worker installing')
})

self.addEventListener('activate', (event) => {
  console.log('Service Worker activating')
})

self.addEventListener('fetch', (event) => {
  // Handle fetch events
})

// src/main.ts
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered', reg))
    .catch(err => console.log('SW registration failed', err))
}

app.Use(frontend.WithOptions(frontend.Options{
    ServiceWorker: "sw.js",  // Sets proper scope headers
}))

// sw.js
const CACHE_NAME = 'v1'

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  )
})

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request)
      .catch(() => caches.match(event.request))
  )
})

npm install workbox-cli -D

// workbox-config.js
module.exports = {
  globDirectory: 'dist/',
  globPatterns: ['**/*.{html,js,css,png,jpg,svg}'],
  swDest: 'dist/sw.js',
  runtimeCaching: [{
    urlPattern: /^https:\/\/api\./,
    handler: 'NetworkFirst',
  }],
}

npx workbox generateSW workbox-config.js

// public/manifest.json
{
  "name": "My Mizu App",
  "short_name": "MizuApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

<!-- index.html -->
<link rel="manifest" href="/manifest.json">