pwa / offline mode
- @vite-pwa/sveltekit: workbox precache (incl. pdfjs worker), generated manifest, prompt-style updates via PwaUpdatePrompt toast - prerendered routes for offline navigation, PWA icons, theme-color + apple-touch-icon - pwa offline/update e2e suite (pnpm test:pwa, playwright.pwa.config.ts) - datenschutz: offline/install section; prettier cleanup of shadcn components
This commit is contained in:
1 parent
b7969b4c9e
commit
f09384d2e6
37 files changed
+4130
-273
No files matched your search
@@ -22,6 +22,7 @@ The application also contains German imprint and privacy-policy routes.
|
||||
- fflate for ZIP extraction and image-export ZIP creation
|
||||
- pdf-lib for PDF assembly, `@cantoo/pdf-lib` for encryption, and pdfjs-dist for rendering
|
||||
- `@sveltejs/adapter-node`
|
||||
- PWA/offline support through `@vite-pwa/sveltekit` (Workbox precache, generated web manifest)
|
||||
- pnpm with a committed lockfile
|
||||
- Prettier with Svelte and Tailwind plugins
|
||||
|
||||
@@ -37,6 +38,7 @@ pnpm preview # Preview the production build
|
||||
pnpm check # Run Svelte and TypeScript diagnostics
|
||||
pnpm check:watch # Run diagnostics in watch mode
|
||||
pnpm test:e2e # Run the Playwright toolbox tests in Chromium
|
||||
pnpm test:pwa # PWA offline/update tests against the production build (requires pnpm build)
|
||||
pnpm lint # Check repository formatting with Prettier
|
||||
pnpm format # Format the repository with Prettier
|
||||
```
|
||||
@@ -75,6 +77,7 @@ src/
|
||||
│ │ ├── FileDropzone.svelte # Shared PDF/image/ZIP file picker and drop target
|
||||
│ │ ├── ZipFilePicker.svelte # Compact ZIP picker button with hidden resettable input
|
||||
│ │ ├── PdfPageGrid.svelte # Accessible PDF thumbnail selection grid
|
||||
│ │ ├── PwaUpdatePrompt.svelte # Service-worker registration and update/offline toast
|
||||
│ │ ├── RasterizationWarning.svelte
|
||||
│ │ ├── ZipDropzone.svelte # beA-specific wrapper around FileDropzone
|
||||
│ │ ├── icons/ # Project-specific SVG components
|
||||
@@ -92,6 +95,7 @@ src/
|
||||
│ └── zip-processing.ts # Archive model, transforms, and PDF export
|
||||
└── routes/
|
||||
├── +layout.svelte # Shared logo header and branded footer
|
||||
├── +layout.ts # `prerender = true` for all routes (PWA offline documents)
|
||||
├── +page.svelte # Toolbox hub and global beA ZIP drop target
|
||||
├── layout.css # Tailwind, shadcn, theme, fonts, global CSS
|
||||
├── tools/
|
||||
@@ -100,15 +104,42 @@ src/
|
||||
│ └── {merge,separate,stamp,watermark,encrypt,decrypt,compress,convert,rotate,metadata}/
|
||||
├── datenschutz/+page.svelte # Privacy policy
|
||||
└── impressum/+page.svelte # Imprint
|
||||
static/ # Public logo, footer art, and robots.txt
|
||||
static/ # Public logo, footer art, PWA icons, and robots.txt
|
||||
components.json # shadcn-svelte registry configuration
|
||||
Dockerfile # Node adapter production image
|
||||
playwright.pwa.config.ts # Playwright config for `pnpm test:pwa`
|
||||
plan/ # Design and implementation notes
|
||||
```
|
||||
|
||||
Generated directories such as `.svelte-kit/`, `build/`, and `node_modules/` must not be edited or
|
||||
committed.
|
||||
|
||||
## PWA / offline mode
|
||||
|
||||
- `SvelteKitPWA` is configured in `vite.config.ts` with `registerType: 'prompt'`: a waiting service
|
||||
worker never activates by itself. `PwaUpdatePrompt.svelte` registers the worker in the browser and
|
||||
shows a toast (“Neue Version verfügbar” with “Neu laden”/“Später”, plus a one-time hint when the
|
||||
app is ready offline). Never force a reload — an in-progress archive must survive a declined
|
||||
update.
|
||||
- All routes are prerendered (`src/routes/+layout.ts`), so route documents land in the precache and
|
||||
offline navigation works for every page, including a direct deep link. `navigateFallback: '/'`
|
||||
covers unknown paths.
|
||||
- Precache contents come from `workbox.globPatterns`: the plugin's client/prerendered defaults plus
|
||||
`mjs` (the pdfjs worker chunk, required for offline rendering) and the local fonts; the unused
|
||||
`static/Nunito/**` font drop is excluded via `globIgnores`. Precache size is ~4.5 MB.
|
||||
- PWA icons in `static/icons/` (192/512, maskable, apple-touch) were generated once from
|
||||
`static/favicon.svg`; regenerate them with ImageMagick/rsvg if the logo changes. The manifest link
|
||||
is injected client-side from `virtual:pwa-info` in the root layout, `theme-color` and the
|
||||
apple-touch-icon live in `app.html`.
|
||||
- `devOptions.enabled` stays `false`: `pnpm dev` never registers a service worker, so development
|
||||
caches stay clean. Verify PWA behaviour only against a production build (`pnpm build` and
|
||||
`pnpm preview`, or `pnpm test:pwa`, which also covers the offline processing chain and the update
|
||||
toast).
|
||||
- Simulating a deployment in tests requires restarting `node build/index.js`: adapter-node's static
|
||||
handler (sirv, non-dev mode) walks the build directory once at startup and caches the ETags, so
|
||||
swapped files are invisible to a running process. Browsers revalidate `/sw.js` via its ETag on
|
||||
navigation and `registration.update()`, so the normal container restart on deploy is sufficient.
|
||||
|
||||
## Application flow and state
|
||||
|
||||
- `/` is the toolbox hub. A ZIP dropped anywhere on that route is queued in memory and forwarded to
|
||||
|
||||
Reference in new issue
Block a user