หลักสูตรที่ลงรายละเอียดเกี่ยวกับการพัฒนา Progressive Web App สมัยใหม่ทุกด้าน
หลักสูตรนี้ครอบคลุมพื้นฐานการพัฒนา Progressive Web App ด้วยส่วนต่างๆ ที่เข้าใจง่าย ในโมดูลต่อไปนี้ คุณจะได้เรียนรู้ว่า Progressive Web App คืออะไร วิธีสร้างหรืออัปเกรดเนื้อหาเว็บที่มีอยู่ และวิธีเพิ่มชิ้นส่วนทั้งหมดสำหรับแอปแบบออฟไลน์ที่ติดตั้งได้ ใช้แผงเมนูเพื่อไปยังโมดูลต่างๆ (เมนูอยู่ทางซ้ายบนเดสก์ท็อปหรือด้านหลังเมนูแฮมเบอร์เกอร์บนอุปกรณ์เคลื่อนที่)
คุณจะได้เรียนรู้ข้อมูลพื้นฐานของ PWA เช่น ไฟล์ Manifest ของเว็บแอป, โปรแกรมทำงานของบริการ, วิธีออกแบบโดยคำนึงถึงแอป เป็นหลัก วิธีใช้เครื่องมืออื่นๆ เพื่อทดสอบและแก้ไขข้อบกพร่องของ PWA หลังจากพื้นฐานเหล่านี้ คุณจะได้เรียนรู้เกี่ยวกับการผสานรวมกับแพลตฟอร์มและระบบปฏิบัติการ, วิธีปรับปรุงการติดตั้งและประสบการณ์การใช้งานของ PWA และวิธีนำเสนอประสบการณ์การใช้งานแบบออฟไลน์
แต่ละโมดูลจะมีการสาธิตแบบอินเทอร์แอกทีฟและการประเมินตนเองไว้ให้คุณทดสอบความรู้ คุณจะสามารถทดสอบและลองใช้เดโมได้ในโทรศัพท์มือถือ แท็บเล็ต หรือแล็ปท็อป ขณะเล่นกับโค้ดเพื่อทำความเข้าใจพื้นฐานของสิ่งที่เป็น Progressive Web App
หลักสูตรนี้สร้างขึ้นสำหรับนักพัฒนาซอฟต์แวร์เว็บระดับเริ่มต้นและขั้นสูง คุณจะดูในซีรีส์นี้ตั้งแต่ต้นจนจบเพื่อให้เข้าใจโดยทั่วไปเกี่ยวกับ PWA จากบนลงล่างได้ หรือจะใช้เป็นข้อมูลอ้างอิงสำหรับบางวิชาก็ได้ สำหรับผู้ที่เพิ่งเริ่มใช้การพัฒนาเว็บ คุณจะต้องมี HTML, CSS และ JavaScript ควบคู่ไปด้วย โปรดดูเรียนรู้ CSS และหลักสูตร HTML และ JavaScript เกี่ยวกับ MDN
สิ่งที่คุณจะได้เรียนรู้มีดังนี้
เริ่มต้นใช้งาน
หากต้องการสร้าง Progressive Web App คุณอาจสงสัยว่าต้องเริ่มต้นจากจุดไหน การอัปเกรดเว็บไซต์เป็น PWA โดยไม่ต้องเริ่มใหม่ตั้งแต่ต้นได้หรือไม่ หรือวิธีการย้ายจากแอปเฉพาะแพลตฟอร์มไปเป็น PWA บทความนี้จะช่วยคุณตอบคำถามเหล่านี้
พื้นฐาน
Progressive Web App ทั้งหมดเป็นเว็บไซต์หลักที่ทันสมัย คุณจึงต้องมีรากฐานที่มั่นคงในด้านการออกแบบที่ตอบสนองตามอุปกรณ์ อุปกรณ์เคลื่อนที่ และทุกสิ่งทุกอย่างเป็นอันดับแรก คือการออกแบบที่แท้จริง และประสิทธิภาพของเว็บไซต์
การออกแบบแอป
ความแตกต่างสำคัญอย่างหนึ่งระหว่าง Progressive Web App กับเว็บไซต์แบบคลาสสิกและเว็บแอปคือความสามารถในการติดตั้ง ซึ่งจะสร้างประสบการณ์การใช้งานแบบสแตนด์อโลนที่ผสานรวมกับแพลตฟอร์มและระบบปฏิบัติการมากขึ้น การติดตั้งทำให้เกิดความยืดหยุ่นและความรับผิดชอบใหม่ เนื่องจากเราจะไม่มีส่วนรวมอินเทอร์เฟซผู้ใช้ของเบราว์เซอร์สำหรับเนื้อหาของเรา
เนื้อหาและข้อมูล
Progressive Web App คือเว็บไซต์ โดยเนื้อหาทั้งหมดจะเหมือนกับบนเว็บ แต่มีเครื่องมือใหม่ที่ช่วยให้โหลดเนื้อหาเหล่านั้นได้รวดเร็วเมื่อออนไลน์และพร้อมใช้งานเมื่อออฟไลน์
Service Worker
Service Worker เป็นส่วนพื้นฐานของ PWA เครื่องมือดังกล่าวช่วยให้โหลดได้อย่างรวดเร็ว (ไม่ว่าจะใช้เครือข่ายใดก็ตาม) การเข้าถึงแบบออฟไลน์ ข้อความ Push และความสามารถอื่นๆ
การแคช
คุณสามารถใช้ Cache Storage API เพื่อดาวน์โหลด จัดเก็บ ลบ หรืออัปเดตเนื้อหาในอุปกรณ์ จากนั้นระบบจะแสดงเนื้อหาเหล่านี้ในอุปกรณ์โดยไม่จำเป็นต้องส่งคำขอเครือข่าย
กำลังแสดงผล
เมื่อใช้เหตุการณ์การดึงข้อมูลของ Service Worker คุณจะสามารถสกัดกั้นคำขอของเครือข่ายและแสดงการตอบกลับได้โดยใช้เทคนิคต่างๆ
พื้นที่ทำงาน
Workbox คือชุดโมดูลที่ลดความซับซ้อนของการโต้ตอบทั่วไปกับ Service Worker เช่น การกำหนดเส้นทางและการแคช แต่ละโมดูลจะพูดถึงแง่มุมที่เฉพาะเจาะจงของการพัฒนา Service Worker Workbox มีเป้าหมายที่จะทำให้การใช้งาน Service Worker เป็นไปอย่างง่ายดายที่สุด ในขณะเดียวกันก็ให้ความยืดหยุ่นในการรองรับข้อกำหนดของแอปพลิเคชันที่ซับซ้อนตามความจำเป็น
ข้อมูลออฟไลน์
คุณต้องใช้การจัดการพื้นที่เก็บข้อมูลจึงจะสร้างประสบการณ์การใช้งานแบบออฟไลน์ที่มั่นคง เครื่องมือต่างๆ เช่น IndexedDB, แคช, ตัวจัดการพื้นที่เก็บข้อมูล, พื้นที่เก็บข้อมูลถาวร และการจัดทำดัชนีเนื้อหาอาจช่วยได้
การติดตั้ง
แอปที่ติดตั้งจะเข้าถึงได้ง่ายและใช้ประโยชน์จากการผสานรวมกับระบบปฏิบัติการในระดับที่ลึกกว่า ดูวิธีทำให้ PWA ติดตั้งได้และรับสิทธิประโยชน์เหล่านั้น
ไฟล์ Manifest ของเว็บแอป
ไฟล์ Manifest ของเว็บแอปคือไฟล์ JSON ที่กำหนดแนวทางการจัดการ PWA เป็นแอปพลิเคชันที่ติดตั้งไว้ ซึ่งรวมถึงรูปลักษณ์และลักษณะการทำงานพื้นฐานภายในระบบปฏิบัติการ
ข้อความแจ้งให้ติดตั้ง
สำหรับเว็บไซต์ที่มีคุณสมบัติผ่านเกณฑ์การติดตั้ง PWA เบราว์เซอร์จะทริกเกอร์เหตุการณ์เพื่อแจ้งให้ผู้ใช้ติดตั้ง ข่าวดีคือคุณสามารถใช้กิจกรรมนี้เพื่อปรับแต่งข้อความแจ้งและเชิญผู้ใช้ให้ติดตั้งแอปได้
อัปเดต
เป็นไปได้อย่างยิ่งว่า PWA ของคุณต้องได้รับการอัปเดต บทนี้จะมีเครื่องมือให้คุณอัปเดตส่วนต่างๆ ของ PWA ตั้งแต่เนื้อหาไปจนถึงข้อมูลเมตา
การเพิ่มประสิทธิภาพ
ผู้ใช้คาดหวังว่าจะได้รับประสบการณ์ที่ดี ในบทนี้ คุณจะได้ดูวิธีเพิ่มประสิทธิภาพ PWA ด้วยหน้าจอแนะนํา ทางลัดของแอป และวิธีการทำงานของเซสชัน
การตรวจหา
การระบุวิธีที่ผู้ใช้โต้ตอบกับแอปมีประโยชน์ในการปรับแต่งและปรับปรุงประสบการณ์ของผู้ใช้ เช่น คุณอาจตรวจสอบว่ามีการติดตั้งแอปของคุณในอุปกรณ์ของผู้ใช้แล้วหรือไม่ และใช้ฟีเจอร์ต่างๆ เช่น โอนการไปยังแอปแบบสแตนด์อโลนจากเบราว์เซอร์
การผสานรวมระบบปฏิบัติการ
ตอนนี้ PWA ทำงานนอกเบราว์เซอร์ได้แล้ว บทนี้จะครอบคลุมวิธีผสานรวมเพิ่มเติมกับระบบปฏิบัติการเมื่อผู้ใช้ติดตั้งแอปของคุณ
การจัดการหน้าต่าง
PWA นอกเบราว์เซอร์จะจัดการหน้าต่างของตัวเอง ในบทนี้ เราจะอธิบายเกี่ยวกับ API และความสามารถต่างๆ ในการจัดการหน้าต่างภายในระบบปฏิบัติการ
ฟีเจอร์ทดลอง
ยังมีความสามารถของ PWA ที่อยู่ระหว่างการปรับปรุงและคุณอาจเป็นส่วนหนึ่งของการพัฒนาได้ ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับโปรเจ็กต์ Fugu, วิธีลงชื่อสมัครทดลองใช้จากต้นทาง และวิธีใช้ API ทดลอง
เครื่องมือและการแก้ไขข้อบกพร่อง
เราจะสำรวจเครื่องมือที่มีไว้พัฒนา แก้ไขข้อบกพร่อง และทดสอบ Progressive Web App ของคุณ
สถาปัตยกรรม
คุณต้องตัดสินใจขณะพัฒนา PWA เช่น จะสร้างแอปพลิเคชันหน้าเว็บเดียวหรือแอปพลิเคชันหลายหน้า และจะโฮสต์ไว้ในรูทของโดเมนหรือในโฟลเดอร์
การจัดการความซับซ้อน
การทำให้เว็บแอปเป็นเรื่องง่ายอาจซับซ้อนขึ้นอย่างไม่น่าเชื่อ ในโมดูลนี้ คุณจะได้ดูวิธีที่ Web API ทำงานร่วมกับ Threading และวิธีใช้ Threading ดังกล่าวสำหรับรูปแบบ PWA ทั่วไป เช่น การจัดการสถานะ
ความสามารถ
PWA ไม่ได้เชื่อมโยงกับหน้าจอเท่านั้น เนื้อหาบทนี้จะพูดถึงความสามารถของ PWA ในปัจจุบันในแง่ของฮาร์ดแวร์ เซ็นเซอร์ และการใช้งานแพลตฟอร์ม
สรุป
ขั้นตอนถัดไปและแหล่งข้อมูล
แล้วคุณพร้อมจะเรียนรู้เกี่ยวกับ PWA หรือยัง