How to make an offline PWA with Qwik Framework?

Question

This is what I get when I disable my PWA connection.

I'm breaking my head trying to get my PWA developed with Qwik framework to work offline. I've read the documentation, looked for examples, tried Vite-PWA and a manual service-worker registration but nothing worked for me, the PWA always works online only.

If any developer can help me, I will be very grateful :), have a nice day.

This is my current and minimum configuration to run my PWA.

vite.config.ts

import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { qwikReact } from "@builder.io/qwik-react/vite";

export default defineConfig(() => {
  return {
    plugins: [qwikCity(), qwikVite(), tsconfigPaths(), qwikReact()],
    preview: {
      headers: {
        "Cache-Control": "public, max-age=600",
      },
    },
    ssr: {
      target: "webworker",
    }
  };
});

entry.ssr.tsx

import { renderToStream, type RenderToStreamOptions } from '@builder.io/qwik/server'
import { manifest } from '@qwik-client-manifest'
import Root from './root'

export default function (opts: RenderToStreamOptions) {
  return renderToStream(<Root />, {
    manifest,
    ...opts,
    containerAttributes: {
      lang: 'es-PE',
      ...opts.containerAttributes
    }
  })
}

routes/service-worker.ts

import { setupServiceWorker } from '@builder.io/qwik-city/service-worker'

setupServiceWorker()

addEventListener('install', () => self.skipWaiting())

addEventListener('activate', () => self.clients.claim())

declare const self: ServiceWorkerGlobalScope

manifest.json

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "PWA with Qwik",
  "short_name": "QwikPWA",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fafafa",
  "description": "My PWA description",
  "icons": [
    {
      "src": "192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Answer 1

Qwik has not polluted ServiceWorker with lots of code. you have to implement pwa offline ServiceWorker by yourself. here is a repo that did just that:

• GitHub: https://github.com/qwikdev/pwa
• Example: https://pwa-a3b.pages.dev/

Answer 2

You need to declare the icons in the manifest. See https://developer.mozilla.org/en-US/docs/Web/Manifest