Aplikacja kelnera jako PWA

public/waiter/app.js

@@ -7,6 +7,8 @@ const syncDot = document.getElementById('syncDot');
 const syncLabel = document.getElementById('syncLabel');
 const notifyBanner = document.getElementById('notifyBanner');
 const enableNotifyBtn = document.getElementById('enableNotifyBtn');
+const installBanner = document.getElementById('installBanner');
+const installAppBtn = document.getElementById('installAppBtn');
 
 const statPending = document.getElementById('statPending');
 const statWaiter = document.getElementById('statWaiter');
@@ -18,6 +20,49 @@ let feedInitialized = false;
 let pollTimer = null;
 let lastPayload = '';
 let swRegistration = null;
+let deferredInstallPrompt = null;
+
+function isStandaloneDisplay() {
+  return window.matchMedia('(display-mode: standalone)').matches
+    || window.navigator.standalone === true;
+}
+
+function updateInstallBanner() {
+  if (!installBanner) {
+    return;
+  }
+
+  if (isStandaloneDisplay() || !deferredInstallPrompt) {
+    installBanner.classList.add('hidden');
+    return;
+  }
+
+  installBanner.classList.remove('hidden');
+}
+
+function setupInstallPrompt() {
+  window.addEventListener('beforeinstallprompt', (event) => {
+    event.preventDefault();
+    deferredInstallPrompt = event;
+    updateInstallBanner();
+  });
+
+  window.addEventListener('appinstalled', () => {
+    deferredInstallPrompt = null;
+    updateInstallBanner();
+  });
+}
+
+async function promptInstallApp() {
+  if (!deferredInstallPrompt) {
+    return;
+  }
+
+  deferredInstallPrompt.prompt();
+  await deferredInstallPrompt.userChoice;
+  deferredInstallPrompt = null;
+  updateInstallBanner();
+}
 
 function escapeHtml(value) {
   return String(value ?? '')
@@ -230,6 +275,10 @@ enableNotifyBtn?.addEventListener('click', () => {
   requestNotifications();
 });
 
+installAppBtn?.addEventListener('click', () => {
+  promptInstallApp();
+});
+
 document.addEventListener('visibilitychange', () => {
   if (!document.hidden) {
     pollFeed();
@@ -237,13 +286,9 @@ document.addEventListener('visibilitychange', () => {
 });
 
 (async function init() {
+  setupInstallPrompt();
+  updateInstallBanner();
   updateNotifyBanner();
-
-  if ('Notification' in window && Notification.permission === 'granted') {
-    await registerServiceWorker();
-  } else if ('Notification' in window && Notification.permission === 'default') {
-    notifyBanner.classList.remove('hidden');
-  }
-
+  await registerServiceWorker();
   startPolling();
 })();