annotate mrjunejune/src/public/pwa-register.js @ 211:a6d8d32a0261

[MrJuneJune] Simple animations for darkmode.
author MrJuneJune <me@mrjunejune.com>
date Sun, 15 Feb 2026 21:38:23 -0800
parents 3b47e82ac57e
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
209
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 // PWA Service Worker Registration
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 if ('serviceWorker' in navigator) {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 window.addEventListener('load', () => {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 navigator.serviceWorker
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 .register('/public/sw.js')
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
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);
209
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 // Check for updates periodically
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 setInterval(() => {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 registration.update();
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 }, 60000); // Check every minute
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 // Handle updates
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 registration.addEventListener('updatefound', () => {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 const newWorker = registration.installing;
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 newWorker.addEventListener('statechange', () => {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 // New content available, show update notification
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 if (confirm('New version available! Reload to update?')) {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 newWorker.postMessage({ type: 'SKIP_WAITING' });
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 window.location.reload();
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 }
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 }
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 });
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 });
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 })
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 .catch((error) => {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 console.error('[PWA] Service Worker registration failed:', error);
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 });
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 // Handle service worker updates
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 let refreshing = false;
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 navigator.serviceWorker.addEventListener('controllerchange', () => {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 if (!refreshing) {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 refreshing = true;
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 window.location.reload();
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 }
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 });
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 });
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 }
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 // Add install prompt handler
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 let deferredPrompt;
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 window.addEventListener('beforeinstallprompt', (e) => {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 e.preventDefault();
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 deferredPrompt = e;
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 showInstallPromotion();
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 });
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 function showInstallPromotion() {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 // Create an install button if it doesn't exist
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 if (document.getElementById('pwa-install-btn')) return;
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 const installBtn = document.createElement('button');
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 installBtn.classList.add('with-icon');
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 installBtn.id = 'pwa-install-btn';
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 installBtn.textContent = 'Install as App';
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62 installBtn.addEventListener('click', async () => {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 if (!deferredPrompt) return;
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 deferredPrompt.prompt();
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 const { outcome } = await deferredPrompt.userChoice;
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 console.log(`[PWA] User response: ${outcome}`);
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 deferredPrompt = null;
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 installBtn.remove();
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 });
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 document.body.appendChild(installBtn);
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74
211
a6d8d32a0261 [MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents: 209
diff changeset
75 setTimeout(() => {
a6d8d32a0261 [MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents: 209
diff changeset
76 installBtn.style.opacity = '0';
a6d8d32a0261 [MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents: 209
diff changeset
77 installBtn.style.transition = 'opacity 0.3s';
a6d8d32a0261 [MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents: 209
diff changeset
78 setTimeout(() => installBtn.remove(), 300);
a6d8d32a0261 [MrJuneJune] Simple animations for darkmode.
MrJuneJune <me@mrjunejune.com>
parents: 209
diff changeset
79 }, 5000);
209
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 }
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 window.addEventListener('appinstalled', () => {
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 console.log('[PWA] App installed successfully!');
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 deferredPrompt = null;
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 const installBtn = document.getElementById('pwa-install-btn');
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87 if (installBtn) installBtn.remove();
3b47e82ac57e [MrJuneJune] PWA updates.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 });