feat: improve PWA experienceUnverified
ecbbcf7 parent: 39604ad modified
internal/tmpl/base.html +101 -2 | @@ -31,12 +31,18 @@ | ||
| 31 | 31 | <meta property="og:image" content="/static/banner.png"> |
| 32 | 32 | <meta property="og:type" content="website"> |
| 33 | 33 | <meta property="og:site_name" content="Glean"> |
| 34 | - <link rel="icon" type="image/png" sizes="512x512" href="/static/favicon.png"> | |
| 35 | 34 | <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"> |
| 36 | - <link rel="apple-touch-icon" href="/static/apple-touch-icon.png"> | |
| 35 | + <link rel="icon" type="image/png" sizes="192x192" href="/static/icon-192.png"> | |
| 36 | + <link rel="icon" type="image/png" sizes="512x512" href="/static/icon-512.png"> | |
| 37 | + <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"> | |
| 37 | 38 | <meta name="theme-color" content="#00754A"> |
| 38 | 39 | <meta name="mobile-web-app-capable" content="yes"> |
| 40 | + <meta name="apple-mobile-web-app-capable" content="yes"> | |
| 41 | + <meta name="apple-mobile-web-app-title" content="Glean"> | |
| 39 | 42 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> |
| 43 | + <meta name="application-name" content="Glean"> | |
| 44 | + <meta name="msapplication-TileColor" content="#00754A"> | |
| 45 | + <meta name="msapplication-TileImage" content="/static/icon-192.png"> | |
| 40 | 46 | <link rel="manifest" href="/static/manifest.json"> |
| 41 | 47 | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| 42 | 48 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| @@ -50,6 +56,51 @@ | ||
| 50 | 56 | <button id="confirm-dialog-ok" class="text-sm text-white bg-spot-red hover:brightness-110 px-4 py-2 rounded-pill font-bold uppercase tracking-button transition">Confirm</button> |
| 51 | 57 | </div> |
| 52 | 58 | </dialog> |
| 59 | + <dialog id="install-dialog" class="bg-spot-surface rounded-xl p-6 max-w-sm shadow-spot-elevated border border-spot-divider backdrop:bg-black/50" onclick="if(event.target===this)this.close()"> | |
| 60 | + <div class="flex items-center gap-3 mb-5"> | |
| 61 | + <img src="/static/favicon.svg" class="w-12 h-12 rounded-xl shrink-0" alt="Glean"> | |
| 62 | + <div> | |
| 63 | + <h3 class="text-sm font-bold text-spot-text">Install Glean</h3> | |
| 64 | + <p class="text-xs text-spot-secondary">Add to your home screen for a native app experience</p> | |
| 65 | + </div> | |
| 66 | + </div> | |
| 67 | + <div id="install-native" class="hidden"> | |
| 68 | + <p class="text-sm text-spot-secondary mb-5">Install Glean on your device for quick access.</p> | |
| 69 | + <div class="flex gap-2 justify-end"> | |
| 70 | + <button onclick="document.getElementById('install-dialog').close()" class="text-sm text-spot-text px-4 py-2 rounded-pill border border-spot-outline hover:border-spot-text transition">Not now</button> | |
| 71 | + <button id="install-btn" class="text-sm text-white bg-spot-green hover:brightness-110 px-4 py-2 rounded-pill font-bold uppercase tracking-button transition">Install</button> | |
| 72 | + </div> | |
| 73 | + </div> | |
| 74 | + <div id="install-manual" class="hidden"> | |
| 75 | + <div id="install-instructions-chrome" class="hidden space-y-3"> | |
| 76 | + <p class="text-sm text-spot-secondary">To install Glean as an app:</p> | |
| 77 | + <ol class="text-sm text-spot-secondary space-y-2.5 list-decimal list-inside"> | |
| 78 | + <li>Tap the <strong class="text-spot-text">three-dot menu</strong> in the top-right or bottom-right corner</li> | |
| 79 | + <li>Select <strong class="text-spot-text">"Add to Home screen"</strong> or <strong class="text-spot-text">"Install app"</strong></li> | |
| 80 | + <li>Tap <strong class="text-spot-text">"Add"</strong> to confirm</li> | |
| 81 | + </ol> | |
| 82 | + </div> | |
| 83 | + <div id="install-instructions-safari" class="hidden space-y-3"> | |
| 84 | + <p class="text-sm text-spot-secondary">To install Glean as an app:</p> | |
| 85 | + <ol class="text-sm text-spot-secondary space-y-2.5 list-decimal list-inside"> | |
| 86 | + <li>Tap the <strong class="text-spot-text">Share button</strong> at the bottom of the screen</li> | |
| 87 | + <li>Scroll down and tap <strong class="text-spot-text">"Add to Home Screen"</strong></li> | |
| 88 | + <li>Tap <strong class="text-spot-text">"Add"</strong> to confirm</li> | |
| 89 | + </ol> | |
| 90 | + </div> | |
| 91 | + <div id="install-instructions-firefox" class="hidden space-y-3"> | |
| 92 | + <p class="text-sm text-spot-secondary">To install Glean as an app:</p> | |
| 93 | + <ol class="text-sm text-spot-secondary space-y-2.5 list-decimal list-inside"> | |
| 94 | + <li>Tap the <strong class="text-spot-text">three-dot menu</strong> in the top-right corner</li> | |
| 95 | + <li>Select <strong class="text-spot-text">"Install"</strong> or <strong class="text-spot-text">"Add to Home screen"</strong></li> | |
| 96 | + <li>Tap <strong class="text-spot-text">"Add"</strong> to confirm</li> | |
| 97 | + </ol> | |
| 98 | + </div> | |
| 99 | + <div class="mt-5 flex justify-end"> | |
| 100 | + <button onclick="document.getElementById('install-dialog').close()" class="text-sm text-spot-text px-4 py-2 rounded-pill border border-spot-outline hover:border-spot-text transition">Got it</button> | |
| 101 | + </div> | |
| 102 | + </div> | |
| 103 | + </dialog> | |
| 53 | 104 | <dialog id="shortcuts-dialog" class="bg-spot-surface rounded-xl p-6 max-w-xs shadow-spot-elevated border border-spot-divider backdrop:bg-black/50" onclick="if(event.target===this)this.close()"> |
| 54 | 105 | <h3 class="text-sm font-bold text-spot-text uppercase tracking-wide mb-4">Keyboard shortcuts</h3> |
| 55 | 106 | <div class="space-y-3 text-sm"> |
| @@ -208,6 +259,10 @@ | ||
| 208 | 259 | <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"/></svg> |
| 209 | 260 | Shortcuts |
| 210 | 261 | </button> |
| 262 | + <button onclick="showInstallDialog()" class="text-xs text-spot-secondary hover:text-spot-text hover:underline inline-flex gap-1.5 items-center transition text-left"> | |
| 263 | + <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg> | |
| 264 | + Install App | |
| 265 | + </button> | |
| 211 | 266 | </div> |
| 212 | 267 | </div> |
| 213 | 268 | <div class="text-right"> |
| @@ -238,6 +293,10 @@ | ||
| 238 | 293 | <span class="theme-text-dark">Dark</span> |
| 239 | 294 | <span class="theme-text-light hidden">Light</span> |
| 240 | 295 | </button> |
| 296 | + <button onclick="showInstallDialog()" class="text-xs text-spot-secondary hover:text-spot-text inline-flex gap-1.5 items-center transition"> | |
| 297 | + <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg> | |
| 298 | + Install App | |
| 299 | + </button> | |
| 241 | 300 | </div> |
| 242 | 301 | <div class="border-t border-spot-divider mt-4 pt-3"> |
| 243 | 302 | <span class="text-xs text-spot-secondary">© {{now.Format "2006"}} <a href="https://bsky.app/profile/julien.rbrt.fr" class="hover:text-spot-text transition">julien.rbrt.fr</a> · Made in Europe 🇪🇺 · <a href="/terms" class="hover:text-spot-text transition">Terms</a></span> |
| @@ -343,6 +402,46 @@ | ||
| 343 | 402 | if (e.key === 't') window.location.href = '/trending'; |
| 344 | 403 | if (e.key === 'l') window.location.href = '/library'; |
| 345 | 404 | }); |
| 405 | + | |
| 406 | + var deferredPrompt = null; | |
| 407 | + window.addEventListener('beforeinstallprompt', function(e) { | |
| 408 | + e.preventDefault(); | |
| 409 | + deferredPrompt = e; | |
| 410 | + }); | |
| 411 | + | |
| 412 | + function showInstallDialog() { | |
| 413 | + var dlg = document.getElementById('install-dialog'); | |
| 414 | + var nativeEl = document.getElementById('install-native'); | |
| 415 | + var manualEl = document.getElementById('install-manual'); | |
| 416 | + var ua = navigator.userAgent; | |
| 417 | + | |
| 418 | + nativeEl.classList.add('hidden'); | |
| 419 | + manualEl.classList.add('hidden'); | |
| 420 | + document.getElementById('install-instructions-chrome').classList.add('hidden'); | |
| 421 | + document.getElementById('install-instructions-safari').classList.add('hidden'); | |
| 422 | + document.getElementById('install-instructions-firefox').classList.add('hidden'); | |
| 423 | + | |
| 424 | + if (deferredPrompt) { | |
| 425 | + nativeEl.classList.remove('hidden'); | |
| 426 | + document.getElementById('install-btn').onclick = function() { | |
| 427 | + deferredPrompt.prompt(); | |
| 428 | + deferredPrompt.userChoice.then(function() { | |
| 429 | + deferredPrompt = null; | |
| 430 | + dlg.close(); | |
| 431 | + }); | |
| 432 | + }; | |
| 433 | + } else { | |
| 434 | + manualEl.classList.remove('hidden'); | |
| 435 | + if (/iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) { | |
| 436 | + document.getElementById('install-instructions-safari').classList.remove('hidden'); | |
| 437 | + } else if (/Firefox/.test(ua) && /Android/.test(ua)) { | |
| 438 | + document.getElementById('install-instructions-firefox').classList.remove('hidden'); | |
| 439 | + } else { | |
| 440 | + document.getElementById('install-instructions-chrome').classList.remove('hidden'); | |
| 441 | + } | |
| 442 | + } | |
| 443 | + dlg.showModal(); | |
| 444 | + } | |
| 346 | 445 | </script> |
| 347 | 446 | </body> |
| 348 | 447 | </html> |
| @@ -31,12 +31,18 @@ | |||
| 31 | <meta property="og:image" content="/static/banner.png"> | 31 | <meta property="og:image" content="/static/banner.png"> |
| 32 | <meta property="og:type" content="website"> | 32 | <meta property="og:type" content="website"> |
| 33 | <meta property="og:site_name" content="Glean"> | 33 | <meta property="og:site_name" content="Glean"> |
| 34 | - <link rel="icon" type="image/png" sizes="512x512" href="/static/favicon.png"> | ||
| 35 | <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"> | 34 | <link rel="icon" type="image/svg+xml" href="/static/favicon.svg"> |
| 36 | - <link rel="apple-touch-icon" href="/static/apple-touch-icon.png"> | 35 | + <link rel="icon" type="image/png" sizes="192x192" href="/static/icon-192.png"> |
| 36 | + <link rel="icon" type="image/png" sizes="512x512" href="/static/icon-512.png"> | ||
| 37 | + <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"> | ||
| 37 | <meta name="theme-color" content="#00754A"> | 38 | <meta name="theme-color" content="#00754A"> |
| 38 | <meta name="mobile-web-app-capable" content="yes"> | 39 | <meta name="mobile-web-app-capable" content="yes"> |
| 40 | + <meta name="apple-mobile-web-app-capable" content="yes"> | ||
| 41 | + <meta name="apple-mobile-web-app-title" content="Glean"> | ||
| 39 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | 42 | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> |
| 43 | + <meta name="application-name" content="Glean"> | ||
| 44 | + <meta name="msapplication-TileColor" content="#00754A"> | ||
| 45 | + <meta name="msapplication-TileImage" content="/static/icon-192.png"> | ||
| 40 | <link rel="manifest" href="/static/manifest.json"> | 46 | <link rel="manifest" href="/static/manifest.json"> |
| 41 | <link rel="preconnect" href="https://fonts.googleapis.com"> | 47 | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| 42 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | 48 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| @@ -50,6 +56,51 @@ | |||
| 50 | <button id="confirm-dialog-ok" class="text-sm text-white bg-spot-red hover:brightness-110 px-4 py-2 rounded-pill font-bold uppercase tracking-button transition">Confirm</button> | 56 | <button id="confirm-dialog-ok" class="text-sm text-white bg-spot-red hover:brightness-110 px-4 py-2 rounded-pill font-bold uppercase tracking-button transition">Confirm</button> |
| 51 | </div> | 57 | </div> |
| 52 | </dialog> | 58 | </dialog> |
| 59 | + <dialog id="install-dialog" class="bg-spot-surface rounded-xl p-6 max-w-sm shadow-spot-elevated border border-spot-divider backdrop:bg-black/50" onclick="if(event.target===this)this.close()"> | ||
| 60 | + <div class="flex items-center gap-3 mb-5"> | ||
| 61 | + <img src="/static/favicon.svg" class="w-12 h-12 rounded-xl shrink-0" alt="Glean"> | ||
| 62 | + <div> | ||
| 63 | + <h3 class="text-sm font-bold text-spot-text">Install Glean</h3> | ||
| 64 | + <p class="text-xs text-spot-secondary">Add to your home screen for a native app experience</p> | ||
| 65 | + </div> | ||
| 66 | + </div> | ||
| 67 | + <div id="install-native" class="hidden"> | ||
| 68 | + <p class="text-sm text-spot-secondary mb-5">Install Glean on your device for quick access.</p> | ||
| 69 | + <div class="flex gap-2 justify-end"> | ||
| 70 | + <button onclick="document.getElementById('install-dialog').close()" class="text-sm text-spot-text px-4 py-2 rounded-pill border border-spot-outline hover:border-spot-text transition">Not now</button> | ||
| 71 | + <button id="install-btn" class="text-sm text-white bg-spot-green hover:brightness-110 px-4 py-2 rounded-pill font-bold uppercase tracking-button transition">Install</button> | ||
| 72 | + </div> | ||
| 73 | + </div> | ||
| 74 | + <div id="install-manual" class="hidden"> | ||
| 75 | + <div id="install-instructions-chrome" class="hidden space-y-3"> | ||
| 76 | + <p class="text-sm text-spot-secondary">To install Glean as an app:</p> | ||
| 77 | + <ol class="text-sm text-spot-secondary space-y-2.5 list-decimal list-inside"> | ||
| 78 | + <li>Tap the <strong class="text-spot-text">three-dot menu</strong> in the top-right or bottom-right corner</li> | ||
| 79 | + <li>Select <strong class="text-spot-text">"Add to Home screen"</strong> or <strong class="text-spot-text">"Install app"</strong></li> | ||
| 80 | + <li>Tap <strong class="text-spot-text">"Add"</strong> to confirm</li> | ||
| 81 | + </ol> | ||
| 82 | + </div> | ||
| 83 | + <div id="install-instructions-safari" class="hidden space-y-3"> | ||
| 84 | + <p class="text-sm text-spot-secondary">To install Glean as an app:</p> | ||
| 85 | + <ol class="text-sm text-spot-secondary space-y-2.5 list-decimal list-inside"> | ||
| 86 | + <li>Tap the <strong class="text-spot-text">Share button</strong> at the bottom of the screen</li> | ||
| 87 | + <li>Scroll down and tap <strong class="text-spot-text">"Add to Home Screen"</strong></li> | ||
| 88 | + <li>Tap <strong class="text-spot-text">"Add"</strong> to confirm</li> | ||
| 89 | + </ol> | ||
| 90 | + </div> | ||
| 91 | + <div id="install-instructions-firefox" class="hidden space-y-3"> | ||
| 92 | + <p class="text-sm text-spot-secondary">To install Glean as an app:</p> | ||
| 93 | + <ol class="text-sm text-spot-secondary space-y-2.5 list-decimal list-inside"> | ||
| 94 | + <li>Tap the <strong class="text-spot-text">three-dot menu</strong> in the top-right corner</li> | ||
| 95 | + <li>Select <strong class="text-spot-text">"Install"</strong> or <strong class="text-spot-text">"Add to Home screen"</strong></li> | ||
| 96 | + <li>Tap <strong class="text-spot-text">"Add"</strong> to confirm</li> | ||
| 97 | + </ol> | ||
| 98 | + </div> | ||
| 99 | + <div class="mt-5 flex justify-end"> | ||
| 100 | + <button onclick="document.getElementById('install-dialog').close()" class="text-sm text-spot-text px-4 py-2 rounded-pill border border-spot-outline hover:border-spot-text transition">Got it</button> | ||
| 101 | + </div> | ||
| 102 | + </div> | ||
| 103 | + </dialog> | ||
| 53 | <dialog id="shortcuts-dialog" class="bg-spot-surface rounded-xl p-6 max-w-xs shadow-spot-elevated border border-spot-divider backdrop:bg-black/50" onclick="if(event.target===this)this.close()"> | 104 | <dialog id="shortcuts-dialog" class="bg-spot-surface rounded-xl p-6 max-w-xs shadow-spot-elevated border border-spot-divider backdrop:bg-black/50" onclick="if(event.target===this)this.close()"> |
| 54 | <h3 class="text-sm font-bold text-spot-text uppercase tracking-wide mb-4">Keyboard shortcuts</h3> | 105 | <h3 class="text-sm font-bold text-spot-text uppercase tracking-wide mb-4">Keyboard shortcuts</h3> |
| 55 | <div class="space-y-3 text-sm"> | 106 | <div class="space-y-3 text-sm"> |
| @@ -208,6 +259,10 @@ | |||
| 208 | <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"/></svg> | 259 | <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"/></svg> |
| 209 | Shortcuts | 260 | Shortcuts |
| 210 | </button> | 261 | </button> |
| 262 | + <button onclick="showInstallDialog()" class="text-xs text-spot-secondary hover:text-spot-text hover:underline inline-flex gap-1.5 items-center transition text-left"> | ||
| 263 | + <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg> | ||
| 264 | + Install App | ||
| 265 | + </button> | ||
| 211 | </div> | 266 | </div> |
| 212 | </div> | 267 | </div> |
| 213 | <div class="text-right"> | 268 | <div class="text-right"> |
| @@ -238,6 +293,10 @@ | |||
| 238 | <span class="theme-text-dark">Dark</span> | 293 | <span class="theme-text-dark">Dark</span> |
| 239 | <span class="theme-text-light hidden">Light</span> | 294 | <span class="theme-text-light hidden">Light</span> |
| 240 | </button> | 295 | </button> |
| 296 | + <button onclick="showInstallDialog()" class="text-xs text-spot-secondary hover:text-spot-text inline-flex gap-1.5 items-center transition"> | ||
| 297 | + <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg> | ||
| 298 | + Install App | ||
| 299 | + </button> | ||
| 241 | </div> | 300 | </div> |
| 242 | <div class="border-t border-spot-divider mt-4 pt-3"> | 301 | <div class="border-t border-spot-divider mt-4 pt-3"> |
| 243 | <span class="text-xs text-spot-secondary">© {{now.Format "2006"}} <a href="https://bsky.app/profile/julien.rbrt.fr" class="hover:text-spot-text transition">julien.rbrt.fr</a> · Made in Europe 🇪🇺 · <a href="/terms" class="hover:text-spot-text transition">Terms</a></span> | 302 | <span class="text-xs text-spot-secondary">© {{now.Format "2006"}} <a href="https://bsky.app/profile/julien.rbrt.fr" class="hover:text-spot-text transition">julien.rbrt.fr</a> · Made in Europe 🇪🇺 · <a href="/terms" class="hover:text-spot-text transition">Terms</a></span> |
| @@ -343,6 +402,46 @@ | |||
| 343 | if (e.key === 't') window.location.href = '/trending'; | 402 | if (e.key === 't') window.location.href = '/trending'; |
| 344 | if (e.key === 'l') window.location.href = '/library'; | 403 | if (e.key === 'l') window.location.href = '/library'; |
| 345 | }); | 404 | }); |
| 405 | + | ||
| 406 | + var deferredPrompt = null; | ||
| 407 | + window.addEventListener('beforeinstallprompt', function(e) { | ||
| 408 | + e.preventDefault(); | ||
| 409 | + deferredPrompt = e; | ||
| 410 | + }); | ||
| 411 | + | ||
| 412 | + function showInstallDialog() { | ||
| 413 | + var dlg = document.getElementById('install-dialog'); | ||
| 414 | + var nativeEl = document.getElementById('install-native'); | ||
| 415 | + var manualEl = document.getElementById('install-manual'); | ||
| 416 | + var ua = navigator.userAgent; | ||
| 417 | + | ||
| 418 | + nativeEl.classList.add('hidden'); | ||
| 419 | + manualEl.classList.add('hidden'); | ||
| 420 | + document.getElementById('install-instructions-chrome').classList.add('hidden'); | ||
| 421 | + document.getElementById('install-instructions-safari').classList.add('hidden'); | ||
| 422 | + document.getElementById('install-instructions-firefox').classList.add('hidden'); | ||
| 423 | + | ||
| 424 | + if (deferredPrompt) { | ||
| 425 | + nativeEl.classList.remove('hidden'); | ||
| 426 | + document.getElementById('install-btn').onclick = function() { | ||
| 427 | + deferredPrompt.prompt(); | ||
| 428 | + deferredPrompt.userChoice.then(function() { | ||
| 429 | + deferredPrompt = null; | ||
| 430 | + dlg.close(); | ||
| 431 | + }); | ||
| 432 | + }; | ||
| 433 | + } else { | ||
| 434 | + manualEl.classList.remove('hidden'); | ||
| 435 | + if (/iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) { | ||
| 436 | + document.getElementById('install-instructions-safari').classList.remove('hidden'); | ||
| 437 | + } else if (/Firefox/.test(ua) && /Android/.test(ua)) { | ||
| 438 | + document.getElementById('install-instructions-firefox').classList.remove('hidden'); | ||
| 439 | + } else { | ||
| 440 | + document.getElementById('install-instructions-chrome').classList.remove('hidden'); | ||
| 441 | + } | ||
| 442 | + } | ||
| 443 | + dlg.showModal(); | ||
| 444 | + } | ||
| 346 | </script> | 445 | </script> |
| 347 | </body> | 446 | </body> |
| 348 | </html> | 447 | </html> |
modified
static/apple-touch-icon.png +0 -0 | Binary files a/static/apple-touch-icon.png and b/static/apple-touch-icon.png differ |
| Binary files a/static/apple-touch-icon.png and b/static/apple-touch-icon.png differ | Binary files a/static/apple-touch-icon.png and b/static/apple-touch-icon.png differ |
modified
static/favicon.png +0 -0 | Binary files a/static/favicon.png and b/static/favicon.png differ |
| Binary files a/static/favicon.png and b/static/favicon.png differ | Binary files a/static/favicon.png and b/static/favicon.png differ |
added
static/icon-192.png +0 -0 | new file mode 100644 | ||
| Binary files /dev/null and b/static/icon-192.png differ | ||
| new file mode 100644 | |||
| Binary files /dev/null and b/static/icon-192.png differ | Binary files /dev/null and b/static/icon-192.png differ | ||
added
static/icon-512.png +0 -0 | new file mode 100644 | ||
| Binary files /dev/null and b/static/icon-512.png differ | ||
| new file mode 100644 | |||
| Binary files /dev/null and b/static/icon-512.png differ | Binary files /dev/null and b/static/icon-512.png differ | ||
added
static/icon-maskable-192.png +0 -0 | new file mode 100644 | ||
| Binary files /dev/null and b/static/icon-maskable-192.png differ | ||
| new file mode 100644 | |||
| Binary files /dev/null and b/static/icon-maskable-192.png differ | Binary files /dev/null and b/static/icon-maskable-192.png differ | ||
added
static/icon-maskable-512.png +0 -0 | new file mode 100644 | ||
| Binary files /dev/null and b/static/icon-maskable-512.png differ | ||
| new file mode 100644 | |||
| Binary files /dev/null and b/static/icon-maskable-512.png differ | Binary files /dev/null and b/static/icon-maskable-512.png differ | ||
modified
static/manifest.json +32 -4 | @@ -1,14 +1,42 @@ | ||
| 1 | 1 | { |
| 2 | - "name": "Glean", | |
| 2 | + "name": "Glean - Social RSS Reader", | |
| 3 | 3 | "short_name": "Glean", |
| 4 | - "description": "The social RSS reader built on AT Protocol.", | |
| 4 | + "description": "The social RSS reader built on AT Protocol. Discover, read, and share articles from across the web.", | |
| 5 | 5 | "start_url": "/dashboard", |
| 6 | + "scope": "/", | |
| 6 | 7 | "display": "standalone", |
| 8 | + "orientation": "any", | |
| 7 | 9 | "background_color": "#0a1814", |
| 8 | 10 | "theme_color": "#00754A", |
| 11 | + "categories": ["news", "social", "productivity"], | |
| 9 | 12 | "icons": [ |
| 10 | - { "src": "/static/favicon.svg", "sizes": "any", "type": "image/svg+xml" }, | |
| 11 | - { "src": "/static/favicon.png", "sizes": "512x512", "type": "image/png" }, | |
| 13 | + { | |
| 14 | + "src": "/static/favicon.svg", | |
| 15 | + "sizes": "any", | |
| 16 | + "type": "image/svg+xml" | |
| 17 | + }, | |
| 18 | + { | |
| 19 | + "src": "/static/icon-192.png", | |
| 20 | + "sizes": "192x192", | |
| 21 | + "type": "image/png" | |
| 22 | + }, | |
| 23 | + { | |
| 24 | + "src": "/static/icon-512.png", | |
| 25 | + "sizes": "512x512", | |
| 26 | + "type": "image/png" | |
| 27 | + }, | |
| 28 | + { | |
| 29 | + "src": "/static/icon-maskable-192.png", | |
| 30 | + "sizes": "192x192", | |
| 31 | + "type": "image/png", | |
| 32 | + "purpose": "maskable" | |
| 33 | + }, | |
| 34 | + { | |
| 35 | + "src": "/static/icon-maskable-512.png", | |
| 36 | + "sizes": "512x512", | |
| 37 | + "type": "image/png", | |
| 38 | + "purpose": "maskable" | |
| 39 | + }, | |
| 12 | 40 | { |
| 13 | 41 | "src": "/static/apple-touch-icon.png", |
| 14 | 42 | "sizes": "180x180", |
| @@ -1,14 +1,42 @@ | |||
| 1 | { | 1 | { |
| 2 | - "name": "Glean", | 2 | + "name": "Glean - Social RSS Reader", |
| 3 | "short_name": "Glean", | 3 | "short_name": "Glean", |
| 4 | - "description": "The social RSS reader built on AT Protocol.", | 4 | + "description": "The social RSS reader built on AT Protocol. Discover, read, and share articles from across the web.", |
| 5 | "start_url": "/dashboard", | 5 | "start_url": "/dashboard", |
| 6 | + "scope": "/", | ||
| 6 | "display": "standalone", | 7 | "display": "standalone", |
| 8 | + "orientation": "any", | ||
| 7 | "background_color": "#0a1814", | 9 | "background_color": "#0a1814", |
| 8 | "theme_color": "#00754A", | 10 | "theme_color": "#00754A", |
| 11 | + "categories": ["news", "social", "productivity"], | ||
| 9 | "icons": [ | 12 | "icons": [ |
| 10 | - { "src": "/static/favicon.svg", "sizes": "any", "type": "image/svg+xml" }, | 13 | + { |
| 11 | - { "src": "/static/favicon.png", "sizes": "512x512", "type": "image/png" }, | 14 | + "src": "/static/favicon.svg", |
| 15 | + "sizes": "any", | ||
| 16 | + "type": "image/svg+xml" | ||
| 17 | + }, | ||
| 18 | + { | ||
| 19 | + "src": "/static/icon-192.png", | ||
| 20 | + "sizes": "192x192", | ||
| 21 | + "type": "image/png" | ||
| 22 | + }, | ||
| 23 | + { | ||
| 24 | + "src": "/static/icon-512.png", | ||
| 25 | + "sizes": "512x512", | ||
| 26 | + "type": "image/png" | ||
| 27 | + }, | ||
| 28 | + { | ||
| 29 | + "src": "/static/icon-maskable-192.png", | ||
| 30 | + "sizes": "192x192", | ||
| 31 | + "type": "image/png", | ||
| 32 | + "purpose": "maskable" | ||
| 33 | + }, | ||
| 34 | + { | ||
| 35 | + "src": "/static/icon-maskable-512.png", | ||
| 36 | + "sizes": "512x512", | ||
| 37 | + "type": "image/png", | ||
| 38 | + "purpose": "maskable" | ||
| 39 | + }, | ||
| 12 | { | 40 | { |
| 13 | "src": "/static/apple-touch-icon.png", | 41 | "src": "/static/apple-touch-icon.png", |
| 14 | "sizes": "180x180", | 42 | "sizes": "180x180", |