coldwire-rails 0.1.0

data/app/assets/javascripts/coldwire/entries.js

@@ -0,0 +1,55 @@
+// Wording for the cached list and for a finished sync.
+
+import { formatBytes, formatCachedAt } from "coldwire/format"
+
+// The worker stamps this on the request it stores under; the Cache API keeps no date
+// of its own.
+export const TIMESTAMP_HEADER = "timestamp"
+
+export function describeEntry(entry) {
+  const parts = [ formatBytes(entry.size) ]
+  if (entry.timestamp) parts.push(`cached ${formatCachedAt(entry.timestamp)}`)
+  if (entry.cache) parts.push(`in “${entry.cache}”`)
+
+  return parts.join(" · ")
+}
+export async function describeCached(request, response) {
+  const seconds = Number(request.headers.get(TIMESTAMP_HEADER))
+
+  return {
+    url: request.url,
+    size: await entrySize(response),
+    timestamp: Number.isFinite(seconds) && seconds > 0 ? seconds : null
+  }
+}
+export function describeFinishedSync(data) {
+  // Nothing went wrong and nothing needs retrying — it was simply never asked to work.
+  if (data.offline) {
+    return data.reason === "forced"
+      ? "Paused while force offline is on."
+      : "No connection. Will sync when it is back."
+  }
+  if (data.error) return `Sync failed: ${data.error}`
+
+  const parts = [ `Cached ${data.cached}` ]
+  if (data.retired) parts.push(`retired ${data.retired}`)
+  if (data.failed?.length) parts.push(`${data.failed.length} failed`)
+  // A sync attempts the whole manifest, so anything left is something that would not
+  // fetch. It stays missing, so the next sync finds it and tries again.
+  if (!data.complete) parts.push(`${data.remaining} to retry`)
+
+  return `${parts.join(", ")}.`
+}
+
+// Headers before body: blob() on hundreds of entries makes listing the cache a multi-second
+// job. Note that `get` answers null for a missing header and Number(null) is 0, which sailed
+// through the guard and reported Active Storage's streamed blobs as empty.
+async function entrySize(response) {
+  if (!response) return 0
+
+  const declared = response.headers.get("Content-Length")
+  const bytes = declared === null ? NaN : Number(declared)
+  if (Number.isFinite(bytes) && bytes >= 0) return bytes
+
+  return (await response.clone().blob()).size
+}

data/app/assets/javascripts/coldwire/format.js

