Çevrimdışı Uygulama — Metroda Bağlantı Kopunca Ne Gösterilir?

1
const VERSION = 'shell-v42';
2
const SHELL = ['/', '/app.js', '/app.css', '/icons/logo.svg'];
3

4
self.addEventListener('install', (event) => {
5
  event.waitUntil(caches.open(VERSION).then((cache) => cache.addAll(SHELL)));
6
});
7

8
self.addEventListener('activate', (event) => {
9
  // A new version deletes the old shell, so nobody is stuck on it.
10
  event.waitUntil(
11
    caches.keys().then((keys) => Promise.all(keys.filter((k) => k !== VERSION).map((k) => caches.delete(k)))),
12
  );
13
});
14

15
self.addEventListener('fetch', (event) => {
16
  const url = new URL(event.request.url);
17

18
  // Balances, history and transfers: network only, never cached.
19
  if (url.pathname.startsWith('/api/accounts') || url.pathname.startsWith('/api/transfers')) return;
20

21
  if (url.pathname.startsWith('/api/campaigns')) {
22
    event.respondWith(networkThenMarkedCache(event.request));
23
    return;
24
  }
25

26
  event.respondWith(caches.match(event.request).then((hit) => hit ?? fetch(event.request)));
27
});
28

29
async function networkThenMarkedCache(request) {
30
  const cache = await caches.open('campaigns');
31
  try {
32
    const fresh = await fetch(request);
33
    cache.put(request, fresh.clone());
34
    return fresh;
35
  } catch {
36
    const old = await cache.match(request);
37
    if (!old) throw new Error('offline');
38
    // The page reads this header and shows "eski olabilir".
39
    const headers = new Headers(old.headers);
40
    headers.set('X-From-Cache', 'true');
41
    return new Response(old.body, { status: old.status, headers });
42
  }
43
}

1
if ('serviceWorker' in navigator) {
2
  window.addEventListener('load', () => {
3
    navigator.serviceWorker.register('/sw.js');
4
  });
5
}

1
import { useState } from 'react';
2
import { sendTransfer, type TransferForm } from '../api/transfers';
3

4
export function TransferButton({ form }: { form: TransferForm }) {
5
  const [message, setMessage] = useState('');
6

7
  async function send() {
8
    if (!navigator.onLine) {
9
      setMessage('Bağlantı yok, havale gönderilmedi. Bağlanınca yeniden dene.');
10
      return;
11
    }
12
    await sendTransfer(form); // carries an idempotency key
13
    setMessage('Havale gönderildi.');
14
  }
15

16
  return (
17
    <>
18
      <button type="button" onClick={send}>Gönder</button>
19
      <p role="status">{message}</p>
20
    </>
21
  );
22
}