ขั้นตอนแรกๆ
Progressive Web App ยังคงเป็นเว็บไซต์ที่มีฟีเจอร์และความสามารถที่ปรับปรุงแล้ว โดยไม่ได้เชื่อมโยงกับกลุ่มเทคโนโลยีใดโดยเฉพาะ และคุณสามารถเริ่มต้นใหม่ทั้งหมดด้วยเว็บไซต์ใหม่หรืออัปเดตเว็บไซต์ที่มีอยู่ได้โดยไม่ต้องยกเครื่องเปล่า ในคู่มือนี้ คุณจะได้เรียนรู้วิธีสร้างการใช้งานรูปแบบ PWA ที่ดี กลยุทธ์บางส่วนที่จะช่วยคุณเริ่มต้นมีดังนี้
ทำให้ติดตั้งได้
เริ่มแบบค่อยเป็นค่อยไป วิธีการนี้รวมถึงการเริ่มต้นด้วยไฟล์ Manifest พื้นฐาน หน้าออฟไลน์ที่เรียบง่าย และ Service Worker เพื่อแสดงหน้าแบบออฟไลน์ รวมถึงแคช CSS และ JavaScript ที่สำคัญบางส่วน การแคช CSS และ JavaScript ที่สำคัญจะช่วยให้คุณทำให้เว็บแอปที่มีอยู่ทำงานแบบออฟไลน์ได้พร้อมทั้งเพิ่มประสิทธิภาพไปพร้อมๆ กัน
โฟกัสที่ฟีเจอร์
เลือกฟีเจอร์ใหม่ 1 รายการ เช่น ข้อความ Push หรือการจัดการไฟล์ ซึ่งจะส่งผลต่อผู้ใช้หรือธุรกิจอย่างมาก ซึ่งจะช่วยให้คุณลงลึกไปยังพูล PWA ได้โดยไม่ต้องทำการเปลี่ยนแปลงหลายอย่างพร้อมกัน
สร้างเวอร์ชันที่เรียบง่าย
นำส่วนที่มีอยู่ของแอปพลิเคชันหรือเส้นทางของผู้ใช้ที่เฉพาะเจาะจง เช่น การเล่นวิดีโอหรือการเข้าถึงบอร์ดดิ้งพาสมาใช้ แล้วทำให้เป็น PWA แบบออฟไลน์เป็นหลัก โดยจะเป็นแบบเดี่ยวหรือในบริบทก็ได้ โดยวิธีนี้จะเป็นการทดสอบที่มีเดิมพันต่ำ ซึ่งเปิดโอกาสให้คุณปรับเปลี่ยนประสบการณ์การใช้งานสำหรับผู้ใช้ด้วย PWA ได้ใหม่
เริ่มต้นใหม่ทั้งหมด
หากคุณกำลังจะออกแบบเว็บไซต์หรือเริ่มใหม่ตั้งแต่ต้น กลยุทธ์นี้ก็ถือว่าสมเหตุสมผล ซึ่งช่วยให้คุณสร้างรูปแบบการออกแบบ PWA ได้ง่ายขึ้นกว่ากลยุทธ์อื่นๆ โดยเฉพาะอย่างยิ่ง ทำให้คุณได้ใช้ประโยชน์จากศักยภาพทั้งหมดของ Service Worker ตั้งแต่เริ่มต้น
การอัปเกรดแอปร้านค้า
ด้วยความสามารถในการเผยแพร่ PWA ไปยัง App Store คุณก็รวม PWA ไว้ใน Launcher ของ PWA แล้วอัปโหลดไปยัง Store ได้ เช่น Play Store หรือ Windows Store ของ Google หากมีแอปเฉพาะแพลตฟอร์มอยู่แล้ว คุณสามารถแทนที่แอปนั้นด้วย PWA ที่เผยแพร่ใน Store ได้
วิธีนี้จะช่วยให้ผู้ใช้เดิมอัปเกรดประสบการณ์การใช้งานเป็น PWA ได้ ส่วนผู้ใช้ใหม่จะยังคงใช้หรือติดตั้ง PWA จากเบราว์เซอร์หรือ App Store ได้ และคุณจะมีแอปเดียวสำหรับทุกคน ซึ่งช่วยประหยัดค่าใช้จ่าย เวลา และปรับปรุงประสบการณ์ของผู้ใช้
รายการตรวจสอบ PWA
Progressive Web App เป็นเว็บไซต์ จนเกิดคำถามว่า จะกลายมาเป็น Progressive Web App เมื่อใด คำตอบนี้ไม่ง่ายนัก เนื่องจากแนวคิดของ PWA ไม่ได้หมายถึงเทคโนโลยีหรือสแต็กใดโดยเฉพาะ แต่ PWA เป็นรูปแบบที่มีองค์ประกอบทางเทคนิคต่างๆ แทน
แม้ว่าเบราว์เซอร์ทั้งหมดจะไม่มีกฎตายตัว แต่เรามีชุดคำแนะนำที่เรียกว่ารายการตรวจสอบ Progressive Web App ที่จะช่วยสร้าง PWA ที่ผู้ใช้จะชื่นชอบ
ข้อกำหนดหลัก
เนื่องจาก PWA ครอบคลุมอุปกรณ์ทั้งหมด ตั้งแต่อุปกรณ์เคลื่อนที่ไปจนถึงเดสก์ท็อป รายการตรวจสอบหลักของ Progressive Web App จึงเป็นสิ่งที่คุณต้องทำเพื่อให้ผู้ใช้ทุกคนติดตั้งแอปได้และเชื่อถือได้ ไม่ว่าจะใช้หน้าจอหรือประเภทอินพุตใดก็ตาม
ข้อกำหนดหลัก ได้แก่
เริ่มต้นทำงานได้เร็ว ความเร็วไม่มีตก
ประสิทธิภาพมีบทบาทสำคัญต่อความสำเร็จของประสบการณ์ออนไลน์ เนื่องจากเว็บไซต์ที่มีประสิทธิภาพสูงจะดึงดูดและรักษาผู้ใช้ไว้ได้ดีกว่าเว็บไซต์ที่มีประสิทธิภาพต่ำ เว็บไซต์ควรมุ่งเน้นการเพิ่มประสิทธิภาพเพื่อเมตริกประสิทธิภาพที่เน้นผู้ใช้เป็นหลัก
ทำงานได้ในทุกเบราว์เซอร์
Progressive Web App คือเว็บแอปก่อน ซึ่งหมายความว่าแอปต้องทำงานในเบราว์เซอร์ต่างๆ ได้ ไม่ใช่ทำงานในเบราว์เซอร์ใดเบราว์เซอร์หนึ่งเท่านั้น อย่างไรก็ตาม การใช้งานในการใช้งานไม่จำเป็นต้องเหมือนกันในทุกเบราว์เซอร์ อาจมีฟีเจอร์ที่เบราว์เซอร์ใดไม่รองรับ พร้อมกับฟีเจอร์สำรองที่ช่วยให้ได้รับประสบการณ์การใช้งานที่ดี
ตอบสนองต่อหน้าจอทุกขนาด
ผู้ใช้สามารถใช้ PWA ของคุณบนหน้าจอทุกขนาด และเนื้อหาทั้งหมดจะพร้อมใช้งานในวิวพอร์ตขนาดใดก็ได้
แสดงหน้าออฟไลน์ที่กำหนดเอง
เมื่อผู้ใช้ออฟไลน์ การคงผู้ใช้ไว้ใน PWA จะมอบประสบการณ์การใช้งานที่ราบรื่นและคล้ายกับการกลับไปยังหน้าออฟไลน์ของเบราว์เซอร์เริ่มต้น
ติดตั้งได้
ผู้ใช้ที่ติดตั้งหรือเพิ่มแอปลงในหน้าจอหลักมีแนวโน้มที่จะมีส่วนร่วมกับแอปเหล่านั้นมากกว่า และเมื่อติดตั้ง PWA แล้ว ผู้ใช้อาจใช้ประโยชน์จากความสามารถได้มากขึ้นเพื่อประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้น
ลักษณะ PWA ที่เหมาะสมที่สุด
หากต้องการสร้าง Progressive Web App ที่ยอดเยี่ยมจริงๆ คุณต้องมีมากกว่าแค่รายการตรวจสอบหลัก รายการตรวจสอบ Progressive Web App ที่ดีที่สุดคือการทำให้ PWA มีความสามารถและเชื่อถือได้ ควบคู่ไปกับการใช้ประโยชน์จากสิ่งที่ทำให้เว็บมีประสิทธิภาพ
มอบประสบการณ์การใช้งานแบบออฟไลน์
การอนุญาตให้ผู้ใช้ใช้ PWA ขณะออฟไลน์ได้จะเป็นการสร้างประสบการณ์การใช้งานแบบแอปอย่างแท้จริงให้แก่ผู้ใช้ ในกรณีนี้ ให้ระบุฟีเจอร์ที่ไม่ต้องใช้การเชื่อมต่อเพื่อให้ผู้ใช้เข้าถึงฟังก์ชันการทำงานบางอย่างได้เป็นอย่างน้อย
เข้าถึงได้อย่างเต็มรูปแบบ
ตรวจสอบว่าโปรแกรมอ่านหน้าจอเข้าใจเนื้อหาและการโต้ตอบทั้งหมดของแอปพลิเคชัน สามารถใช้เพียงแป้นพิมพ์ มีการระบุโฟกัส และมีคอนทราสต์ของสีชัดเจน การทําให้ PWA เข้าถึงได้จะทำให้ทุกคนใช้งานได้
ใช้ความสามารถที่มีประสิทธิภาพ (หากมี)
ไม่ว่าจะเป็นการรับส่งข้อความพุช, WASM และ WebGL ไปจนถึงการเข้าถึงระบบไฟล์ เครื่องมือเลือกรายชื่อติดต่อ และการผสานรวมกับ App Store เครื่องมือในการสร้าง PWA ที่มีความสามารถสูงและมีการผสานรวมอย่างแน่นแฟ้นพร้อมให้ใช้งานแล้ว ซึ่งจะช่วยให้คุณสร้างประสบการณ์ของผู้ใช้ที่มีฟีเจอร์ครบถ้วนซึ่งก่อนหน้านี้สงวนไว้ให้กับแอปในแพลตฟอร์ม ซึ่งผู้ใช้จะนำไปใช้งานได้ทุกที่
ค้นพบได้ผ่านการค้นหา
การเข้าชมเว็บไซต์มากกว่าครึ่งมาจากการค้นหาทั่วไป การตรวจสอบว่า URL ตามรูปแบบบัญญัติมีอยู่สำหรับเนื้อหาและเครื่องมือค้นหาสามารถจัดทำดัชนีเว็บไซต์ของคุณได้นั้นเป็นสิ่งสำคัญสำหรับผู้ใช้ในการค้นหา PWA
ใช้งานได้กับอินพุตทุกประเภท
ผู้ใช้ควรสลับอินพุตระหว่างประเภทการใช้งานได้อย่างราบรื่น และวิธีการป้อนข้อมูลไม่ควรขึ้นอยู่กับขนาดหน้าจอ
ให้บริบทสำหรับคำขอสิทธิ์
เรียกใช้พรอมต์สำหรับสิทธิ์ต่างๆ เช่น การแจ้งเตือน ตำแหน่งทางภูมิศาสตร์ และข้อมูลเข้าสู่ระบบเท่านั้น หลังจากให้เหตุผลในบริบทเพื่อเพิ่มโอกาสที่ผู้ใช้จะยอมรับพรอมต์
ทำตามแนวทางปฏิบัติแนะนำสำหรับโค้ดที่มีประสิทธิภาพ
การอัปเดตแอปพลิเคชันให้ทันสมัยและฐานของโค้ดมีประสิทธิภาพอยู่เสมอ ช่วยให้คุณนำเสนอฟีเจอร์ใหม่ๆ ที่บรรลุเป้าหมายอื่นๆ ตามที่ระบุไว้ในรายการตรวจสอบนี้ได้ง่ายขึ้น