PWA ที่ทรงประสิทธิภาพ

แม้ว่าความสามารถบางอย่างของ PWA จะเป็นที่รู้จักกันโดยทั่วไป เช่น Notifications API ที่ช่วยให้เว็บแอปรับและเผยแพร่การแจ้งเตือนของแพลตฟอร์มได้ แต่ก็ยังมีฟีเจอร์ใหม่ๆ ที่กำลังจะเปิดตัวบนเว็บเพื่อเพิ่มประสิทธิภาพแอปของคุณ โปรเจ็กต์ความสามารถของเว็บใน Chromium หรือที่รู้จักกันในชื่อโปรเจ็กต์ Fugu 🐡 เป็นความพยายามที่จะเปิดใช้มาตรฐานเว็บใหม่ๆ ที่มีประสิทธิภาพไปพร้อมกับรักษาเอกลักษณ์ของเว็บ นั่นคือ ความปลอดภัยที่เน้นผู้ใช้เป็นหลัก ความสะดวก และความเข้ากันได้ข้ามแพลตฟอร์ม

การเชื่อมช่องว่างของแอป

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

ความสามารถแต่ละอย่างผ่านกระบวนการกำหนดมาตรฐานที่ครอบคลุมเพื่อขอความคิดเห็นจากชุมชนเพื่อช่วยกำหนดรูปแบบ API และตรวจสอบว่าการออกแบบขั้นสุดท้ายมีความปลอดภัย เป็นส่วนตัว และเชื่อถือได้ ความสามารถใหม่ๆ จะได้รับการติดตามในเครื่องมือติดตามแบบเปิดและแบ่งออกเป็น 1 ใน 5 หมวดหมู่ต่อไปนี้

จัดส่งแล้ว

พร้อมใช้งานใน Chrome เวอร์ชันเสถียรล่าสุด ใช้ได้อย่างน่าเชื่อถือหากตรวจพบฟีเจอร์การใช้งานอย่างถูกต้อง

ในการทดลองใช้ Origin

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

ในรุ่นทดลองสำหรับนักพัฒนาแอป

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

เริ่มเมื่อวันที่

เราเริ่มพัฒนาแล้ว แต่ปัจจุบันยังไม่มี API ที่ใช้งานได้

อยู่ระหว่างพิจารณา

API ที่ผู้ใช้แสดงความสนใจ แต่ยังไม่ได้เริ่มใช้งาน หากยังไม่ได้เริ่มใช้ API โปรดติดดาวหรือเพิ่ม Use Case ของคุณลงในปัญหาเพื่อช่วยให้ทีม Chromium จัดลําดับความสําคัญได้

การเพิ่มประสิทธิภาพ PWA

เมื่อสร้าง PWA ให้พิจารณานำ API และแนวทางปฏิบัติแนะนำต่อไปนี้ไปใช้เพื่อปรับปรุงความรู้สึกของเว็บแอปอย่างมาก แอปของคุณอาจได้รับประโยชน์จาก API อย่างน้อย 1 รายการเพื่อปรับปรุงประสบการณ์ของผู้ใช้โดยรวม API ที่มีเครื่องหมาย 🔮 อยู่ในระยะทดลองใช้ Origin, API ที่มีเครื่องหมาย 🚩 อยู่ในระยะทดลองใช้สำหรับนักพัฒนาซอฟต์แวร์, API ที่มีเครื่องหมาย 📱 อยู่ในระยะที่เสถียรบนอุปกรณ์เคลื่อนที่ในปัจจุบัน และการใช้งานบนเดสก์ท็อปได้เริ่มต้นขึ้นแล้ว ส่วน API อื่นๆ ที่กล่าวถึงนั้นอยู่ในระยะที่เสถียร (แม้ว่าอาจไม่พร้อมให้บริการในบางแพลตฟอร์ม) ระบบจะรวมเฉพาะ API ที่พร้อมใช้งานใน Chrome เวอร์ชันเสถียร เบต้า (ทำเครื่องหมายด้วย β) หรือ Canary (ทำเครื่องหมายด้วย α) ปัจจุบันเท่านั้น เราจะอัปเดตรายการนี้เป็นประจำเพื่อให้สอดคล้องกับ API ที่เผยแพร่

