replit/timmy-tower
2
0
Fork 0
Code Issues 26 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

[Matrix] PWA Manifest + Service Worker (offline + home screen install) #62

New Issue
Open
opened 2026-03-21 00:45:07 +00:00 by replit · 0 comments
replit commented 2026-03-21 00:45:07 +00:00
Owner
Copy Link

What & Why

The Matrix 3D Workshop should work as a home-screen app on iPad and mobile — installed once, opens full-screen without the browser chrome. Adding a manifest.json and a service worker caches all static assets so the app loads instantly and works offline between WebSocket reconnects.

Depends on: Vite build system issue (Matrix must be bundled before service worker can cache assets)

Done looks like

  • Matrix can be added to home screen on iOS Safari and Android Chrome (Install prompt on desktop Chrome)
  • Opening from home screen opens full-screen with no browser chrome
  • All static assets (JS, CSS, fonts, icons) load from cache after first visit; network offline shows the scene, WebSocket reconnects when back online
  • App icon (at least 192×192 and 512×512 px, Matrix green aesthetic) shipped with the build
  • manifest.json: name: "Timmy Tower Workshop", short_name: "Timmy Tower", theme_color: "#00ff88", background_color: "#000000", display: "fullscreen"
  • Service worker uses cache-first for static assets, network-first (with offline fallback) for API calls
  • A small "Install App" button appears in the Matrix header when beforeinstallprompt fires

Out of scope

  • Push notifications (separate task)
  • Background sync
  • iOS Share Sheet deep-link integration

Tasks

  1. Manifest file — Write the-matrix/public/manifest.json with all required fields. Add <link rel="manifest"> to index.html.
  2. App icons — Generate or design 192×192 and 512×512 PNG icons with Matrix green aesthetic; place in public/icons/.
  3. Service worker — Write the-matrix/public/sw.js: precache the Vite build output manifest on install; cache-first for static assets; network-first for /api/*; offline fallback page for navigation requests.
  4. Service worker registration — Register sw.js in js/main.js after DOMContentLoaded.
  5. Install button — Listen for beforeinstallprompt in js/ui.js; show a small "Install App" button in the header; call event.prompt() on click.

Relevant files

  • the-matrix/index.html
  • the-matrix/js/main.js
  • the-matrix/js/ui.js
  • the-matrix/public/
## What & Why The Matrix 3D Workshop should work as a home-screen app on iPad and mobile — installed once, opens full-screen without the browser chrome. Adding a `manifest.json` and a service worker caches all static assets so the app loads instantly and works offline between WebSocket reconnects. _Depends on: Vite build system issue (Matrix must be bundled before service worker can cache assets)_ ## Done looks like - Matrix can be added to home screen on iOS Safari and Android Chrome (Install prompt on desktop Chrome) - Opening from home screen opens full-screen with no browser chrome - All static assets (JS, CSS, fonts, icons) load from cache after first visit; network offline shows the scene, WebSocket reconnects when back online - App icon (at least 192×192 and 512×512 px, Matrix green aesthetic) shipped with the build - `manifest.json`: `name: "Timmy Tower Workshop"`, `short_name: "Timmy Tower"`, `theme_color: "#00ff88"`, `background_color: "#000000"`, `display: "fullscreen"` - Service worker uses cache-first for static assets, network-first (with offline fallback) for API calls - A small "Install App" button appears in the Matrix header when `beforeinstallprompt` fires ## Out of scope - Push notifications (separate task) - Background sync - iOS Share Sheet deep-link integration ## Tasks 1. **Manifest file** — Write `the-matrix/public/manifest.json` with all required fields. Add `<link rel="manifest">` to `index.html`. 2. **App icons** — Generate or design 192×192 and 512×512 PNG icons with Matrix green aesthetic; place in `public/icons/`. 3. **Service worker** — Write `the-matrix/public/sw.js`: precache the Vite build output manifest on install; cache-first for static assets; network-first for `/api/*`; offline fallback page for navigation requests. 4. **Service worker registration** — Register `sw.js` in `js/main.js` after DOMContentLoaded. 5. **Install button** — Listen for `beforeinstallprompt` in `js/ui.js`; show a small "Install App" button in the header; call `event.prompt()` on click. ## Relevant files - `the-matrix/index.html` - `the-matrix/js/main.js` - `the-matrix/js/ui.js` - `the-matrix/public/`
replit added the frontend label 2026-03-21 00:45:07 +00:00
gemini was assigned by Rockachopa 2026-03-22 23:37:10 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ai
backend
frontend
lightning
mobile
mobile
nostr
workshop
No Label frontend
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claude gemini replit
No Assignees gemini
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: replit/timmy-tower#62
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?