สร้างแอพที่ทำงานแบบออฟไลน์

Feb 4, 2026

วิธีการ

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

ดาวน์โหลดรหัสจาก Filesilo

01. เซิร์ฟเวอร์ HTTPS

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

อย่างไรก็ตามเพื่อการพัฒนาเราสามารถทำงานได้โดยไม่มี HTTPS ตั้งแต่ http: // localhost / ได้รับอนุญาตให้เป็นข้อยกเว้นสำหรับกฎนี้ วิธีที่ง่ายที่สุดในการเริ่มต้นคือกับ NPM http-server แพคเกจ

 NPM ติดตั้ง http-server -g
http-server -p 8000 -C-1

02. ตั้งค่าหน้าพื้นฐาน

ตอนนี้ไม่มีอะไรบนเซิร์ฟเวอร์ดังนั้นเรามาสร้างหน้าพื้นฐานเพื่อให้บริการ เราจะสร้างไฟล์ index.html ใหม่และเมื่อเราเรียกใช้เซิร์ฟเวอร์มันจะสามารถเข้าถึงได้ที่ http: // localhost: 8000 .

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

 & lt;! Doctype HTML & GT;
& lt; html & gt;
  & lt; หัว & gt;
  & lt; Meta Charset = "UTF-8" / & GT;
  & lt; ชื่อ & gt; พนักงานบริการ & lt; / ชื่อ & gt;
  & lt; script src = "site.js" & gt; & lt; / script & gt;
  & lt; link rel = "stylesheet" type = "text / css" href = "custom.css" & gt;
  & lt; / head & gt;
  & lt; ร่างกาย & gt;
  & lt; ส่วนหัว & gt;
  & lt; h1 & gt; ยินดีต้อนรับ & lt; / h1 & gt;
  & lt; / ส่วนหัว & gt;
  & lt; div id = "เนื้อหา" & gt;
  & lt; p & gt; เนื้อหาที่นี่ & lt; / p & gt;
  & lt; img src = "kitty.jpg" width = "100%" & gt;
  & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;

03. ลงทะเบียนพนักงานบริการ

ตอนนี้เราได้รับหน้าการทำงานที่ไม่มีที่รู้จักค่อนข้างน้อยและถึงเวลาที่จะเริ่มคิดเกี่ยวกับการใช้งานพนักงานบริการ ก่อนที่เราจะทำการเข้ารหัสมันคุ้มค่าที่จะใช้เวลาสักครู่เพื่อทำความเข้าใจกับวงจรชีวิตของพนักงานบริการ

กระบวนการเริ่มต้นด้วย 'การลงทะเบียน' ของพนักงานบริการใน JavaScript ของคุณซึ่งบอกเบราว์เซอร์เริ่มติดตั้งผู้ปฏิบัติงาน - ขั้นตอนแรกของวงจรชีวิตของมัน ตลอดวงจรชีวิตของมันพนักงานบริการจะอยู่ในสถานะต่อไปนี้:

การติดตั้ง: เมื่อลงทะเบียนพนักงานบริการแล้วการติดตั้งมักใช้ในการดาวน์โหลดและแคชเนื้อหาคงที่
ติดตั้ง: คนงานพร้อมใช้งานในทางทฤษฎี แต่ไม่เปิดใช้งานทันที
เปิดใช้งาน: พนักงานบริการที่ติดตั้งจะเปิดใช้งานตัวเองหากไม่มีพนักงานบริการที่มีอยู่หรือเงื่อนไขบางประการนำไปสู่การหมดอายุ โดยทั่วไปการเปิดใช้งานจะใช้เพื่อล้างไฟล์เก่าจากเนื้อหาออฟไลน์แคช
เปิดใช้งาน: พนักงานบริการตอนนี้มีการควบคุมเอกสารและสามารถจัดการคำขอได้
ซ้ำซ้อน: หากพนักงานบริการล้มเหลวในการติดตั้งหรือเปิดใช้งานหรือหากถูกแทนที่ด้วยพนักงานบริการรุ่นใหม่

04. ตรวจสอบว่าคุณลงทะเบียนแล้ว

มาลงทะเบียนพนักงานบริการกันเถอะ สิ่งนี้ชี้ให้เห็นเบราว์เซอร์อย่างมีประสิทธิภาพกับไฟล์ JavaScript ซึ่งกำหนดพฤติกรรมของผู้ปฏิบัติงานบริการ การลงทะเบียนเสร็จสิ้นโดยใช้วัตถุ ServiceWorker ซึ่งเป็นจุดเข้าสู่ API นอกจากนี้เรายังตรวจสอบ API ที่นำเสนอในเบราว์เซอร์ก่อนที่จะพยายามทำเช่นนั้น

ที่ ลงทะเบียน () ฟังก์ชั่นสามารถเรียกได้อย่างปลอดภัยทุกครั้งที่โหลดหน้าเว็บและเบราว์เซอร์จะพิจารณาว่าพนักงานบริการได้รับการลงทะเบียนแล้วหรือไม่

 ถ้า ('ServiceWorker' ใน Navigator) {
  window.addeventristener ('โหลด', ฟังก์ชั่น () {
  navigator.serviceworker.register ('serviceworker.js', {ขอบเขต: './'' )).then(Function(registration) {
  Console.log ("พนักงานบริการที่ลงทะเบียนสำเร็จ");
  }, ฟังก์ชั่น (ข้อผิดพลาด) {
  console.log ("ข้อผิดพลาดการลงทะเบียนพนักงานบริการ:" + ข้อผิดพลาด);
  });
  });
}

