ความสามารถ

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

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

ตรวจสอบการสนับสนุนฟีเจอร์เสมอ

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

ซึ่งหมายความว่าคุณต้องพัฒนาแอปในเลเยอร์ต่างๆ ที่อาจไม่พร้อมใช้งานในอุปกรณ์บางเครื่อง และเพื่อตรวจสอบความพร้อมใช้งานก่อนใช้งาน

คุณต้องตรวจสอบกับ JavaScript ว่ามี API อยู่หรือไม่ก่อนที่จะใช้ หรือถาม API ว่าบริการพร้อมใช้งานในอุปกรณ์นั้นหรือไม่

เว็บที่มีประสิทธิภาพ

เว็บมีประสิทธิภาพอย่างยิ่งในปัจจุบัน เช่น

  • คุณสามารถสร้างแอปวิดีโอแชทแบบ Hyperlocal ที่มี WebRTC, ตำแหน่งทางภูมิศาสตร์ และข้อความพุช
  • คุณทำให้ติดตั้งแอปได้
  • คุณเพิ่มเอฟเฟกต์วิดีโอได้ด้วย WebAssembly
  • และยังทำเป็น Virtual Reality ได้ด้วย WebGL และ WebXR

การส่งเสริม PWA

เรามาแบ่ง API ความสามารถของ PWA ออกเป็น 4 กลุ่มดังนี้

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

ความสามารถที่เป็นมิตรกับสิ่งแวดล้อม

ด้านล่างนี้คือรายการความสามารถที่สำคัญที่สุดที่คุณใช้ใน PWA ได้

พื้นฐาน

  • การแคชไฟล์ในเครื่องโดยใช้ Cache API ตามที่เห็นในบทการแคช
  • การดำเนินการต่างๆ ในชุดข้อความโดยใช้ Web Worker ดังที่เห็นในส่วนการจัดการความซับซ้อน
  • การจัดการคำขอของเครือข่ายด้วยกลยุทธ์ต่างๆ ใน Service Worker ดังที่เห็นในบทในส่วน Service Worker
  • 2D Canvas สำหรับการแสดงกราฟิก 2 มิติบนหน้าจอโดยใช้ Canvas API
  • ผ้าใบประสิทธิภาพสูง 2 มิติและ 3 มิติ หรือ WebGL สำหรับการแสดงกราฟิก 3 มิติ
  • WebAssembly หรือ WASM สำหรับเรียกใช้โค้ดที่คอมไพล์ระดับต่ำเพื่อประสิทธิภาพ
  • การสื่อสารแบบเรียลไทม์โดยใช้ WebRTC API
  • Web Performance API สำหรับวัดผลและช่วยมอบประสบการณ์การใช้งานที่ดียิ่งขึ้น ดูข้อมูลเพิ่มเติมได้ในคู่มือ Performance API
  • จัดเก็บข้อมูลไว้ในเครื่องด้วย IndexedDB และการจัดการพื้นที่เก็บข้อมูลเพื่อค้นหาโควต้าและส่งคำขอพื้นที่เก็บข้อมูลถาวรตามที่เห็นในบทข้อมูลออฟไลน์
  • เสียงระดับต่ำด้วย Web Audio API
  • การตรวจหาที่ทำงานอยู่เบื้องหน้าโดยใช้ API ระดับการเข้าถึงหน้าเว็บ
  • การสื่อสารของเครือข่ายโดยใช้ Fetch API และ WebSocket API

ฮาร์ดแวร์และเซ็นเซอร์

  • ตำแหน่งทางภูมิศาสตร์จะค้นหาตำแหน่งของผู้ใช้ผ่านผู้ให้บริการต่างๆ เช่น ดาวเทียมหรือ Wi-Fi ผ่าน Geolocation API
  • กล้องและไมโครโฟนจะรับสตรีมสื่อจากกล้องและไมโครโฟนโดยใช้อินเทอร์เฟซอุปกรณ์สื่อ
  • เซ็นเซอร์จะรวบรวมข้อมูลแบบเรียลไทม์จากตัวตรวจวัดความเร่ง เครื่องวัดการหมุน เครื่องวัดค่าความเข้มข้นของสนามแม่เหล็ก และอื่นๆ โดยใช้ Sensors API หรืออินเทอร์เฟซรุ่นเก่า เช่น DeviceMotionEvent และ DeviceOrientationEvent ใน Safari คุณต้องใช้คำขอกล่องโต้ตอบสิทธิ์ที่ไม่เป็นไปตามมาตรฐานในการใช้งาน
  • การแตะและตัวชี้เข้าถึงข้อมูลเกี่ยวกับการแตะและการคลิกตามตัวชี้ทั้งหมดที่คุณทำด้วยนิ้ว เมาส์ แทร็กแพด หรือปากกา โดยใช้เหตุการณ์ของ Pointer และเหตุการณ์การแตะ
  • เกมแพด เพื่ออ่านข้อมูลที่มาจากเกมแพดและจอยสติ๊กมาตรฐานที่เชื่อมต่อกับอุปกรณ์โดยใช้ Gamepad API
  • การตรวจสอบสิทธิ์ด้วยข้อมูลไบโอเมตริก (เช่น การจดจำใบหน้าหรือลายนิ้วมือ) โดยใช้ Web Authentication หรือ WebAuthn

การผสานรวมระบบปฏิบัติการ

ความสามารถที่มีสีเขียวอ่อน

ด้านล่างนี้คือรายการความสามารถที่สำคัญที่สุดที่คุณใช้ใน PWA ได้ โปรดทราบว่าความสามารถเหล่านี้อาจไม่พร้อมใช้งานในบางเบราว์เซอร์

ข้อมูลพื้นฐาน

  • WebGL 2.0 ซึ่งเป็นข้อกำหนดของ WebGL เวอร์ชันใหม่เพื่อจับคู่กับ OpenGL 3.0
  • ตัวแปลงรหัส การเข้าถึงเฟรมต่างๆ ของสตรีมวิดีโอและเสียงท่อนในระดับต่ำ เหมาะสำหรับเว็บแอปพลิเคชันที่ต้องมีการควบคุมกระบวนการประมวลผลสื่อผ่าน Web Codecs API อย่างเต็มรูปแบบ

ฮาร์ดแวร์และเซ็นเซอร์

  • แสงแวดล้อมจะอ่านระดับแสงหรือความสว่างของแสงแวดล้อมรอบๆ อุปกรณ์ นอกเหนือจาก Sensors API
  • การสั่นจะใช้ Vibration API ซึ่งเป็นการตอบสนองแบบรู้สึกได้เมื่อผู้ใช้มีบางอย่างเกิดขึ้น หากอุปกรณ์รองรับ
  • สื่อการบันทึกจะบันทึกข้อมูลที่สร้างโดยออบเจ็กต์ MediaStream หรือ HTMLMediaElement (เช่น แท็ก <video>) สำหรับการวิเคราะห์ ประมวลผล หรือบันทึกในดิสก์โดยใช้ Mediarecorder API
  • การใช้ Wake Lock กับหน้าจอจะป้องกันไม่ให้อุปกรณ์หรี่แสงหรือล็อกหน้าจอเมื่อ PWA ต้องทำงานต่อไปโดยใช้ Screen Wake Lock API
  • Virtual Reality ให้คุณใช้ชุดหูฟังและอุปกรณ์อื่นๆ ใน PWA ได้ด้วย WebXR Device API
  • Augmented Reality สามารถทำได้ใน PWA ได้หลายวิธี เช่น การใช้ WebXR Device API หรือแอป Safari Quick Look สำหรับเนื้อหา AR
  • ตรวจหาผู้ใช้ที่ไม่ได้ใช้งานด้วย Idle Detection API
  • การล็อกการวางแนวจะล็อกการวางแนวเป็นแนวตั้งหรือแนวนอนขณะที่ PWA อยู่บนหน้าจอ โดยใช้ Screen Orientation API หรือพร็อพเพอร์ตี้ orientation ของไฟล์ Manifest ของเว็บแอปสำหรับแอปที่ติดตั้งไว้
  • นำเสนอเนื้อหาในโปรเจ็กเตอร์และจอแสดงผลรองได้โดยใช้ presentation API
  • ล็อกตัวชี้เพื่อรับข้อมูลการเคลื่อนที่แบบเดลต้าจากตัวชี้ (เมาส์ แทร็กแพด และตัวชี้) แทนค่าตำแหน่ง ซึ่งเป็นประโยชน์สำหรับบางเกม เพราะ Pointer Lock API

การผสานรวมระบบปฏิบัติการ

แหล่งข้อมูล