เนื้อหาและข้อมูล

Progressive Web App เป็นเว็บไซต์ ซึ่งเนื้อหาทั้งหมดจะเหมือนกับบนเว็บ แต่มีเครื่องมือใหม่ที่ช่วยให้โหลดเนื้อหาเหล่านั้นได้รวดเร็วเมื่อออนไลน์และพร้อมใช้งานเมื่อออฟไลน์

คอมโพเนนต์ของแอป

การพัฒนาแอปพลิเคชันมักจะเกี่ยวข้องกับเนื้อหาและทรัพยากรหลายอย่าง ตั้งแต่ตรรกะและโค้ด (คอมไพล์หรือไม่) ไปจนถึงองค์ประกอบของอินเทอร์เฟซผู้ใช้ เช่น การออกแบบหน้าจอ รูปภาพ โลโก้ และแบบอักษร

Progressive Web App เป็นเว็บไซต์ ดังนั้นเนื้อหาทั้งหมดจึงเหมือนกับบนเว็บ

  • HTML สำหรับเนื้อหาและการแสดงผลหน้าเริ่มต้น
  • JavaScript สำหรับตรรกะ รวมถึงความสามารถในการเรียกใช้โมดูล WebAssembly (โค้ดที่คอมไพล์) และแสดงผลกราฟิกที่เพิ่มประสิทธิภาพด้วยฮาร์ดแวร์ 2 มิติและ 3 มิติ
  • CSS สำหรับการออกแบบ การจัดรูปแบบ และภาพเคลื่อนไหว
  • รูปภาพในรูปแบบเว็บ เช่น PNG, JPEG, WebP และ SVG
  • วิดีโอในรูปแบบเว็บ เช่น MPEG-4 และ WebM
  • แบบอักษรสำหรับเว็บ
  • ข้อมูลใน JSON หรือรูปแบบอื่นๆ

โดยค่าเริ่มต้น เว็บไซต์จะดาวน์โหลดเนื้อหาผ่านเครือข่าย เริ่มต้นด้วย HTML และเลือกทรัพยากรที่เหลือต่อ

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

แอปเฉพาะแพลตฟอร์มเทียบกับ PWA

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

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

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

แคชและพื้นที่เก็บข้อมูล

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

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

  • พื้นที่เก็บข้อมูลในเว็บ: รวม localStorage และ sessionStorage API เหล่านี้จะจัดเก็บคู่คีย์/ค่าสตริงแบบง่าย พื้นที่เก็บข้อมูลบนเว็บมีจำกัด และมี API แบบซิงโครนัส คุณจึงควรหลีกเลี่ยงหากเป็นไปได้
  • IndexedDB: ฐานข้อมูลตามออบเจ็กต์ (No-SQL) ที่มี API แบบไม่พร้อมกันซึ่งเหมาะกับประสิทธิภาพการทำงานของเว็บ IndexedDB จัดเก็บข้อมูลที่มีโครงสร้างและไบนารีฝั่งไคลเอ็นต์ได้ โดยทั่วไปแล้วจะเป็นสิ่งที่คุณจะใช้จัดเก็บข้อมูล เช่น สิ่งที่คุณได้จากหรือส่งเป็นคำขอ API การบันทึกข้อมูลไว้ในเครื่องทันทีและซิงค์ข้อมูลกับเซิร์ฟเวอร์ในภายหลังก็มีประโยชน์เช่นกัน IndexedDB API ใช้เพื่อโต้ตอบกับฐานข้อมูล
  • พื้นที่เก็บข้อมูลแคช: คอลเล็กชันของคู่คำขอ HTTP และคำตอบที่คุณสามารถใช้เพื่อจัดเก็บและเรียกทรัพยากรด้วยส่วนหัว HTTP เหมือนกับที่ส่งจากเซิร์ฟเวอร์ Cache Storage API ช่วยให้คุณจัดเก็บ เรียก อัปเดต และลบคำขอของเครือข่าย เช่น สำหรับเนื้อหาแม้ในขณะออฟไลน์

ความต้องการสำหรับ Service Worker

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

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

พร้อมใช้งานแบบออฟไลน์

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

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

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

วิธีที่ใช้แคชที่ใช้บ่อย

ใน PWA คุณเป็นผู้รับผิดชอบการตัดสินใจทั้งหมด คุณเลือกวิธีที่ดีที่สุดในการแคชหรือติดตั้งเนื้อหาได้ตามความต้องการ คุณควรตัดสินใจดังนี้

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

กำลังอัปเดตเนื้อหา

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

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

ขนาดและอายุการใช้งาน

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

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

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

แหล่งข้อมูล