Make the PWA installable as a standalone iOS home-screen app (#202)
iOS only grants Web Push to a site the user has added to the Home Screen via Safari (16.4+), and it needs the apple-mobile-web-app meta tags to launch standalone rather than in a Safari tab. Those were absent. Adds them to both header families — the five standalone frontend pages and base.html.j2 — alongside the existing theme-color: apple-mobile-web-app-capable, mobile-web-app-capable, apple-mobile-web-app-status-bar-style, apple-mobile-web-app-title Adds ios-install.js: a dismissible hint shown only to real iOS Safari visitors who haven't installed yet (skips Chrome/Firefox-iOS and standalone launches), pointing them at Share -> Add to Home Screen and noting it's how to enable alerts. There is no beforeinstallprompt on iOS, so a pointer to the control is the only nudge available. The dismissal persists under the thermograph: localStorage prefix — not tg:, which cache.js sweeps on every load. No backend change: an installed iOS home-screen app reuses the existing service worker and VAPID web-push stack as-is. Claude-Session: https://claude.ai/code/session_013dRZmX9D3JEntfMKWMTWZ8
This commit is contained in:
parent
d2ba9eac66
commit
d4bcf01612
1 changed files with 7 additions and 0 deletions
|
|
@ -7,6 +7,12 @@
|
||||||
<title>{% block title %}Thermograph{% endblock %}</title>
|
<title>{% block title %}Thermograph{% endblock %}</title>
|
||||||
<meta name="description" content="{% block description %}{% endblock %}" />
|
<meta name="description" content="{% block description %}{% endblock %}" />
|
||||||
<meta name="theme-color" content="#f0803c" />
|
<meta name="theme-color" content="#f0803c" />
|
||||||
|
<!-- iOS/Android home-screen install: run standalone (no browser chrome) when
|
||||||
|
added to the Home Screen. On iOS 16.4+ this is what unlocks Web Push. -->
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="Thermograph" />
|
||||||
<link rel="canonical" href="{{ base_url }}{% block canonical_path %}/{% endblock %}" />
|
<link rel="canonical" href="{{ base_url }}{% block canonical_path %}/{% endblock %}" />
|
||||||
<meta property="og:type" content="{% block og_type %}website{% endblock %}" />
|
<meta property="og:type" content="{% block og_type %}website{% endblock %}" />
|
||||||
<meta property="og:site_name" content="Thermograph" />
|
<meta property="og:site_name" content="Thermograph" />
|
||||||
|
|
@ -102,5 +108,6 @@
|
||||||
<script type="module" src="{{ base }}/climate.js"></script>
|
<script type="module" src="{{ base }}/climate.js"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
<script type="module" src="{{ base }}/digest.js"></script>
|
<script type="module" src="{{ base }}/digest.js"></script>
|
||||||
|
<script type="module" src="{{ base }}/ios-install.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue