From d4bcf01612cf17660cafe4db857c43871977a12b Mon Sep 17 00:00:00 2001
From: Emi Griffith <me@emigriffith.dev>
Date: Sun, 19 Jul 2026 17:40:04 -0700
Subject: [PATCH] Make the PWA installable as a standalone iOS home-screen app
 (#202)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 templates/base.html.j2 | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/templates/base.html.j2 b/templates/base.html.j2
index 68eca68..452ac99 100644
--- a/templates/base.html.j2
+++ b/templates/base.html.j2
@@ -7,6 +7,12 @@
   <title>{% block title %}Thermograph{% endblock %}</title>
   <meta name="description" content="{% block description %}{% endblock %}" />
   <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 %}" />
   <meta property="og:type" content="{% block og_type %}website{% endblock %}" />
   <meta property="og:site_name" content="Thermograph" />
@@ -102,5 +108,6 @@
   <script type="module" src="{{ base }}/climate.js"></script>
   {% endblock %}
   <script type="module" src="{{ base }}/digest.js"></script>
+  <script type="module" src="{{ base }}/ios-install.js"></script>
 </body>
 </html>