ในปี 2015 Google ได้แนะนำวิธีการใหม่ในการพัฒนาเว็บแอปสำหรับ Android: เว็บแอปก้าวหน้า เราสามารถสร้างแอปพลิเคชันที่มีลักษณะเหมือนแอปพลิเคชันเนทีฟจะสามารถใช้ฮาร์ดแวร์ของอุปกรณ์เช่นกล้องถ่ายรูปและมาตรวัดความเร่งรับการแจ้งเตือนแบบพุชมีไอคอนตัวเรียกใช้งานทำงานแบบออฟไลน์เก็บข้อมูลในเครื่อง ฯลฯ

ใน Android แอปเนทีฟมีคุณสมบัติใดบ้างที่ทำให้เว็บแอปแบบก้าวหน้าไม่รองรับและในทางกลับกัน

TL; DR - ณ กุมภาพันธ์ 2017, Progressive Web Apps เป็นแพลตฟอร์มที่มีประสิทธิภาพเพียงพอที่Twitter ได้ย้ายทั้งหมดของการเข้าชมเว็บบนมือถือของพวกเขาเพื่อ React กปภ.

ในเดือนสิงหาคม 2016 Progressive Web Apps สามารถเข้าถึงฮาร์ดแวร์ได้มากกว่าที่คิดโดยทั่วไป นี่คือภาพหน้าจอของwhatwebcando.todayจาก Chrome 52 ที่เสถียรบน Android:

การเข้าถึงฮาร์ดแวร์รวมถึง

• ตำแหน่งทางภูมิศาสตร์ - รองรับในเบราว์เซอร์ส่วนใหญ่
• กล้องและไมโครโฟนผ่านgetUserMedia / StreamและMediaStream Image Capture API ที่กำลังจะมาถึง
• การสั่นสะเทือนของอุปกรณ์
• การวางแนวหน้าจอและการเข้าถึงมาตรความเร่งรวมถึงเข็มทิศและไจโรสโคป
• สถานะแบตเตอรี่

การเข้าถึงฮาร์ดแวร์ที่จะเกิดขึ้น

คุณสมบัติเหล่านี้กำลังถูกนำไปใช้หรือใช้งานได้ในบางเบราว์เซอร์:

• บลูทู ธ ผ่านWeb Bluetooth API
• เอ็นเอฟซี
• เซ็นเซอร์วัดแสงโดยรอบ ( ทำงานใน Firefox 48+)
• เซ็นเซอร์ความใกล้เคียง ( ทำงานใน Firefox 48+)
• accelerometer , magnetometerและการเข้าถึงเซ็นเซอร์ไจโรสโคป
• API การตรวจจับรูปร่าง

ประเด็นสำคัญอีกประการหนึ่งที่ควรทราบคือOrigin Trials Framework ( ใช้งานใน Chrome ) ช่วยให้ผู้ผลิตสามารถเปิดเผยและทดสอบความสามารถของฮาร์ดแวร์ (หรือซอฟต์แวร์) ได้โดยไม่ต้องผ่านกระบวนการกำหนดมาตรฐาน ตัวอย่างเช่นผู้ผลิตโทรศัพท์สามารถเปิดเผย API สำหรับอ่านค่าของเซ็นเซอร์ความดันปรับแต่งแล้วส่งเพื่อพิจารณาให้ W3C

นอกเหนือจากการเข้าถึงฮาร์ดแวร์แล้วยังมีคุณลักษณะซอฟต์แวร์ที่ใช้โดยแอปเนทีฟซึ่งตอนนี้มีให้ใช้งานบนเว็บแอปแล้ว

คุณสมบัติดั้งเดิมดั้งเดิมที่ PWA ยังสามารถใช้ได้

• ผลักดันการแจ้งเตือน
• ทำงานแบบออฟไลน์
• เพิ่มไอคอนในหน้าจอหลัก
• ปรากฏในรายการแอพด้วยWebAPKs - Progressive Web Apps สามารถบรรจุลงในแพ็คเกจ Android ที่ติดตั้งได้จริง!
• เปิดตัวแบบเต็มหน้าจอ
• การเข้าถึงคลิปบอร์ด

• ฮาร์ดแวร์เร่ง 2D / 3D กราฟิกผ่าน HTML5 ผ้าใบหรือWebGL - ตรวจสอบบางส่วนของการสาธิตผ้าใบ HTML5 , เว็บไซต์ WebGLหรือห้องสมุด Three.js เกณฑ์มาตรฐานของเอนจินเกมข้ามแพลตฟอร์ม Unityในปี 2014 เปรียบเทียบประสิทธิภาพการแสดงผลแบบเนทีฟกับ WebGL และสรุปได้ว่า

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

  ช่องว่างได้ปิดลงแล้ว

