HTML Academy · บทเรียน

หน้าสำรองแบบออฟไลน์

ให้บริการหน้าสำรองที่แคชไว้เมื่อผู้ใช้ออฟไลน์

หน้าสำรองแบบออฟไลน์ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องมีหน้าออฟไลน์

เมื่อเครือข่ายไม่พร้อมใช้งาน เซอร์วิสเวิร์กเกอร์สามารถแสดงหน้าสำรองออฟไลน์ที่กำหนดเองแทนข้อผิดพลาดทั่วไป "ไม่มีอินเทอร์เน็ต" ของเบราว์เซอร์ได้ ผู้ใช้จะเห็นแบรนด์ ข้อมูลที่เป็นประโยชน์ และเนื้อหาที่แคชไว้ — ดีกว่าไดโนเสาร์ของ Chromium หรือแท็บเศร้าของ Firefox มาก

การแคชหน้าสำรอง

ในเหตุการณ์ติดตั้งของเซอร์วิสเวิร์กเกอร์ ให้แคชหน้า offline.html ไว้ล่วงหน้าเพื่อให้พร้อมใช้งานเสมอ แม้ผู้ใช้ยังไม่เคยไปที่ใดขณะออฟไลน์ เบราว์เซอร์จะทำให้แคชคงอยู่จนกว่าจะมีการเปลี่ยนแปลง sw.js ครั้งถัดไป

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

การให้บริการเมื่อเกิดข้อผิดพลาด

ในเหตุการณ์ fetch ให้ลองเครือข่ายก่อน หากล้มเหลว ให้ส่งคืน offline.html ที่แคชไว้ รูปแบบนี้ (เครือข่ายเป็นอันดับแรกพร้อมหน้าสำรองออฟไลน์) เป็นแนวทาง PWA ที่ง่ายที่สุดและใช้ได้กับเว็บไซต์เนื้อหาส่วนใหญ่

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

การตรวจสอบโหมดการนำทาง

ให้ใช้หน้าสำรอง offline.html เฉพาะกับคำขอการนำทาง (การโหลดหน้าระดับบนสุด) เท่านั้น สำหรับการดึงข้อมูลทรัพยากรย่อย เช่น รูปภาพและสคริปต์ ให้ปล่อยให้ล้มเหลวหรือใช้สำเนาที่แคชไว้ของทรัพยากรนั้นๆ แทน — การส่งหน้า HTML ไปแทนรูปภาพที่หายไปจะทำให้หน้าเสียหายยิ่งกว่าเดิม

การออกแบบหน้าออฟไลน์

ทำหน้าออฟไลน์ให้มีขนาดเล็กและโหลดเร็ว: ใช้ CSS ให้น้อยที่สุด และอย่าใช้ทรัพยากรภายนอก เว้นแต่ทรัพยากรเหล่านั้นจะถูกแคชไว้ด้วย แสดงโลโก้แบรนด์ ข้อความที่เป็นมิตร ("คุณออฟไลน์อยู่ — เนื้อหาจะโหลดเมื่อเชื่อมต่ออีกครั้ง") และปุ่มลองอีกครั้งที่เรียกใช้ 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>

การแคชหน้าที่เข้าชม

นอกเหนือจากหน้าออฟไลน์เพียงหน้าเดียวแล้ว ให้แคชหน้าที่โหลดสำเร็จด้วยกลยุทธ์แสดงข้อมูลเก่าพร้อมปรับปรุงใหม่ หรือกลยุทธ์แคชขณะทำงาน เมื่อผู้ใช้กลับไปยังบทความที่เพิ่งดูโดยไม่มีเครือข่าย ก็ยังเห็นเนื้อหาได้ จะล้มเหลวเฉพาะหน้าที่ยังไม่เคยเข้าชมเท่านั้น

การอัปเดตเวอร์ชันแคช

เมื่อคุณอัปเดตหน้า offline.html ให้เปลี่ยนค่าคงที่ CACHE ใน sw.js (CACHE = "v2") ในเหตุการณ์ activate ให้ลบแคชเก่า: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))) หน้าออฟไลน์เก่าทำให้สับสน

การทดสอบโหมดออฟไลน์

