HTML Academy · Ders

Çevrim Dışı Yedek Sayfa

Kullanıcı çevrim dışıyken önbelleğe alınmış bir yedek sayfa sunun

Çevrim Dışı Yedek Sayfa, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Neden Çevrimdışı Sayfa?

Ağ kullanılamadığında bir hizmet çalışanı, tarayıcının genel "internet yok" hatası yerine özel bir çevrimdışı yedek sayfa sunabilir. Kullanıcı markayı, yararlı bilgileri ve önbelleğe alınmış içerikleri görür; bu, Chromium'un dinozorundan veya Firefox'un üzgün sekmesinden çok daha iyidir.

Yedeği Önbelleğe Alma

Hizmet çalışanının kurulum olayında offline.html sayfasını önbelleğe alın; böylece kullanıcı çevrimdışıyken herhangi bir yere gitmeden önce bile sayfa her zaman kullanılabilir. Tarayıcı, önbelleğin bir sonraki sw.js değişikliğine kadar korunmasını sağlar.

const CACHE = "v1";
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
  );
});

Hata Durumunda Sunma

Getirme olayında önce ağı deneyin; hata durumunda önbelleğe alınmış offline.html sayfasını döndürün. Bu model (önce ağ, çevrimdışı yedek) en basit PWA tarifidir ve çoğu içerik sitesi için çalışır.

self.addEventListener("fetch", (e) => {
  if (e.request.mode !== "navigate") return;
  e.respondWith(
    fetch(e.request).catch(() => caches.match("/offline.html"))
  );
});

Gezinme Modunu Denetleme

Yalnızca gezinme isteklerinde (üst düzey sayfa yüklemelerinde) offline.html sayfasına dönün. Görseller, betikler ve diğer alt kaynak getirmelerinde bunların hata vermesine veya kaynak başına önbelleğe alınmış kopyalara dönülmesine izin verin; eksik bir görselin yerine HTML sayfası sunmak sayfayı daha da bozar.

Çevrimdışı Sayfayı Tasarlama

Çevrimdışı sayfayı yalın tutun: en az düzeyde CSS kullanın ve bunlar da önbelleğe alınmadıkça harici varlıklar eklemeyin. Marka logosunu, samimi bir mesajı ("Çevrimdışısınız — yeniden bağlandığınızda içerik yüklenecek") ve location.reload() çağıran bir Yeniden Dene düğmesini gösterin.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
  <h1>You&apos;re offline</h1>
  <p>This page is unavailable without an internet connection.</p>
  <button onclick="location.reload()">Try again</button>
</body>
</html>

Ziyaret Edilen Sayfaları Önbelleğe Alma

Tek bir çevrimdışı sayfanın ötesine geçerek başarıyla yüklenen sayfaları bayatken-yeniden-doğrula veya çalışma zamanı önbellekleme stratejisiyle önbelleğe alın. Ağa bağlı olmadan yakın zamanda görüntülenen bir makaleye dönüldüğünde içerik yine gösterilir; yalnızca daha önce görülmemiş sayfalar başarısız olur.

Önbellek Sürümlerini Güncelleme

offline.html dosyasını güncellediğinizde sw.js içindeki CACHE sabitini değiştirin (CACHE = "v2"). Etkinleştirme olayında eski önbellekleri silin: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). Eski çevrimdışı sayfalar kafa karıştırıcıdır.

Çevrimdışını Sınama

Chrome DevTools Ağ panelindeki → "Çevrimdışı" yavaşlatma seçeneği ağ bağlantısı yokmuş gibi davranır. Uygulamanızda dolaşın; daha önce görülmemiş rotalarda çevrimdışı sayfanın göründüğünü ve daha önce ziyaret edilen sayfaların hâlâ önbellekten yüklendiğini doğrulayın.

Alt Kaynakların Hata Vermesi

Çevrimdışı sayfanın kendisi önbelleğe alınmamış bir CSS dosyasına başvuruyorsa bu dosya çevrimdışıyken yüklenemez ve sayfa stiller olmadan görüntülenir. Kurulum işleyicisinde çevrimdışı sayfanın ihtiyaç duyduğu her varlığı (CSS, logo, yazı tipleri) önbelleğe alın.

Statik Çevrimdışının Ötesi

Gelişmiş PWA'lar, Arka Plan Eşzamanlaması kullanarak kullanıcı eylemlerini çevrimdışıyken kuyruğa alır, bağlantı geri geldiğinde yeniden dener ve bu sırada iyimser kullanıcı arayüzü gösterir. Workbox kitaplığı bu modeller için hazır tarifler sunar; kendi çözümünüzü yazmanız da mümkündür, ancak daha fazla çalışma gerektirir.

Bağlantının Geri Gelmesi

Yeniden bağlanmayı algılamak için çevrimdışı sayfada çevrimiçi olayını dinleyin: window.addEventListener("online", () => location.reload()). Bağlantı geri gelir gelmez sayfa kendini yeniden yükler; kullanıcının Yeniden Dene düğmesine dokunması gerekmez.

Dikkatli Bir Şekilde Doğruyu Söyleyin

"Yeniden deneyin" düğmeleri gerçekten yeniden denemelidir; hiçbir şey yapmayan sahte bir döndürücü yerine location.reload() çağırın. Dürüst kullanıcı arayüzü kullanıcı güvenini korur; aldatıcı çevrimdışı sayfalar fark edildiklerinde güvenilirliğe hızla zarar verir.

Bilginizi Sınayın

Çevrimdışı yedek neden yalnızca gezinme isteklerinde (e.request.mode === "navigate") döndürülmeli, başarısız olan tüm isteklerde döndürülmemelidir?

Özet

Hizmet çalışanları, tarayıcının genel hatası yerine özel bir çevrimdışı yedek sayfa sunabilir. Kurulum sırasında offline.html dosyasını önbelleğe alın; ağ başarısız olduğunda ve istek bir gezinme isteği olduğunda getirme işleminde bu sayfayı sunun. Sayfayı kendi kendine yeterli tutun, güncellemeler için önbelleği sürümleyin ve otomatik yeniden yükleme için çevrimiçi olayını dinleyin. DevTools çevrimdışı yavaşlatmasıyla sınayın.

Sıkça Sorulan Sorular

“Çevrim Dışı Yedek Sayfa” dersi ücretsiz mi?

Evet — “Çevrim Dışı Yedek Sayfa” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Çevrim Dışı Yedek Sayfa” dersinde ne öğreneceğim?

Kullanıcı çevrim dışıyken önbelleğe alınmış bir yedek sayfa sunun HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Çevrim Dışı Yedek Sayfa” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön