Mercurial
annotate mrjunejune/src/public/pwa-register.js @ 273:e02e2036ef84 default tip
add Layer 2 JRPG component system
Add reusable content and window modals, an isolated component sandbox, shared cyberpunk scroll areas, production-safe cache freshness, and server-rendered JRPG panel state.
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Sat, 08 Aug 2026 02:08:08 -0700 |
| parents | 60a876c4587a |
| children |
| rev | line source |
|---|---|
| 209 | 1 // PWA Service Worker Registration |
| 2 if ('serviceWorker' in navigator) { | |
| 3 window.addEventListener('load', () => { | |
| 4 navigator.serviceWorker | |
|
256
30c2196d03d4
[site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
211
diff
changeset
|
5 .register('/sw.js', { scope: '/' }) |
| 209 | 6 .then((registration) => { |
|
211
a6d8d32a0261
[MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents:
209
diff
changeset
|
7 // console.log('[PWA] Service Worker registered:', registration.scope); |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
258
diff
changeset
|
8 void registration.update(); |
| 209 | 9 |
| 10 // Check for updates periodically | |
| 11 setInterval(() => { | |
| 12 registration.update(); | |
| 13 }, 60000); // Check every minute | |
| 14 | |
| 15 // Handle updates | |
| 16 registration.addEventListener('updatefound', () => { | |
| 17 const newWorker = registration.installing; | |
| 18 newWorker.addEventListener('statechange', () => { | |
| 19 if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { | |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
258
diff
changeset
|
20 newWorker.postMessage({ type: 'SKIP_WAITING' }); |
| 209 | 21 } |
| 22 }); | |
| 23 }); | |
| 24 }) | |
| 25 .catch((error) => { | |
| 26 console.error('[PWA] Service Worker registration failed:', error); | |
| 27 }); | |
| 28 | |
| 29 // Handle service worker updates | |
| 30 let refreshing = false; | |
| 31 navigator.serviceWorker.addEventListener('controllerchange', () => { | |
| 32 if (!refreshing) { | |
| 33 refreshing = true; | |
| 34 window.location.reload(); | |
| 35 } | |
| 36 }); | |
| 37 }); | |
| 38 } | |
| 39 | |
| 40 // Add install prompt handler | |
| 41 let deferredPrompt; | |
| 42 | |
| 43 window.addEventListener('beforeinstallprompt', (e) => { | |
| 44 e.preventDefault(); | |
| 45 deferredPrompt = e; | |
| 46 | |
| 47 showInstallPromotion(); | |
| 48 }); | |
| 49 | |
| 50 function showInstallPromotion() { | |
| 51 // Create an install button if it doesn't exist | |
| 52 if (document.getElementById('pwa-install-btn')) return; | |
| 53 | |
| 54 const installBtn = document.createElement('button'); | |
| 55 installBtn.classList.add('with-icon'); | |
| 56 installBtn.id = 'pwa-install-btn'; | |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
57 const installIcon = document.createElement('zen-icon'); |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
58 installIcon.setAttribute('name', 'download'); |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
59 const installLabel = document.createElement('span'); |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
60 installLabel.textContent = 'Install as App'; |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
61 installBtn.append(installIcon, installLabel); |
| 209 | 62 |
| 63 installBtn.addEventListener('click', async () => { | |
| 64 if (!deferredPrompt) return; | |
| 65 | |
| 66 deferredPrompt.prompt(); | |
| 67 const { outcome } = await deferredPrompt.userChoice; | |
| 68 console.log(`[PWA] User response: ${outcome}`); | |
| 69 | |
| 70 deferredPrompt = null; | |
| 71 installBtn.remove(); | |
| 72 }); | |
| 73 | |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
74 const wrapper = document.createElement('zen-button'); |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
75 wrapper.setAttribute('appearance', 'plain'); |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
76 wrapper.setAttribute('size', 'md'); |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
77 wrapper.append(installBtn); |
|
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
78 document.body.appendChild(wrapper); |
| 209 | 79 |
|
211
a6d8d32a0261
[MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents:
209
diff
changeset
|
80 setTimeout(() => { |
|
a6d8d32a0261
[MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents:
209
diff
changeset
|
81 installBtn.style.opacity = '0'; |
|
a6d8d32a0261
[MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents:
209
diff
changeset
|
82 installBtn.style.transition = 'opacity 0.3s'; |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
83 setTimeout(() => wrapper.remove(), 300); |
|
211
a6d8d32a0261
[MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents:
209
diff
changeset
|
84 }, 5000); |
| 209 | 85 } |
| 86 | |
| 87 window.addEventListener('appinstalled', () => { | |
| 88 console.log('[PWA] App installed successfully!'); | |
| 89 deferredPrompt = null; | |
| 90 | |
| 91 const installBtn = document.getElementById('pwa-install-btn'); | |
|
258
60a876c4587a
[ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents:
256
diff
changeset
|
92 if (installBtn) installBtn.closest('zen-button')?.remove(); |
| 209 | 93 }); |