แผงเครือข่ายของ Chrome DevTools → การจำลองความเร็ว "ออฟไลน์" จะจำลองการไม่มีเครือข่าย ลองไปยังส่วนต่างๆ ของแอป ตรวจสอบว่าหน้าออฟไลน์ปรากฏสำหรับเส้นทางที่ไม่เคยเข้าชม และหน้าที่เคยเข้าชมก่อนหน้านี้ยังโหลดจากแคชได้

ข้อผิดพลาดของทรัพยากรย่อย

หากหน้าออฟไลน์อ้างอิงไฟล์ CSS ที่ไม่ได้แคช ไฟล์นั้นจะโหลดไม่สำเร็จเมื่อออฟไลน์ และหน้าจะแสดงผลโดยไม่มีรูปแบบ โปรดแคชล่วงหน้าสำหรับทรัพยากรทุกอย่างที่หน้าออฟไลน์ต้องใช้ (CSS โลโก้ แบบอักษร) ในตัวจัดการเหตุการณ์ติดตั้ง

ก้าวไปไกลกว่าหน้าออฟไลน์แบบคงที่

PWA ขั้นสูงจะจัดคิวการกระทำของผู้ใช้ขณะออฟไลน์ด้วยการซิงค์เบื้องหลัง แล้วลองทำซ้ำเมื่อการเชื่อมต่อกลับมา และแสดงส่วนติดต่อผู้ใช้แบบคาดการณ์ผลระหว่างนั้น ไลบรารีเวิร์กบ็อกซ์มีแนวทางสำเร็จรูปสำหรับรูปแบบเหล่านี้ การสร้างขึ้นเองก็ทำได้ แต่ต้องใช้ความพยายามมากกว่า

การคืนสู่การเชื่อมต่อ

รับฟังเหตุการณ์การออนไลน์ในหน้าออฟไลน์เพื่อตรวจจับการเชื่อมต่อกลับมา: window.addEventListener("online", () => location.reload()) หน้าเว็บจะโหลดตัวเองใหม่ทันทีที่การเชื่อมต่อกลับมา โดยผู้ใช้ไม่ต้องแตะปุ่มลองอีกครั้ง

อย่าหลอกผู้ใช้

ปุ่ม "ลองอีกครั้ง" ควรลองใหม่จริงๆ — เรียกใช้ location.reload() ไม่ใช่แสดงตัวหมุนหลอกๆ ที่ไม่ทำอะไร ส่วนติดต่อผู้ใช้ที่ซื่อสัตย์จะรักษาความไว้วางใจของผู้ใช้ไว้ ส่วนหน้าออฟไลน์ที่หลอกลวงจะทำลายความน่าเชื่อถืออย่างรวดเร็วเมื่อผู้ใช้สังเกตเห็น

ตรวจสอบความรู้

เหตุใดจึงควรส่งคืนหน้า offline.html สำรองเฉพาะคำขอการนำทาง (e.request.mode === "navigate") และไม่ใช่คำขอที่ล้มเหลวทั้งหมด

สรุป

เซอร์วิสเวิร์กเกอร์สามารถแสดงหน้าสำรองออฟไลน์ที่กำหนดเองแทนข้อผิดพลาดทั่วไปของเบราว์เซอร์ได้ แคช offline.html ล่วงหน้าในการติดตั้ง แล้วแสดงใน fetch เมื่อเครือข่ายล้มเหลวและคำขอเป็นการนำทาง ทำให้หน้าเป็นแบบครบในตัวเอง จัดเวอร์ชันแคชสำหรับการอัปเดต รับฟังเหตุการณ์การออนไลน์เพื่อโหลดใหม่โดยอัตโนมัติ ทดสอบด้วยการจำลองออฟไลน์ของ DevTools

คำถามที่พบบ่อย

บทเรียน “หน้าสำรองแบบออฟไลน์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “หน้าสำรองแบบออฟไลน์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “หน้าสำรองแบบออฟไลน์”

ให้บริการหน้าสำรองที่แคชไว้เมื่อผู้ใช้ออฟไลน์ คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “หน้าสำรองแบบออฟไลน์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy