Add PWA install banner to dashboard
Shows a dismissible banner on mobile only, tailored to three cases: - iOS + Safari: instructions to tap Share → Add to Home Screen - iOS + other browser: tells user to open in Safari first (required for standalone) - Android: instructions to tap menu → Install App / Add to Home Screen Hidden when already running as standalone PWA, or after user dismisses it (stored in localStorage so it stays gone). Explains camera permission benefit. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -59,6 +59,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@* PWA install banner — rendered by JS only on mobile, hidden once dismissed or already installed *@
|
||||||
|
<div id="pwa-install-banner" class="row mb-4" style="display:none!important;">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="alert alert-permanent mb-0 d-flex align-items-start gap-3 py-3"
|
||||||
|
style="background:var(--pcl-paper-2);border:1px solid var(--pcl-rule);border-left:4px solid var(--pcl-ember);">
|
||||||
|
<div class="flex-shrink-0 mt-1">
|
||||||
|
<img src="/images/pwa-icon-192.png" alt="" width="36" height="36" style="border-radius:8px;">
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<div class="fw-semibold mb-1" id="pwa-banner-title">Add to Home Screen</div>
|
||||||
|
<div class="text-muted small" id="pwa-banner-msg"></div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn-close flex-shrink-0" id="pwa-banner-dismiss" aria-label="Dismiss"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
@if (guidedActivationBanner?.Show == true)
|
@if (guidedActivationBanner?.Show == true)
|
||||||
{
|
{
|
||||||
<div class="row mb-4">
|
<div class="row mb-4">
|
||||||
@@ -1253,6 +1270,61 @@
|
|||||||
</script>
|
</script>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var DISMISSED_KEY = 'pcl_pwa_banner_dismissed';
|
||||||
|
|
||||||
|
// Already installed as standalone — never show
|
||||||
|
var isStandalone = window.navigator.standalone === true ||
|
||||||
|
window.matchMedia('(display-mode: standalone)').matches;
|
||||||
|
if (isStandalone) return;
|
||||||
|
|
||||||
|
// Already dismissed
|
||||||
|
if (localStorage.getItem(DISMISSED_KEY)) return;
|
||||||
|
|
||||||
|
var ua = navigator.userAgent || '';
|
||||||
|
var isIOS = /iphone|ipad|ipod/i.test(ua);
|
||||||
|
var isAndroid = /android/i.test(ua);
|
||||||
|
|
||||||
|
// Only show on mobile
|
||||||
|
if (!isIOS && !isAndroid) return;
|
||||||
|
|
||||||
|
var banner = document.getElementById('pwa-install-banner');
|
||||||
|
var msgEl = document.getElementById('pwa-banner-msg');
|
||||||
|
var titleEl = document.getElementById('pwa-banner-title');
|
||||||
|
|
||||||
|
if (isIOS) {
|
||||||
|
// Detect Safari: has WebKit in UA but NOT Chrome/CriOS/FxiOS
|
||||||
|
var isSafari = /webkit/i.test(ua) && !/crios|chrome|fxios|opios/i.test(ua);
|
||||||
|
if (isSafari) {
|
||||||
|
titleEl.textContent = 'Add to Home Screen';
|
||||||
|
msgEl.innerHTML = 'For the best experience — and so the camera only asks once — open the ' +
|
||||||
|
'<strong>Share menu</strong> <span style="font-size:1.1em">▲</span> at the bottom of Safari ' +
|
||||||
|
'and tap <strong>Add to Home Screen</strong>.';
|
||||||
|
} else {
|
||||||
|
titleEl.textContent = 'Open in Safari to Install';
|
||||||
|
msgEl.innerHTML = 'To add Powder Coating Logix to your home screen, <strong>open this page in Safari</strong> ' +
|
||||||
|
'(not Chrome or another browser), then tap the <strong>Share menu</strong> ' +
|
||||||
|
'<span style="font-size:1.1em">▲</span> and choose <strong>Add to Home Screen</strong>. ' +
|
||||||
|
'This also means the camera only asks for permission once.';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Android
|
||||||
|
titleEl.textContent = 'Add to Home Screen';
|
||||||
|
msgEl.innerHTML = 'Tap the browser <strong>menu (⋮)</strong> and choose ' +
|
||||||
|
'<strong>Add to Home Screen</strong> or <strong>Install App</strong> for the best experience ' +
|
||||||
|
'and persistent camera access.';
|
||||||
|
}
|
||||||
|
|
||||||
|
banner.style.removeProperty('display');
|
||||||
|
|
||||||
|
document.getElementById('pwa-banner-dismiss').addEventListener('click', function () {
|
||||||
|
localStorage.setItem(DISMISSED_KEY, '1');
|
||||||
|
banner.style.display = 'none';
|
||||||
|
});
|
||||||
|
}());
|
||||||
|
</script>
|
||||||
|
|
||||||
@functions {
|
@functions {
|
||||||
IHtmlContent PriorityBadge(string priorityCode, string displayName, string colorClass)
|
IHtmlContent PriorityBadge(string priorityCode, string displayName, string colorClass)
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user