HTML Academy · Pelajaran

Halaman Fallback Luring

Sajikan halaman fallback yang tersimpan di cache saat pengguna luring.

Pelajaran 4 dari 414 langkah

Halaman Fallback Luring adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Mengapa Halaman Luring?

Saat jaringan tidak tersedia, pekerja layanan dapat menyajikan halaman cadangan luring khusus alih-alih galat umum "tidak ada internet" dari peramban. Pengguna akan melihat merek, informasi yang berguna, dan konten yang tersimpan di cache — jauh lebih baik daripada dinosaurus Chromium atau tab sedih Firefox.

Menyimpan Halaman Cadangan dalam Cache

Dalam peristiwa pemasangan pekerja layanan, simpan halaman offline.html terlebih dahulu dalam cache agar selalu tersedia, bahkan sebelum pengguna membuka halaman apa pun saat luring. Peramban memastikan cache tetap ada hingga terjadi perubahan berikutnya pada sw.js.

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

Menyajikan Saat Gagal

Dalam peristiwa pengambilan, coba jaringan terlebih dahulu; jika gagal, kembalikan offline.html yang tersimpan di cache. Pola ini (jaringan terlebih dahulu dengan cadangan luring) adalah resep PWA paling sederhana dan berfungsi untuk sebagian besar situs konten.

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

Memeriksa Mode Navigasi

Gunakan cadangan offline.html hanya untuk permintaan navigasi (pemuatan halaman tingkat atas). Untuk gambar, skrip, dan pengambilan sumber daya turunan lainnya, biarkan gagal atau gunakan salinan cache masing-masing — menyajikan halaman HTML sebagai pengganti gambar yang hilang justru lebih merusak tampilan halaman.

Merancang Halaman Luring

Buat halaman luring tetap ringan: gunakan CSS minimal dan jangan gunakan aset eksternal kecuali aset tersebut juga tersimpan di cache. Tampilkan logo merek, pesan yang ramah ("Anda sedang luring — konten akan dimuat saat Anda tersambung kembali"), serta tombol Coba Lagi yang memanggil location.reload().

<!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>

Menyimpan Halaman yang Dikunjungi dalam Cache

Selain satu halaman luring, simpan halaman yang berhasil dimuat menggunakan strategi penyajian data lama sambil memperbarui atau cache saat berjalan. Saat kembali ke artikel yang baru dilihat tanpa jaringan, kontennya tetap ditampilkan; hanya halaman yang belum pernah dibuka yang gagal dimuat.

Memperbarui Versi Cache

Saat memperbarui offline.html, ubah konstanta CACHE dalam sw.js (CACHE = "v2"). Dalam peristiwa aktivasi, hapus cache lama: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). Halaman luring yang sudah usang membingungkan.

Menguji Mode Luring

Panel Network di Chrome DevTools → pelambatan "Luring" mensimulasikan ketiadaan jaringan. Buka beberapa halaman di aplikasi Anda; pastikan halaman luring muncul untuk rute yang belum pernah dibuka dan halaman yang sebelumnya dikunjungi tetap dimuat dari cache.

Kegagalan Sumber Daya Turunan

Jika halaman luring itu sendiri merujuk ke file CSS yang belum tersimpan di cache, file tersebut gagal dimuat saat luring dan halaman tampil tanpa gaya. Simpan terlebih dahulu setiap aset yang diperlukan halaman luring (CSS, logo, font) dalam penangan pemasangan.

Melampaui Mode Luring Statis

PWA tingkat lanjut mengantrekan tindakan pengguna saat luring menggunakan Sinkronisasi Latar Belakang, mengulanginya saat koneksi kembali, dan menampilkan antarmuka optimistis untuk sementara. Pustaka Workbox menyediakan pola untuk kebutuhan ini; membuatnya sendiri juga memungkinkan, tetapi membutuhkan lebih banyak pekerjaan.

Pemulihan Koneksi

Dengarkan peristiwa koneksi aktif pada halaman luring untuk mendeteksi penyambungan kembali: window.addEventListener("online", () => location.reload()). Halaman akan memuat ulang dirinya segera setelah koneksi kembali — tanpa pengguna perlu mengetuk Coba Lagi.

Jangan Menyesatkan Pengguna

Tombol "Coba lagi" harus benar-benar mencoba ulang — panggil location.reload(), bukan indikator pemuatan palsu yang tidak melakukan apa-apa. Antarmuka yang jujur mempertahankan kepercayaan pengguna; halaman luring yang menyesatkan dengan cepat merusak kredibilitas saat pengguna menyadarinya.

Uji Pemahaman

Mengapa cadangan offline.html hanya boleh dikembalikan untuk permintaan navigasi (e.request.mode === "navigate") dan bukan untuk semua permintaan yang gagal?

Jawab di pelajaran interaktif

Ringkasan

Pekerja layanan dapat menyajikan halaman cadangan luring khusus alih-alih galat umum dari peramban. Simpan offline.html terlebih dahulu saat pemasangan, lalu sajikan saat pengambilan gagal karena jaringan dan permintaannya merupakan navigasi. Buat halaman tetap mandiri, gunakan versi cache untuk pembaruan, dan dengarkan peristiwa koneksi aktif agar dapat memuat ulang otomatis. Uji menggunakan pelambatan luring di DevTools.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 40
Pelajaran: 159

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Halaman Fallback Luring” gratis?

Ya — teks lengkap “Halaman Fallback Luring” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Halaman Fallback Luring”?

Sajikan halaman fallback yang tersimpan di cache saat pengguna luring. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Halaman Fallback Luring” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy