feat: cache offline crisis resources (closes #41 )

2026-04-13 21:19:48 -04:00
5 changed files with 426 additions and 95 deletions
--- a/2
+++ b/2
@@ -34,7 +34,7 @@ deploy-bash:
 push:
 	rsync -avz --exclude='.git' --exclude='deploy' \
-		index.html manifest.json sw.js about.html testimony.html system-prompt.txt \
+		index.html manifest.json sw.js about.html crisis-offline.html testimony.html system-prompt.txt \
 		root@$(VPS):/var/www/the-door/
 	ssh root@$(VPS) "chown -R www-data:www-data /var/www/the-door"
--- a/crisis-offline.html
+++ b/crisis-offline.html
@@ -0,0 +1,241 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="theme-color" content="#0d1117">
 <meta name="description" content="Offline crisis resources from The Door. Call or text 988 for immediate help.">
 <title>Offline Crisis Resources | The Door</title>
 <style>
  :root {
    color-scheme: dark;
    --bg: #0d1117;
    --panel: #161b22;
    --panel-urgent: #1c1210;
    --border: #30363d;
    --accent: #c9362c;
    --accent-soft: #ff6b6b;
    --text: #e6edf3;
    --muted: #8b949e;
    --safe: #2ea043;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
  }
  main {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 48px;
  }
  .status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(201, 54, 44, 0.15);
    border: 1px solid rgba(255, 107, 107, 0.35);
    color: var(--accent-soft);
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-soft);
  }
  h1 {
    font-size: clamp(2rem, 6vw, 2.75rem);
    line-height: 1.15;
    margin: 0 0 12px;
  }
  .lede {
    color: var(--muted);
    font-size: 1.05rem;
    margin: 0 0 28px;
  }
  .urgent-box,
  .panel {
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    background: var(--panel);
  }
  .urgent-box {
    background: linear-gradient(180deg, rgba(201, 54, 44, 0.18), rgba(28, 18, 16, 0.95));
    border-color: rgba(255, 107, 107, 0.35);
  }
  .section-title {
    font-size: 1.2rem;
    margin: 0 0 12px;
  }
  .actions {
    display: grid;
    gap: 12px;
    margin-top: 16px;
  }
  .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    min-height: 52px;
    padding: 14px 18px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border: 1px solid transparent;
  }
  .action-btn.secondary {
    background: #1f6feb;
  }
  .action-btn.retry {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
  }
  .action-btn:focus,
  .action-btn:hover,
  button.action-btn:hover,
  button.action-btn:focus {
    outline: 3px solid rgba(255, 107, 107, 0.4);
    outline-offset: 2px;
  }
  ul, ol {
    margin: 0;
    padding-left: 20px;
  }
  li + li {
    margin-top: 8px;
  }
  .grounding-steps li::marker {
    color: var(--accent-soft);
    font-weight: 700;
  }
  .small {
    color: var(--muted);
    font-size: 0.92rem;
  }
  .grid {
    display: grid;
    gap: 18px;
  }
  @media (min-width: 700px) {
    .grid {
      grid-template-columns: 1fr 1fr;
    }
  }
 </style>
 </head>
 <body>
 <main>
  <div class="status" role="status" aria-live="polite">
    <span class="status-dot" aria-hidden="true"></span>
    <span id="connection-status-text">Offline crisis resources are ready on this device.</span>
  </div>
  <h1>You are not alone right now.</h1>
  <p class="lede">
    Your connection is weak or offline. These crisis resources are saved locally so you can still reach help.
  </p>
  <section class="urgent-box" aria-labelledby="urgent-help-title">
    <h2 class="section-title" id="urgent-help-title">Immediate help</h2>
    <p>If you might act on suicidal thoughts, contact a real person now. Stay with another person if you can.</p>
    <div class="actions">
      <a class="action-btn" href="tel:988" aria-label="Call 988 now">Call 988 now</a>
      <a class="action-btn secondary" href="sms:741741&body=HOME" aria-label="Text HOME to 741741 for Crisis Text Line">Text HOME to 741741 — Crisis Text Line</a>
      <button class="action-btn retry" id="retry-connection" type="button">Retry connection</button>
    </div>
    <p class="small" style="margin-top: 14px;">If you are in immediate danger or have already taken action, call emergency services now.</p>
  </section>
  <div class="grid">
    <section class="panel" aria-labelledby="grounding-title">
      <h2 class="section-title" id="grounding-title">5-4-3-2-1 grounding</h2>
      <ol class="grounding-steps">
        <li>5 things you can see</li>
        <li>4 things you can feel</li>
        <li>3 things you can hear</li>
        <li>2 things you can smell</li>
        <li>1 thing you can taste</li>
      </ol>
      <p class="small" style="margin-top: 14px;">Say each one out loud if you can. Slow is okay.</p>
    </section>
    <section class="panel" aria-labelledby="next-steps-title">
      <h2 class="section-title" id="next-steps-title">Next small steps</h2>
      <ul>
        <li>Put some distance between yourself and anything you could use to hurt yourself.</li>
        <li>Move closer to another person, a front desk, or a public place if possible.</li>
        <li>Drink water or hold something cold in your hand.</li>
        <li>Breathe in for 4, hold for 4, out for 6. Repeat 5 times.</li>
        <li>Text or call one safe person and say: “I need you with me right now.”</li>
      </ul>
    </section>
  </div>
  <section class="panel" aria-labelledby="hope-title">
    <h2 class="section-title" id="hope-title">Stay through the next ten minutes</h2>
    <p>Do not solve your whole life right now. Stay for the next breath. Then the next one.</p>
    <p class="small">If the connection comes back, you can return to The Door chat. Until then, the fastest path to a real person is still 988.</p>
  </section>
 </main>
 <script>
  (function () {
    var statusText = document.getElementById('connection-status-text');
    var retryButton = document.getElementById('retry-connection');
    function updateStatus() {
      statusText.textContent = navigator.onLine
        ? 'Connection is back. You can reopen chat now.'
        : 'Offline crisis resources are ready on this device.';
    }
    retryButton.addEventListener('click', function () {
      if (navigator.onLine) {
        window.location.href = '/';
        return;
      }
      window.location.reload();
    });
    window.addEventListener('online', updateStatus);
    window.addEventListener('offline', updateStatus);
    updateStatus();
  })();
 </script>
 </body>
 </html>
--- a/pytest.ini
+++ b/pytest.ini
@@ -1,5 +1,5 @@
 [pytest]
-testpaths = crisis
+testpaths = crisis tests
-python_files = tests.py
+python_files = tests.py test_*.py
 python_classes = Test*
 python_functions = test_*
--- a/sw.js
+++ b/sw.js
@@ -1,118 +1,153 @@
-const CACHE_NAME = 'the-door-v2';
+const CACHE_NAME = 'the-door-v3';
-const ASSETS = [
+const NAVIGATION_TIMEOUT_MS = 2500;
 const OFFLINE_FALLBACK_PATH = '/crisis-offline.html';
 const PRECACHE_ASSETS = [
  '/',
  '/index.html',
-  '/about',
+  '/about.html',
-  '/manifest.json'
+  '/manifest.json',
  '/crisis-offline.html',
  '/testimony.html'
 ];
-// Crisis resources to show when everything fails
+function isSameOrigin(request) {
-const CRISIS_OFFLINE_RESPONSE = `<!DOCTYPE html>
+  return new URL(request.url).origin === self.location.origin;
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>You're Not Alone | The Door</title>
 <style>
 body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0d1117;color:#e6edf3;max-width:600px;margin:0 auto;padding:20px;line-height:1.6}
 h1{color:#ff6b6b;font-size:1.5rem;margin-bottom:1rem}
 .crisis-box{background:#1c1210;border:2px solid #c9362c;border-radius:12px;padding:20px;margin:20px 0;text-align:center}
 .crisis-box a{display:inline-block;background:#c9362c;color:#fff;text-decoration:none;padding:16px 32px;border-radius:8px;font-weight:700;font-size:1.2rem;margin:10px 0}
 .hope{color:#8b949e;font-style:italic;margin-top:30px;padding-top:20px;border-top:1px solid #30363d}
 </style>
 </head>
 <body>
 <h1>You are not alone.</h1>
 <p>Your connection is down, but help is still available.</p>
 <div class="crisis-box">
  <p><strong>Call or text 988</strong><br>Suicide & Crisis Lifeline<br>Free, 24/7, Confidential</p>
  <a href="tel:988">Call 988 Now</a>
  <p style="margin-top:15px"><strong>Or text HOME to 741741</strong><br>Crisis Text Line</p>
 </div>
 <p><strong>When you're ready:</strong></p>
 <ul>
  <li>Take five deep breaths</li>
  <li>Drink some water</li>
  <li>Step outside if you can</li>
  <li>Text or call someone you trust</li>
 </ul>
 <p class="hope">
  "The Lord is close to the brokenhearted and saves those who are crushed in spirit." — Psalm 34:18
 </p>
 <p style="font-size:0.85rem;color:#6e7681;margin-top:30px">
  This page was created by The Door — a crisis intervention project.<br>
  Connection will restore automatically. You don't have to go through this alone.
 </p>
 </body>
 </html>`;
 // Install event - cache core assets
 self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(ASSETS);
    })
  );
  self.skipWaiting();
 });
 // Activate event - cleanup old caches
 self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))
      );
    })
  );
  self.clients.claim();
 });
 // Fetch event - network first, fallback to cache for static,
 // but for the crisis front door, we want to ensure the shell is ALWAYS available.
 self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  // Skip API calls - they should always go to network
  if (url.pathname.startsWith('/api/')) {
    return;
 }
-  // Skip non-GET requests
+function canCache(response) {
-  if (event.request.method !== 'GET') {
+  return Boolean(response && response.ok && response.type !== 'opaque');
    return;
 }
-  event.respondWith(
+async function precache() {
-    fetch(event.request)
+  const cache = await caches.open(CACHE_NAME);
-      .then((response) => {
+  await cache.addAll(PRECACHE_ASSETS);
        // If we got a valid response, cache it for next time
        if (response.ok && ASSETS.includes(url.pathname)) {
          const copy = response.clone();
          caches.open(CACHE_NAME).then((cache) => cache.put(event.request, copy));
 }
 async function cleanupOldCaches() {
  const keys = await caches.keys();
  await Promise.all(
    keys
      .filter((key) => key !== CACHE_NAME)
      .map((key) => caches.delete(key))
  );
 }
 async function putInCache(request, response) {
  if (!isSameOrigin(request) || !canCache(response)) {
    return response;
      })
      .catch(() => {
        // If network fails, try cache
        return caches.match(event.request).then((cached) => {
          if (cached) return cached;
          // If it's a navigation request and we're offline, show offline crisis page
          if (event.request.mode === 'navigate') {
            return new Response(CRISIS_OFFLINE_RESPONSE, {
              status: 200,
              headers: new Headers({ 'Content-Type': 'text/html' })
            });
  }
-          // For other requests, return a simple offline message
+  const cache = await caches.open(CACHE_NAME);
-          return new Response('Offline. Call 988 for immediate help.', {
+  await cache.put(request, response.clone());
  return response;
 }
 async function fetchWithTimeout(request, timeoutMs) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
  try {
    return await fetch(request, { signal: controller.signal });
  } finally {
    clearTimeout(timeoutId);
  }
 }
 async function offlineTextResponse() {
  return new Response('Offline. Call 988 or text HOME to 741741 for immediate help.', {
    status: 503,
    statusText: 'Service Unavailable',
-            headers: new Headers({ 'Content-Type': 'text/plain' })
+    headers: new Headers({ 'Content-Type': 'text/plain; charset=utf-8' })
  });
-        });
+}
-      })
+
 async function handleNavigation(request) {
  const cache = await caches.open(CACHE_NAME);
  const cachedPage = await cache.match(request);
  const offlineFallback = await cache.match(OFFLINE_FALLBACK_PATH);
  try {
    const response = await fetchWithTimeout(request, NAVIGATION_TIMEOUT_MS);
    return await putInCache(request, response);
  } catch (error) {
    if (cachedPage) {
      return cachedPage;
    }
    if (offlineFallback) {
      return offlineFallback;
    }
    return offlineTextResponse();
  }
 }
 async function handleStaticRequest(request) {
  const cache = await caches.open(CACHE_NAME);
  const cached = await cache.match(request);
  if (cached) {
    fetch(request)
      .then((response) => putInCache(request, response))
      .catch(() => null);
    return cached;
  }
  try {
    const response = await fetch(request);
    return await putInCache(request, response);
  } catch (error) {
    return offlineTextResponse();
  }
 }
 async function handleOtherRequest(request) {
  try {
    const response = await fetch(request);
    return await putInCache(request, response);
  } catch (error) {
    const cached = await caches.match(request);
    if (cached) {
      return cached;
    }
    return offlineTextResponse();
  }
 }
 self.addEventListener('install', (event) => {
  event.waitUntil(
    precache().then(() => self.skipWaiting())
  );
 });
 self.addEventListener('activate', (event) => {
  event.waitUntil(
    cleanupOldCaches().then(() => self.clients.claim())
  );
 });
 self.addEventListener('fetch', (event) => {
  const request = event.request;
  const url = new URL(request.url);
  if (request.method !== 'GET') {
    return;
  }
  if (!isSameOrigin(request) || url.pathname.startsWith('/api/')) {
    return;
  }
  if (event.request.mode === 'navigate') {
    event.respondWith(handleNavigation(request));
    return;
  }
  if (PRECACHE_ASSETS.includes(url.pathname)) {
    event.respondWith(handleStaticRequest(request));
    return;
  }
  event.respondWith(handleOtherRequest(request));
 });
--- a/tests/test_service_worker_offline.py
+++ b/tests/test_service_worker_offline.py
@@ -0,0 +1,55 @@
 import pathlib
 import unittest
 ROOT = pathlib.Path(__file__).resolve().parents[1]
 SERVICE_WORKER = (ROOT / 'sw.js').read_text(encoding='utf-8')
 CRISIS_OFFLINE_PAGE = ROOT / 'crisis-offline.html'
 MAKEFILE = (ROOT / 'Makefile').read_text(encoding='utf-8')
 class TestServiceWorkerOffline(unittest.TestCase):
    def test_crisis_offline_page_exists(self):
        self.assertTrue(CRISIS_OFFLINE_PAGE.exists(), 'crisis-offline.html should exist')
    def test_service_worker_precaches_crisis_offline_page(self):
        self.assertIn('/crisis-offline.html', SERVICE_WORKER)
    def test_service_worker_has_navigation_timeout_for_intermittent_connections(self):
        self.assertIn('NAVIGATION_TIMEOUT_MS', SERVICE_WORKER)
        self.assertIn('AbortController', SERVICE_WORKER)
    def test_service_worker_uses_crisis_offline_fallback_for_navigation(self):
        self.assertIn("event.request.mode === 'navigate'", SERVICE_WORKER)
        self.assertIn("/crisis-offline.html", SERVICE_WORKER)
    def test_make_push_includes_crisis_offline_page(self):
        self.assertIn('crisis-offline.html', MAKEFILE)
 class TestCrisisOfflinePage(unittest.TestCase):
    @classmethod
    def setUpClass(cls):
        cls.html = CRISIS_OFFLINE_PAGE.read_text(encoding='utf-8') if CRISIS_OFFLINE_PAGE.exists() else ''
        cls.lower_html = cls.html.lower()
    def test_has_clickable_988_link(self):
        self.assertIn('href="tel:988"', self.html)
    def test_has_crisis_text_line(self):
        self.assertIn('Crisis Text Line', self.html)
        self.assertIn('741741', self.html)
    def test_has_grounding_techniques(self):
        required_phrases = [
            '5 things you can see',
            '4 things you can feel',
            '3 things you can hear',
            '2 things you can smell',
            '1 thing you can taste',
        ]
        for phrase in required_phrases:
            self.assertIn(phrase, self.lower_html)
 if __name__ == '__main__':
    unittest.main()