การติดตั้งแอป

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

  • ไฟล์ Manifest ของเว็บแอป - ระบุข้อมูลเกี่ยวกับเว็บแอปของคุณให้กับเบราว์เซอร์และระบบปฏิบัติการ เช่น ชื่อ โลโก้ URL ที่จะใช้เริ่มต้นแอป และวิธีแสดงเว็บแอป
  • Service Worker และ Cache Storage API - อนุญาตให้เว็บแอปสร้างพร็อกซีเซิร์ฟเวอร์และควบคุมวิธีจัดการแคชของเบราว์เซอร์ Service Worker ที่ตอบสนองต่อเหตุการณ์ fetch ของเบราว์เซอร์และตอบสนองต่อคำขอ Fetch สำหรับ URL เริ่มต้นที่ระบุในไฟล์ Manifest ของเว็บแอปด้วยเนื้อหาเมื่อออฟไลน์ได้เป็นข้อกำหนดสำหรับการติดตั้ง
  • ทำงานเมื่อเข้าสู่ระบบ 🚩β - ช่วยให้คุณกำหนดค่า PWA ให้เปิดโดยอัตโนมัติเมื่อผู้ใช้เข้าสู่ระบบ
  • ทางลัดไอคอนแอป - ระบุทางลัดไปยัง URL ที่เฉพาะเจาะจงด้วยเว็บแอป (เช่น เริ่มแชท อัปโหลดรูปภาพ ฯลฯ) จากเมนูบริบทของไอคอนแอปที่ติดตั้ง (เช่น กดค้างบนอุปกรณ์เคลื่อนที่ คลิกขวาบนเดสก์ท็อป) ในแพลตฟอร์มที่รองรับ
  • getInstalledRelatedApps - อนุญาตให้เว็บแอปตรวจสอบว่าได้ติดตั้ง PWA, แอป Android หรือแอป Windows (UWP) แล้วหรือไม่

ปรับเปลี่ยนได้และเข้าถึงได้

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

การสร้างรายได้และการจัดจำหน่าย

  • การชำระเงินบนเว็บ - อินเทอร์เฟซมาตรฐานที่ยืดหยุ่นสำหรับการชำระเงินออนไลน์ซึ่งออกแบบมาให้ทำงานได้ในทุกเบราว์เซอร์หรืออุปกรณ์ และกับผู้ให้บริการชำระเงินหรือผู้ให้บริการชำระเงินรายใดก็ได้
  • Digital Goods API 🔮 - อินเทอร์เฟซมาตรฐานที่ยืดหยุ่นสำหรับการค้นหาและจัดการการซื้อในแอปจากเว็บแอปพลิเคชัน รวมถึงรองรับการซื้อประเภททั่วไป เช่น การซื้อแบบครั้งเดียว การซื้อซ้ำ (เช่น อัญมณี/สกุลเงินในเกม) และการสมัครใช้บริการ ทำงานร่วมกับ Web Payments
  • กิจกรรมบนเว็บที่เชื่อถือได้ - สร้างแอป Android สำหรับ PWA เพื่อให้แสดงในร้านค้าที่รองรับการดาวน์โหลดได้ เช่น Google Play

การเข้าถึงคลิปบอร์ด

  • คลิปบอร์ดแบบไม่พร้อมกัน - อ่านและเขียนข้อความและรูปภาพไปยังคลิปบอร์ดของผู้ใช้ และรอรับเหตุการณ์การคัดลอกและวางจากผู้ใช้