@@ -0,0 +1,60 @@
+// Turning numbers and timestamps into the words the offline settings page shows.
+
+// Whole words. "every 1 d" reads like a typo, and the cadence is the one number on this
+// card somebody is meant to act on.
+export function formatDuration(seconds) {
+  if (seconds < 60) return `${seconds} sec`
+  if (seconds < 3600) return plural(Math.round(seconds / 60), "min", "min")
+  if (seconds < 86400) return plural(Math.round(seconds / 3600), "hour")
+
+  return plural(Math.round(seconds / 86400), "day")
+}
+
+export function plural(count, one, many = `${one}s`) {
+  return `${count} ${count === 1 ? one : many}`
+}
+
+// "day", not "1 day" — the caller writes "Syncs every day".
+export function formatInterval(seconds) {
+  const text = formatDuration(seconds)
+
+  return text.startsWith("1 ") ? text.slice(2) : text
+}
+
+export function displayUrl(href) {
+  try {
+    const url = new URL(href)
+    return `${url.pathname}${url.search}`
+  } catch {
+    return href
+  }
+}
+
+export function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "—"
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) {
+    const kb = bytes / 1024
+    return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)} KB`
+  }
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+// Built once. Constructing an Intl formatter is expensive, and this is called for every row
+// on every keystroke — 485 of them cost 40ms a piece of typing when it was built per call.
+const relative = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" })
+
+export function formatCachedAt(timestamp) {
+  if (!timestamp) return "Unknown time"
+  const date = new Date(timestamp * 1000)
+  if (Number.isNaN(date.getTime())) return "Unknown time"
+
+  const deltaSec = Math.round((date.getTime() - Date.now()) / 1000)
+  const abs = Math.abs(deltaSec)
+  const rtf = relative
+  if (abs < 60) return rtf.format(deltaSec, "second")
+  if (abs < 3600) return rtf.format(Math.round(deltaSec / 60), "minute")
+  if (abs < 86400) return rtf.format(Math.round(deltaSec / 3600), "hour")
+  if (abs < 86400 * 7) return rtf.format(Math.round(deltaSec / 86400), "day")
+  return date.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" })
+}

data/app/assets/javascripts/coldwire/worker.js

@@ -0,0 +1,35 @@
+// Talking to the service worker: one request, one reply, on a port this page owns.
+
+export async function sendToWorker(type, payload, timeoutMs) {
+  if (!("serviceWorker" in navigator)) {
+    throw new Error("Service workers are not available in this web view")
+  }
+
+  // `ready` is a promise for a registration that may never exist, not a check — with nothing
+  // registered for this scope it simply never settles. Unbounded, it hangs whatever awaited
+  // it: the offline settings page sat on "Checking…" with an empty list, because the refresh never got
+  // past its first question to the worker.
+  const registration = await deadline(
+    navigator.serviceWorker.ready, timeoutMs, "No service worker is registered for this page"
+  )
+
+  if (!registration.active) {
+    throw new Error("Service worker is not active yet. Reload and try again.")
+  }
+
+  return deadline(new Promise((resolve) => {
+    const { port1, port2 } = new MessageChannel()
+    port1.onmessage = (event) => resolve(event.data)
+    registration.active.postMessage({ type, ...payload }, [ port2 ])
+  }), timeoutMs, "Timed out")
+}
+
+// A worker torn down mid-job answers nobody, so every wait on one needs a way out.
+function deadline(promise, timeoutMs, message) {
+  let timer = null
+
+  return Promise.race([
+    promise.finally(() => window.clearTimeout(timer)),
+    new Promise((_, reject) => { timer = window.setTimeout(() => reject(new Error(message)), timeoutMs) })
+  ])
+}

data/app/controllers/coldwire/application_controller.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Coldwire
+  # Inherits the host's ApplicationController so the offline settings page picks up its layout,
+  # authentication, and helpers.
+  class ApplicationController < ::ApplicationController
+    # The engine is isolated, so bare route helpers inside it resolve against the engine's
+    # own routes. The host's layout calls its own helpers (`root_path`, `sites_path`, …),
+    # which would otherwise raise. Coldwire's own views still say `coldwire.pack_path`.
+    helper ::Rails.application.routes.url_helpers
+
+    # Those helpers still build on the request's SCRIPT_NAME, which inside a mounted engine is
+    # the mount point — so a host layout asking for `sites_path` got "/offline/sites", a URL
+    # the app does not serve. Clear it: the host's helpers describe the host's routes, which
+    # begin at the root whatever Coldwire is mounted under. Coldwire's own views say
+    # `coldwire.pack_path`, and that proxy supplies the mount itself.
+    def url_options
+      super.merge(script_name: "")
+    end
+  end
+end

data/app/controllers/coldwire/caches_controller.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Coldwire
+  # Offline settings: inspect what is cached, precache the manifest, force offline.
+  class CachesController < Coldwire::ApplicationController
+    def show
+    end
+
+    # The precache manifest. Never stored by anything: the worker asks with `cache: "no-store"`,
+    # but that binds only the one caller, and a browser serving a heuristically-fresh copy had
+    # syncs faithfully fetching yesterday's list.
+    def pack
+      response.headers["Cache-Control"] = "no-store, private"
+
+      render json: { urls: Array(precache_urls) }
+    end
+
+    private
+
+    # Evaluated against the host's URL helpers, so `site_path(site)` means the host's route
+    # rather than one of Coldwire's. A lambda that takes an argument is handed this controller.
+    def precache_urls
+      manifest = Coldwire.config.auto_sync.precache_urls
+      helpers = ::Rails.application.routes.url_helpers
+
+      if manifest.arity.zero?
+        helpers.instance_exec(&manifest)
+      else
+        helpers.instance_exec(self, &manifest)
+      end
+    end
+  end
+end

data/app/controllers/coldwire/service_worker_controller.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Coldwire
+  # Serves the worker script. Deliberately not the host's ApplicationController: the worker
+  # must be fetchable before anyone signs in, and an authentication filter would break
+  # registration.
+  class ServiceWorkerController < ActionController::Base
+    # The worker carries no user data and is fetched by the browser's worker loader, not an
+    # XHR, so Rails' cross-origin script guard only rejects legitimate registrations.
+    skip_forgery_protection
+
+    def show
+      # A worker's scope is capped by the directory it is served from, so an engine mounted at
+      # /offline would only control /offline/*. This lifts the cap.
+      response.headers["Service-Worker-Allowed"] = Coldwire.config.worker_scope
+      response.headers["Cache-Control"] = "no-cache"
+
+      render(
+        template: "coldwire/service_worker/show",
+        formats: :js,
+        layout: false,
+        content_type: "text/javascript"
+      )
+    end
+  end
+end

data/app/helpers/coldwire/service_worker_helper.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Coldwire
+  # Emits everything Coldwire needs in a page's <head>: a meta carrying the sync interval, and
+  # one script that registers the worker and keeps the few things a worker cannot remember.
+  #
+  # The script itself lives in lib/coldwire/client as ordinary JavaScript. Only the values it
+  # cannot know are passed in, as a `COLDWIRE` object it reads.
+  module ServiceWorkerHelper
+    USER_AGENT_COOKIE = "coldwire-user-agent"
+
+    def coldwire_service_worker_tag
+      return unless Coldwire.config.register?(self)
+
+      safe_join([ coldwire_sync_interval_meta, coldwire_client_tag ].compact, "\n")
+    end
+
+    def coldwire_debug_styles
+      tag.style(Coldwire::Source.debug_css.html_safe)
+    end
+
+    private
+
+    def coldwire_client_tag
+      javascript_tag(nonce: true) do
+        Coldwire::Source.client(coldwire_client_config, coldwire_client_parts).html_safe
+      end
+    end
+
+    def coldwire_client_config
+      {
+        cacheName: Coldwire.config.cache_name,
+        identity: Coldwire.config.cache_identity(self),
+        workerPath: coldwire.service_worker_path,
+        workerScope: Coldwire.config.worker_scope,
+        syncInterval: Coldwire.config.auto_sync.interval.to_i * 1000,
+        cachingEnabledByDefault: Coldwire.config.caching_enabled_by_default,
+        userAgentCookie: USER_AGENT_COOKIE
+      }
+    end
+
+    # Order matters: the store before anything that reads it, the registration last.
+    def coldwire_client_parts
+      parts = %w[store api identity]
+      parts << "marker" if Coldwire.config.mark_cached_pages
+      parts += %w[cookie forced]
+      parts << "sync" if Coldwire.config.auto_sync.enabled
+      parts << "register"
+    end
+
+    # Read on every use rather than baked into the script, so a document that outlives a config
+    # change follows the new interval rather than the one it was born with.
+    def coldwire_sync_interval_meta
+      return unless Coldwire.config.auto_sync.enabled
+
+      tag.meta(name: "coldwire-sync-interval", content: Coldwire.config.auto_sync.interval.to_i)
+    end
+  end
+end

data/app/views/coldwire/caches/show.html.erb

@@ -0,0 +1,304 @@
+<%# Heroicons trash, outline. Held in one place: it is drawn both by Clear cache and by every
+    row in the cached list, and a path this long is not worth keeping in step by hand. %>
+<% trash_path = "m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" %>
+
+<%# Coldwire's offline settings page. Styled with plain CSS on purpose: the gem must not assume
+    Tailwind, Bootstrap, or any host framework. Override this template by creating
+    app/views/coldwire/caches/show.html.erb in your own app. The title goes through
+    `content_for :title` so the host layout can put it in `<title>` (and Hotwire Native's
+    bar) rather than repeating it as a heading on the page. %>
+
+<% content_for :title, "Offline settings" %>
+
+<%= coldwire_debug_styles %>
+
+<% unless Coldwire.config.register?(self) %>
+  <%# `register_if` said no for this request, so no worker was ever registered here: nothing
+      is cached, nothing syncs, and force offline has nothing to force. Showing an empty cache
+      and a countdown would read as a broken page rather than a switched-off one. %>
+  <div class="coldwire">
+    <div class="coldwire-card">
+      <p class="coldwire-headline">
+        <span class="coldwire-light" data-state="disabled" aria-hidden="true"></span>
+        Offline is off for this device
+      </p>
+      <p class="coldwire-facts">
+        Coldwire is not running here, so nothing is being cached and nothing will be available
+        without a connection. Whether it runs is decided per request by
+        <code>config.register_if</code> — typically the native app, signed in.
+      </p>
+    </div>
+  </div>
+<% else %>
+<div class="coldwire"
+     data-controller="coldwire-cache"
+     data-coldwire-cache-probe-url-value="<%= Coldwire.config.probe_path %>"
+     data-coldwire-cache-auto-sync-value="<%= Coldwire.config.auto_sync.enabled %>"
+     data-coldwire-cache-sync-interval-value="<%= Coldwire.config.auto_sync.interval.to_i %>">
+  <div class="coldwire-card">
+    <div class="coldwire-head" data-coldwire-cache-target="whenOn">
+      <div>
+        <p class="coldwire-headline">
+          <span class="coldwire-light" data-coldwire-cache-target="connectionLight" aria-hidden="true"></span>
+          <span data-coldwire-cache-target="connection">Checking…</span>
+        </p>
+        <p class="coldwire-facts">
+          <span data-coldwire-cache-target="total">Reading the cache…</span>
+        </p>
+      </div>
+
+      <div class="coldwire-actions">
+        <button type="button"
+                class="coldwire-button coldwire-icon-button"
+                title="Reload this page"
+                aria-label="Reload this page"
+                data-coldwire-cache-target="refreshButton"
+                data-action="click->coldwire-cache#reload">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+          </svg>
+        </button>
+        <button type="button"
+                class="coldwire-button coldwire-icon-button coldwire-button--danger"
+                title="Delete everything cached"
+                aria-label="Delete everything cached"
+                data-coldwire-cache-target="clearButton"
+                data-action="click->coldwire-cache#clear">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="<%= trash_path %>" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <label class="coldwire-setting">
+      <span class="coldwire-switch coldwire-switch--on">
+        <input type="checkbox"
+               data-coldwire-cache-target="cachingToggle"
+               data-action="change->coldwire-cache#toggleCaching">
+        <span aria-hidden="true"></span>
+      </span>
+      <span>
+        <span class="coldwire-setting-title">Offline support</span>
+        <span class="coldwire-setting-note">
+          Cache pages so they work without a connection.
+        </span>
+      </span>
+    </label>
+
+    <div data-coldwire-cache-target="whenOn">
+      <hr>
+      <label class="coldwire-setting">
+        <span class="coldwire-switch">
+          <input type="checkbox"
+                 data-coldwire-cache-target="forcedToggle"
+                 data-action="change->coldwire-cache#toggleForced">
+          <span aria-hidden="true"></span>
+        </span>
+        <span>
+          <span class="coldwire-setting-title">Force offline</span>
+          <span class="coldwire-setting-note">
+            Turn this on if you have a really slow connection.
+          </span>
+        </span>
+      </label>
+    </div>
+  </div>
+
+  <div data-coldwire-cache-target="whenOn">
+  <div class="coldwire-card">
+    <h2>Auto Sync</h2>
+
+    <% if Coldwire.config.auto_sync.enabled %>
+      <%# Only where the app configured automatic syncing at all: a switch for something that
+          was never going to happen is a switch that lies. The card leads with it and lets its
+          note do the explaining, the way Force offline does. %>
+      <label class="coldwire-setting">
+        <span class="coldwire-switch coldwire-switch--on">
+          <input type="checkbox"
+                 data-coldwire-cache-target="autoSyncToggle"
+                 data-action="change->coldwire-cache#toggleAutoSync">
+          <span aria-hidden="true"></span>
+        </span>
+        <span>
+          <span class="coldwire-setting-title">Sync on its own</span>
+          <span class="coldwire-setting-note">
+            Automatically runs in the background backing up pages to be used offline.
+          </span>
+        </span>
+      </label>
+    <% else %>
+      <p class="coldwire-facts" style="margin-top: 0;">
+        Automatically runs in the background backing up pages to be used offline.
+        <strong>Sync now</strong> runs that pass immediately.
+      </p>
+    <% end %>
+
+    <p class="coldwire-facts">
+      <span data-coldwire-cache-target="autoSync">Checking…</span><br>
+      <span data-coldwire-cache-target="syncedAt">Never synced</span>
+    </p>
+
+    <%# Empty until a sync has something to say, so the card does not carry a permanent
+        "Idle" that reads like debug output left in by accident. %>
+    <p class="coldwire-facts" data-coldwire-cache-target="syncStatus" hidden></p>
+
+    <div class="coldwire-actions coldwire-actions--spaced">
+      <button type="button"
+              data-coldwire-cache-target="syncButton"
+              class="coldwire-button"
+              data-action="click->coldwire-cache#syncNow">
+        <span class="coldwire-spinner" data-coldwire-cache-target="spinner" aria-hidden="true" hidden></span>
+        <span data-coldwire-cache-target="syncLabel">Sync now</span>
+      </button>
+    </div>
+
+    <div style="margin-top: 0.75rem;"
+         role="progressbar"
+         aria-valuemin="0"
+         aria-valuemax="100"
+         data-coldwire-cache-target="progress"
+         hidden>
+      <div class="coldwire-track">
+        <div class="coldwire-bar" data-coldwire-cache-target="progressBar"></div>
+      </div>
+      <div class="coldwire-progress-label" data-coldwire-cache-target="progressLabel"></div>
+    </div>
+  </div>
+
+  <% if Coldwire.config.cache_archives.any? %>
+    <%# One row per configured file. The words are the app's — the page knows only that these
+        are large, optional, and worth keeping. %>
+    <div class="coldwire-card" data-coldwire-cache-target="archives">
+      <% Coldwire.config.cache_archives.each do |archive| %>
+        <div class="coldwire-archive" data-archive-url="<%= archive[:url] %>">
+          <div class="coldwire-archive-title"><%= archive[:title] %></div>
+          <% if archive[:description].present? %>
+            <p class="coldwire-facts"><%= archive[:description] %></p>
+          <% end %>
+          <div class="coldwire-actions">
+            <button type="button" class="coldwire-button"
+                    data-url="<%= archive[:url] %>"
+                    data-action="click->coldwire-cache#downloadArchive">
+              <span class="coldwire-spinner" data-archive-spinner aria-hidden="true" hidden></span>
+              <span data-archive-download-label>Download</span>
+            </button>
+            <button type="button" class="coldwire-button coldwire-button--danger"
+                    data-url="<%= archive[:url] %>"
+                    data-action="click->coldwire-cache#removeArchive"
+                    data-archive-remove hidden>
+              Delete
+            </button>
+          </div>
+
+          <p class="coldwire-facts coldwire-archive-meta" data-archive-status>Checking…</p>
+
+          <div style="margin-top: 0.75rem;" role="progressbar" aria-valuemin="0" aria-valuemax="100"
+               data-archive-progress hidden>
+            <div class="coldwire-track"><div class="coldwire-bar" data-archive-bar></div></div>
+            <div class="coldwire-progress-label" data-archive-progress-label></div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%# The URL list is a debug surface, not something most people need. Closed until they
+      open it; remembered after that. %>
+  <details class="coldwire-inspect"
+           data-coldwire-cache-target="inspect"
+           data-action="toggle->coldwire-cache#toggleInspect">
+    <summary>
+      <span class="coldwire-inspect-label">Inspect cache</span>
+      <span class="coldwire-inspect-hint">Every URL stored on this device</span>
+    </summary>
+
+    <div class="coldwire-inspect-body">
+      <div class="coldwire-filters">
+        <input type="search"
+               class="coldwire-input"
+               placeholder="Filter by path"
+               aria-label="Filter cached files by path"
+               autocomplete="off"
+               autocapitalize="none"
+               spellcheck="false"
+               data-coldwire-cache-target="search"
+               data-action="input->coldwire-cache#filterEntries search->coldwire-cache#filterEntries">
+        <select class="coldwire-select"
+                aria-label="Sort cached files"
+                data-coldwire-cache-target="sort"
+                data-action="change->coldwire-cache#filterEntries">
+          <option value="recent">Most recent</option>
+          <option value="largest">Largest</option>
+          <option value="alphabetical">A–Z</option>
+        </select>
+      </div>
+
+      <p class="coldwire-facts coldwire-count" data-coldwire-cache-target="summary">Reading the cache…</p>
+
+      <ul class="coldwire-entries" data-coldwire-cache-target="entries">
+        <li class="coldwire-empty">Nothing cached yet.</li>
+      </ul>
+
+      <%# Cloned for each row. Keeping the markup here rather than assembling it in JavaScript
+          means the icon and its wrapper are described once, in the place you would look. %>
+      <template data-coldwire-cache-target="forgetTemplate">
+        <button type="button" class="coldwire-entry-forget" data-action="click->coldwire-cache#forgetEntry">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="<%= trash_path %>" />
+          </svg>
+        </button>
+      </template>
+    </div>
+  </details>
+  </div>
+
+  <%# A real <dialog>: Escape, focus handling and the backdrop come with it, and none of that
+      is worth reimplementing to show one string. %>
+  <dialog class="coldwire-dialog"
+          data-coldwire-cache-target="detail"
+          data-action="click->coldwire-cache#closeDetailOnBackdrop
+                       keydown->coldwire-cache#closeDetailOnEscape">
+    <h2>Cached file</h2>
+    <p class="coldwire-dialog-url" data-coldwire-cache-target="detailUrl"></p>
+    <p class="coldwire-facts" data-coldwire-cache-target="detailMeta"></p>
+    <div class="coldwire-actions coldwire-actions--spaced">
+      <button type="button" class="coldwire-button" data-action="click->coldwire-cache#closeDetail">
+        Close
+      </button>
+      <button type="button"
+              class="coldwire-button coldwire-button--danger"
+              data-coldwire-cache-target="detailForget"
+              data-action="click->coldwire-cache#forgetEntry">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="<%= trash_path %>" />
+        </svg>
+        Delete
+      </button>
+    </div>
+  </dialog>
+
+  <%# Turning offline support off deletes everything stored. Ask first, and keep the switch
+      on until they confirm — cancel is the safe default. %>
+  <dialog class="coldwire-dialog"
+          data-coldwire-cache-target="disableConfirm"
+          data-action="cancel->coldwire-cache#cancelDisableCaching
+                       click->coldwire-cache#closeDisableOnBackdrop">
+    <h2>Turn off offline support?</h2>
+    <p class="coldwire-facts" style="margin-top: 0;">
+      Everything saved for offline use will be deleted. Pages will not be available without
+      a connection until you turn this back on.
+    </p>
+    <div class="coldwire-actions coldwire-actions--spaced">
+      <button type="button" class="coldwire-button" data-action="click->coldwire-cache#cancelDisableCaching">
+        Cancel
+      </button>
+      <button type="button"
+              class="coldwire-button coldwire-button--danger"
+              data-action="click->coldwire-cache#confirmDisableCaching">
+        Turn off and delete
+      </button>
+    </div>
+  </dialog>
+</div>
+<% end %>

data/app/views/coldwire/service_worker/offline_frame.html.erb

@@ -0,0 +1,16 @@
+<%# Inner content of the offline fallback for a Turbo Frame request. The worker wraps this
+    in a <turbo-frame> carrying the requested id. Override by creating this same path.
+
+    `coldwire:retry-url` is substituted with the URL this frame was requesting. Use it rather
+    than an empty href: inside a frame that would resolve to the *page* URL and load the whole
+    document into the card. A link inside a frame targets that frame, so this retries just
+    this card. %>
+<div style="font-family: system-ui, sans-serif; padding: 1rem; color: #4b5563;">
+  <strong style="display: block; color: #1f2937;">Not available offline</strong>
+  <span style="font-size: 0.875rem;">Reconnect to see this.</span>
+  <a href="coldwire:retry-url"
+     style="display: inline-block; margin-top: 0.5rem; font-size: 0.875rem;
+            font-weight: 600; color: #1f2937;">
+    Try again
+  </a>
+</div>