• การอ่านไฟล์ที่ผู้ใช้เลือกในเบราว์เซอร์ใดก็ได้
• UI ที่ลื่นไหลและราบรื่นพร้อมภาพเคลื่อนไหว 60fps

คุณสมบัติเหล่านี้ครอบคลุมกรณีการใช้งานจำนวนมากและแอปเนทีฟยอดนิยมจำนวนมากในปัจจุบันสามารถเขียนใหม่เป็น PWA ได้ ยกตัวอย่างเช่น Slack ทางเลือกแหล่งที่มาเปิดRocket.Chat เป็นอาคารรุ่นที่กปภ. สำหรับข้อมูลเพิ่มเติมสาธิตกปภ. ดูhttps://pwa.rocks

คุณสมบัติเหมือนเนทีฟที่มาถึง PWA

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

คุณสมบัติดั้งเดิมของ Androidยังไม่มีให้ใช้กับ PWA

• เข้าถึงเซ็นเซอร์ลายนิ้วมือ ( อยู่ระหว่างการพัฒนา )
• ผู้ติดต่อปฏิทินและการเข้าถึงบุ๊กมาร์กของเบราว์เซอร์ (การขาดการเข้าถึงสิ่งเหล่านี้อาจถูกมองว่าเป็นคุณลักษณะของผู้ใช้ที่คำนึงถึงความเป็นส่วนตัว)
• สัญญาณเตือน
• คุณสมบัติโทรศัพท์ - ดักฟัง SMS หรือการโทรส่ง SMS / MMS รับหมายเลขโทรศัพท์ของผู้ใช้อ่านข้อความเสียงโทรออกโดยไม่ต้องใช้กล่องโต้ตอบ Dialer
• การเข้าถึงคุณลักษณะฮาร์ดแวร์และเซ็นเซอร์บางอย่างในระดับต่ำ: ไฟฉายเซ็นเซอร์ความดันบรรยากาศ
• การเข้าถึงระบบ: การจัดการงานการแก้ไขการตั้งค่าระบบบันทึก

Progressive Web Apps มีคุณสมบัติที่แอพในตัวไม่มี

• ความสามารถในการค้นพบ - เครื่องมือค้นหาสามารถค้นหาเนื้อหาในเว็บแอปแบบก้าวหน้าได้อย่างง่ายดาย แต่แอปเนทีฟที่เน้นเนื้อหาเป็นศูนย์กลางเช่น StackOverflow จะไม่แสดงในผลการค้นหาของ App Store สำหรับเนื้อหาที่ให้การเข้าถึงเช่น "pwa vs. native" นี่เป็นปัญหาสำหรับชุมชนเช่น Reddit ซึ่งไม่สามารถเปิดเผยชุมชนย่อยจำนวนมากของพวกเขาไปยังร้านแอปในรูปแบบ "แอป" แต่ละรายการได้
• linkability - หน้าใด ๆ / หน้าจอจะมีการเชื่อมโยงโดยตรงซึ่งสามารถใช้ร่วมกันได้อย่างง่ายดาย
• bookmarkability - บันทึกลิงค์นั้นเพื่อเข้าถึงมุมมองของแอพโดยตรง
• สดใหม่เสมอ - ไม่จำเป็นต้องผ่านแอพสโตร์เพื่อผลักดันการอัปเดต
• การเข้าถึงแบบสากล - บางครั้งไม่อยู่ภายใต้นโยบายตามอำเภอใจของร้านค้าแอปหรือข้อ จำกัด ทางภูมิศาสตร์ (โดยไม่ได้ตั้งใจ)
• การประหยัดข้อมูลขนาดใหญ่มีความสำคัญอย่างยิ่งในตลาดเกิดใหม่ที่มีอินเทอร์เน็ตราคาแพงและ / หรือช้า ตัวอย่างเช่นเว็บไซต์อีคอมเมิร์ซ Konga การใช้งานตัดข้อมูลโดย 92% สำหรับการโหลดครั้งแรกโดยการโอนย้ายไปยังกปภ.
• การกระจายแรงเสียดทานต่ำ - หากเว็บแอปโปรเกรสซีฟของคุณออนไลน์อยู่แล้วผู้ใช้ Android (และมือถืออื่น ๆ ) สามารถเข้าถึงได้
  • 65.5% ของผู้ใช้สมาร์ทโฟนในสหรัฐอเมริกาไม่ดาวน์โหลดแอพใหม่ ๆ ในแต่ละเดือน
  • PWA ไม่จำเป็นต้องไปที่แอพสโตร์ค้นหาแอพคลิกติดตั้งรอการดาวน์โหลดจากนั้นเปิดแอพ แต่ละขั้นตอนเหล่านี้สูญเสียผู้มีโอกาสเป็นผู้ใช้ไป 20%

หมายเหตุสุดท้าย: PWA ทำงานโดยใช้ codebase เดียวกันบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ส่วนใหญ่ ในสภาพแวดล้อมเดสก์ท็อป (ChromeOS และMac และ Windows รุ่นใหม่กว่า ) เปิดตัวในลักษณะเดียวกับแอปอื่น ๆ และทำงานในหน้าต่างแอปทั่วไป (ไม่มีแท็บเบราว์เซอร์)

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

เป้าหมายสำหรับเว็บแอปพลิเคชันแบบก้าวหน้าคือการขยายขีดความสามารถเหล่านี้ให้ครอบคลุมกรณีที่สำคัญที่สุด ในอารมณ์นี้ลองดูที่Progressive Web Apps: Escaping Tabs โดยไม่สูญเสียจิตวิญญาณของเราซึ่งคุณจะพบรายการสิ่งที่แอปพลิเคชันเว็บแบบก้าวหน้าควรนำเสนอ:

• ตอบสนอง: เพื่อให้พอดีกับฟอร์มแฟคเตอร์ใด ๆ
• การเชื่อมต่อที่เป็นอิสระ: ปรับปรุงอย่างก้าวหน้าด้วย Service Workers เพื่อให้พวกเขาทำงานแบบออฟไลน์
• การโต้ตอบที่เหมือนแอป: ใช้โมเดลแอปพลิเคชัน Shell + Content เพื่อสร้างการนำทางและการโต้ตอบที่เป็นประโยชน์
• สดใหม่: ทันสมัยอยู่เสมออย่างโปร่งใสด้วยกระบวนการอัปเดต Service Worker
• ปลอดภัย: ให้บริการผ่าน TLS (ข้อกำหนดของพนักงานบริการ) เพื่อป้องกันการสอดแนม
• ค้นพบได้: สามารถระบุได้ว่าเป็น "แอปพลิเคชัน" เนื่องจาก W3C Manifests และขอบเขตการลงทะเบียน Service Worker ทำให้เครื่องมือค้นหาสามารถค้นหาได้
• Re-Engagementable: สามารถเข้าถึง UI ของระบบปฏิบัติการซ้ำได้ เช่นการแจ้งเตือนแบบพุช
• ติดตั้งได้: ไปยังหน้าจอหลักผ่านการแจ้งเตือนที่เบราว์เซอร์ช่วยให้ผู้ใช้ "เก็บ" แอปที่พบว่ามีประโยชน์สูงสุดโดยไม่ต้องวุ่นวายกับแอพสโตร์
• เชื่อมโยงได้: หมายความว่าไม่มีแรงเสียดทานติดตั้งเป็นศูนย์และแชร์ได้ง่าย พลังทางสังคมของ URL มีความสำคัญ

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

แต่การกล่าวถึงเป็นพิเศษสมควรได้รับคอมโบใหม่ + ที่ติดตั้งได้เนื่องจากแสดงถึงข้อดีหลักประการหนึ่งของเว็บในฐานะแพลตฟอร์มเหนือทางเลือกดั้งเดิม ที่นี่ติดตั้งได้หมายความว่าจะปรากฏในหน้าจอหลักของคุณ ไม่ได้หมายความว่าคุณต้องผ่านขั้นตอนการดาวน์โหลดและการติดตั้ง คุณเปิด URL หรือค้นพบบริการในขณะที่เรียกดูและเสร็จแล้ว: จะปรากฏในหน้าจอหลักของคุณ

Freshหมายถึงวิธีการทำงานของเว็บโดยเสนอการโหลดทันทีและการอัปเดตที่ราบรื่น ระบบจะไม่ขอให้คุณติดตั้งการอัปเดตจากเว็บของ YouTube แต่จะมีการปรับใช้และคุณจะใช้งานในครั้งต่อไปที่คุณเข้าชม

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

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

ตามบันทึกสุดท้ายฉันขอแนะนำให้คุณเรียกดูwww.flipkart.comจากมือถือที่มี Chrome มันยอดเยี่ยมมาก: ไม่มีข้อบกพร่องการนำทางที่ราบรื่นความรู้สึกเหมือนแอป ออฟไลน์แล้วมันจะทำงานต่อไป ตัวอย่างโลกแห่งความเป็นจริงของโพสต์นั้น เพิ่มแอปลงในหน้าจอหลักและในครั้งต่อไปที่คุณเปิดประสบการณ์จะดียิ่งขึ้น

คุณสามารถดูFirefox OSรวมทั้งตัวอย่างการนำAPI แพลตฟอร์มเพิ่มเติมไปยังเว็บมาตรฐาน (ซึ่งประสบความสำเร็จมากหรือน้อย)