การแจ้งเตือน

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

  • ข้อความ Push บนเว็บ - เมื่อผู้ใช้เลือกรับแล้ว จะอนุญาตให้เว็บแอปส่งข้อความ Push ไปยังผู้ใช้
  • Badging API - อนุญาตให้เว็บแอปที่ติดตั้งตั้งค่าป้ายทั้งแอปในไอคอนแอป โดยอาจมีตัวเลขหรือไม่ก็ได้
  • ทริกเกอร์การแจ้งเตือน 🔮 - ส่งการแจ้งเตือนไปยังผู้ใช้เมื่อตรงตามเงื่อนไขทริกเกอร์ เช่น ตามเวลาหรือตามสถานที่ (นึกถึงการแจ้งเตือนกิจกรรมในปฏิทิน)

การแชร์ความตั้งใจและการจัดการโปรโตคอล

  • การลงทะเบียนโปรโตคอล URL 🚩α - ช่วยให้เว็บแอปพลิเคชันลงทะเบียนตัวเองเป็นตัวแฮนเดิลของโปรโตคอล/รูปแบบ URL ที่กำหนดเองได้โดยใช้ไฟล์ Manifest การติดตั้ง
  • Web Share - ใช้ UI การแชร์ของระบบในตัวบนอุปกรณ์ที่รองรับเพื่อแชร์ URL, ข้อความ และไฟล์ไปยังแอปอื่นๆ ที่ติดตั้งไว้ในอุปกรณ์ คุณไม่จำเป็นต้องติดตั้งแอป
  • เป้าหมายการแชร์บนเว็บ - ทำให้ PWA ที่ติดตั้งพร้อมใช้งานใน UI การแชร์ของระบบในตัวบนอุปกรณ์ที่รองรับ เพื่อให้ผู้ใช้แชร์ข้อความและไฟล์ไปยังแอปของคุณจากแอปอื่นๆ ได้

การเปิดและบันทึกไฟล์

  • File Handling API 🚩 - ให้เว็บแอปที่ติดตั้งลงทะเบียนกับระบบปฏิบัติการเพื่อระบุความสามารถในการจัดการ (อ่าน/สตรีม/แก้ไข) ไฟล์ที่มีประเภท MIME และ/หรือนามสกุลไฟล์ที่กำหนด ซึ่งจะช่วยให้เว็บแอปเป็นตัวเลือกในรายการ "เปิดด้วยแอปพลิเคชัน..." ของเมนูบริบทได้ เป็นต้น
  • File System Access API - การเข้าถึงระบบไฟล์ของผู้ใช้ที่เชื่อถือได้ต่อเซสชัน ซึ่งช่วยให้เกิดการโต้ตอบต่อไปนี้ (ตามที่แอปของคุณต้องการ)
    • อ่านไฟล์จากระบบไฟล์ในเครื่อง - แสดงเครื่องมือเลือกไฟล์และอนุญาตให้ผู้ใช้เลือกไฟล์ 1 ไฟล์หรือหลายไฟล์ (ไม่บังคับ) เพื่อเปิด รวมถึงจำกัดประเภทไฟล์ที่อนุญาตตามประเภท MIME และนามสกุล
    • บันทึกการเปลี่ยนแปลงลงในไฟล์ที่เปิด - บันทึกการเปลี่ยนแปลงลงในไฟล์ที่เปิดด้วย FSA โดยตรง โดยไม่ต้องแจ้งให้ผู้ใช้เลือกตำแหน่งที่จะบันทึกไฟล์หรือดาวน์โหลดสำเนา
    • สร้างไฟล์ใหม่ในระบบไฟล์ในเครื่อง - อนุญาตให้ผู้ใช้สร้างไฟล์ใหม่ในระบบไฟล์ในเครื่อง โดยอาจมีนามสกุลไฟล์เริ่มต้นหรือไม่ก็ได้ จากนั้นแอปของคุณจะมีสิทธิ์บันทึกไฟล์นั้น
    • ไฟล์ที่เปิดล่าสุด - ตัวแฮนเดิลไฟล์ที่สร้างด้วย FSA สามารถจัดเก็บไว้ใน IndexedDB ซึ่งจะช่วยให้คุณแสดงรายการไฟล์ที่ใช้ล่าสุดระหว่างเซสชันของผู้ใช้ได้ (แม้ว่าสิทธิ์ในการแก้ไขจะยังคงไม่คงอยู่ระหว่างเซสชันก็ตาม)
    • อ่าน เขียน และจัดการไดเรกทอรี - อนุญาตให้ผู้ใช้เลือกไดเรกทอรีในระบบไฟล์ในเครื่อง จากนั้นแอปจะอ่านเนื้อหา สร้าง อ่าน และลบไฟล์และไดเรกทอรีย่อยในไดเรกทอรีนั้น รวมถึงกำหนดเส้นทางไฟล์ที่เกี่ยวข้องภายในได้
  • สตรีมการบีบอัด - บีบอัดหรือคลายการบีบอัดโดยใช้อัลกอริทึมการบีบอัด gzip และ deflate

การจัดการหน้าต่าง

  • Fullscreen API - อนุญาตให้ผู้ใช้ทำให้องค์ประกอบในเว็บแอป เช่น วิดีโอ แสดงเต็มหน้าจอ
  • API การวางหน้าต่างข้ามหน้าจอ 🔮 - อนุญาตให้เว็บแอปรับข้อมูลเกี่ยวกับจอแสดงผลที่เชื่อมต่อและวางตำแหน่งหน้าต่างที่สัมพันธ์กับจอแสดงผลเหล่านั้น ซึ่งจะช่วยให้เว็บแอปแบบหลายหน้าต่างและหลายจอแสดงผลทำงานได้
  • โหมดการแสดงแอปพลิเคชันแบบแท็บ 🚩 - อนุญาตให้แสดงเว็บแอปที่ติดตั้งไว้ในแท็บอย่างน้อย 1 แท็บ ไม่ใช่แค่ในหน้าต่างเดียว

การผสานรวมระบบปฏิบัติการที่ดียิ่งขึ้น

  • Local Fonts API 🔮 - อนุญาตให้เว็บแอปแสดงรายการแบบอักษรที่ติดตั้งในเครื่องและขอสิทธิ์เข้าถึงคอนเทนเนอร์ SFNT ระดับต่ำ (ไบต์) ซึ่งรวมถึงข้อมูลแบบอักษรทั้งหมด เพื่อให้แอปแสดงผลแบบอักษรที่ติดตั้งในเครื่องแบบกำหนดเองได้
  • Wake Lock - อนุญาตให้เว็บแอปป้องกันไม่ให้หน้าจอปิดพัก ซึ่งจะช่วยให้เว็บแอปทำงานที่ใช้เวลานานได้โดยไม่ต้องกังวลว่าจะถูกขัดจังหวะ (เช่น การแปลงรหัสไฟล์ หรือการเปิดสูตรอาหารไว้ขณะทำอาหาร)
  • การตรวจหาการไม่มีการใช้งาน 🔮 - อนุญาตให้เว็บแอปตรวจหาเมื่อผู้ใช้ไม่ได้ใช้อุปกรณ์อย่างต่อเนื่อง

การสนับสนุนแบบออฟไลน์ที่ขยายขอบเขต

หากต้องการให้เว็บแอปทำงานแบบออฟไลน์ได้ดียิ่งขึ้น คุณอาจต้องพิจารณาใช้ API ต่อไปนี้

  • การซิงค์ในเบื้องหลัง - เมื่อออฟไลน์ ให้จัดคําขอที่ต้องใช้การเชื่อมต่อเป็นคิว แล้วซิงค์ข้อมูลของเว็บแอปในเบื้องหลังเมื่อเครือข่ายพร้อมใช้งาน แทนที่จะไม่ประมวลผลคําขอแบบออฟไลน์เลย เช่น อนุญาตให้ส่งข้อความหรือการเปลี่ยนแปลงทีละน้อยในเอกสารที่ซิงค์เมื่อกลับมาออนไลน์
  • การซิงค์ข้อมูลเป็นระยะในเบื้องหลัง - อนุญาตให้ Web App ที่ติดตั้งและใช้งานบ่อยมี Service Worker ที่เปิดใช้งานเป็นระยะตามระยะเวลาขั้นต่ำที่ผ่านไป และเรียกใช้ เช่น เพื่ออัปเดตแคช ซึ่งจะช่วยให้เนื้อหาเป็นข้อมูลล่าสุดเมื่อผู้ใช้เปิดแอป
  • Content Indexing API - อนุญาตให้เว็บแอปบอกเบราว์เซอร์ว่ามีเนื้อหาใดบ้างที่พร้อมใช้งานแบบออฟไลน์เพื่อให้เบราว์เซอร์แสดงเนื้อหาดังกล่าวต่อผู้ใช้
  • การดึงข้อมูลในเบื้องหลัง - อนุญาตให้ดึงข้อมูลในเบื้องหลังที่ใช้เวลานาน เช่น การดาวน์โหลดภาพยนตร์หรือการอัปโหลดวิดีโอและรูปภาพ โดยไม่ต้องเสี่ยงต่อการปิด Service Worker

การสตรีม การเข้ารหัส และการถอดรหัสสื่อ

หากเว็บแอปเล่นไฟล์สื่อ เช่น ไฟล์วิดีโอหรือไฟล์เสียง คุณอาจต้องพิจารณาใช้ API ต่อไปนี้

  • การสตรีมแบบปรับเปลี่ยนได้ - อนุญาตให้สตรีมวิดีโอสลับอัตราบิตตามประสิทธิภาพของเครือข่าย
  • การแสดงภาพซ้อนภาพ - อนุญาตให้ผู้ใช้เปิดวิดีโอจากเว็บแอปของคุณในหน้าต่างที่อยู่ด้านบนสุดเสมอ ซึ่งสามารถย้ายและปรับขนาดได้อย่างอิสระ
  • Media Session API - อนุญาตให้ผู้ใช้ควบคุมการเล่นสื่อสำหรับเว็บแอปของคุณโดยใช้ฟังก์ชันฮาร์ดแวร์และซอฟต์แวร์ระดับระบบปฏิบัติการ (เช่น ปุ่มเล่น/หยุดชั่วคราว/หยุดในแป้นพิมพ์หรือบนหน้าจอล็อก) รวมถึงควบคุมการแจ้งเตือนสื่อระดับระบบปฏิบัติการ (เช่น ชื่อ ศิลปิน อัลบั้ม และอาร์ตเวิร์ก)
  • Chromecast API - อนุญาตให้ผู้ใช้แคสต์สื่อไปยังตัวรับสัญญาณ Chromecast ที่พร้อมใช้งาน เช่น เล่นวิดีโอจากเว็บแอปของคุณบนทีวีของผู้ใช้
  • Web Codecs 🔮 - เข้าถึงตัวเข้ารหัสและตัวถอดรหัสสื่อฮาร์ดแวร์และซอฟต์แวร์ในตัว ซึ่งมีประโยชน์สำหรับทั้งกรณีการใช้งานแบบเรียลไทม์ เช่น ไลฟ์สดที่มีเวลาในการตอบสนองต่ำ รวมถึงการเข้ารหัส การถอดรหัส และการแปลงรหัสไฟล์

การรองรับการป้อนข้อมูลที่เพิ่มขึ้น

การสนับสนุนอุปกรณ์ต่อพ่วงขั้นสูง

  • Web USB - อนุญาตให้เว็บแอปเข้าถึงอุปกรณ์ USB ที่ไม่ใช่มาตรฐาน (เช่น คีย์บอร์ดและเมาส์) จากแอปของคุณ
  • Serial API 🔮 - เพิ่ม API สำหรับการสื่อสารกับอุปกรณ์ฮาร์ดแวร์ผ่านพอร์ตแบบอนุกรมจริงหรือเสมือน

รายการตรวจสอบ PWA

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