05. ใช้งานพนักงานบริการ

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

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

 var currentcache = 'demo-cache';
Self.addEventListener ('ติดตั้ง' เหตุการณ์ = & GT; {
  event.waituntil (
  caches.open (currentcache). จากนั้น (ฟังก์ชั่น (แคช) {
  console.log ("การเพิ่มเนื้อหาลงในแคช");
  ส่งคืน cache.addall ([
  './index_offline.html'
  './kitty_offline.jpg'
  './custom.css'
  ]);
  })
  );
});

06. การดึงข้อมูลเหตุการณ์

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

มันคุ้มค่า ณ จุดนี้สังเกตว่าเรามีการพึ่งพา JavaScript อย่างหนักเพื่อทำงาน สิ่งเหล่านี้อาจเป็นเรื่องยากเล็กน้อยดังนั้นควรทำความคุ้นเคยกับถ้าคุณไม่ได้ใช้มาก่อน

 Self.addEventListener ('Fetch', Event = & GT; {
  event.rondnith (
  caches.match (event.request) จากนั้น (ตอบสนอง = & gt; {
  กลับมาตอบกลับ || ดึงข้อมูล (event.request);
  })
   );
    });

07. ขยายเหตุการณ์ Fetch

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

เพื่อให้บรรลุเป้าหมายนี้เราสามารถขยายของเรา ดึง การตอบสนองกิจกรรมเพิ่มเติมเพื่อตรวจสอบการร้องขอการนำทางโดยเฉพาะและตอบกลับด้วยหน้าออฟไลน์ที่แตกต่างกันเมื่อตรวจพบ นี้ index_offline.html ไฟล์สามารถเป็นรูปแบบของหน้าออนไลน์ของคุณหรือสิ่งที่แตกต่างอย่างสิ้นเชิงและยังสามารถใช้ทรัพยากรอื่น ๆ ที่คุณแคชเช่น custom.css .

 Self.addEventListener ('Fetch', Event = & GT; {
  ถ้า (event.request.mode === 'นำทาง') {
  event.rondnith (
  ดึงข้อมูล (event.request). catch (ข้อผิดพลาด = & gt; {
  Console.log ("ไม่พร้อมใช้งานหน้าเนื้อหาออฟไลน์กลับมา");
  ส่งคืน caches.match ('./ index_offline.html');
  })
  );
  } อื่น {
  event.rondnith (
  caches.match (event.request) จากนั้น (ตอบสนอง = & gt; {
  กลับมาตอบกลับ || ดึงข้อมูล (event.request);
  })
  );
  }
});

08. ลบแคช

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

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

 this.addeventlistener ('เปิดใช้งาน', เหตุการณ์ = & gt; {
  var activeces = [currentcache];
  เปิดใช้งาน Console.log ("พนักงานบริการตรวจสอบการตรวจสอบแคชเป็นปัจจุบัน");
  event.waituntil (
  caches.keys () จากนั้น (keylist = & gt; {
  ส่งคืนสัญญาทั้งหมด (keylist.map (ปุ่ม = & GT; {
  ถ้า (activecaches.indexof (key) === -1) {
  Console.log ("การลบแคชเก่า" + คีย์);
  ส่งคืน caches.delete (ปุ่ม);
  }
  }));
  })
  );
});

บทความนี้ถูกตีพิมพ์ในนิตยสาร Web Designer ฉบับที่ 268 สมัครสมาชิกตอนนี้

อ่านเพิ่มเติม:

คู่มือของ Coder สำหรับ APIs
เริ่มต้นกับ WebGL โดยใช้ Three.js
12 แนวโน้มการออกแบบเว็บไซต์ขนาดใหญ่สำหรับปี 2018

สร้างแอพที่ทำงานแบบออฟไลน์

01. เซิร์ฟเวอร์ HTTPS

02. ตั้งค่าหน้าพื้นฐาน

03. ลงทะเบียนพนักงานบริการ

04. ตรวจสอบว่าคุณลงทะเบียนแล้ว

05. ใช้งานพนักงานบริการ

06. การดึงข้อมูลเหตุการณ์

07. ขยายเหตุการณ์ Fetch

08. ลบแคช

วิธีการ - บทความยอดนิยม

วิธีการวาดหัว: คู่มือฉบับสมบูรณ์

ทาสีกระต่ายซุกซนในสีน้ำ

วิธีการสร้างเลย์เอาต์ที่ซับซ้อนโดยใช้ CSS

สร้างภูมิทัศน์ที่น่าทึ่งใน Houdini

เตรียมงานของคุณสำหรับการพิมพ์ 3 มิติ: 8 เคล็ดลับยอดนิยม

สร้างมุมมองโดยการแปรปรวนพื้นผิวของคุณใน Photoshop

10 Top Houdini Tutorials

สำรวจรหัสความคิดสร้างสรรค์ด้วย P5.js

หมวดหมู่