Progressive Web Apps - อนาคตของเว็บยุคใหม่

ทุกวันนี้ Progressive Web Apps (PWA) เป็นที่กล่าวขานของเมืองเป็นหลักเนื่องจากการใช้งานที่น่าทึ่งและประสบการณ์การใช้งานที่ไม่เหมือนใคร ด้วยคุณสมบัติที่รวมกันของเว็บไซต์และแอพพื้นฐานทำให้ PWAs กลายเป็นบรรทัดฐานสำหรับแอปพลิเคชั่นเว็บหลายอุปกรณ์ ช่วยให้นักพัฒนาสร้างแอพไดนามิกโหลดเร็ว โดยไม่ต้องใช้เฟรมเวิร์กแบบผสม.

ฉันเชื่อว่า Progressive Web Apps เป็น อนาคตของเว็บไซต์ - และในบทความต่อไปนี้ฉันจะพูดถึงประโยชน์ของมันและใช้กรณีเพื่อให้ภาพรวมทั้งหมด มาลงมือทำกันเถอะ.

เว็บแอพก้าวหน้าคืออะไร?

ระยะเวลา “แอพเว็บก้าวหน้า” ได้รับการประกาศเกียรติคุณเป็นครั้งแรกโดย Alex Rusell (ผู้พัฒนา Google Chrome) และ Frances Berriman (นักออกแบบ) Alex แบ่งปันความคิดของเขาเกี่ยวกับ Progressive Web Apps ที่ “แอพเหล่านี้ไม่ได้บรรจุและจัดวางผ่านร้านค้า เว็บไซต์ที่ใช้วิตามินที่เหมาะสมทั้งหมด“.

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

แอปบนเว็บกับ Progressive Web Apps

แอปพลิเคชันเว็บหรือเว็บแอพทั่วไปคือแอพฝั่งไคลเอ็นต์ที่ ทำงานโดยตรงในเว็บเบราว์เซอร์. แม้ว่าพวกเขาจะดีกว่าเว็บไซต์ แต่พวกเขามีปัญหา หากคุณไม่ทราบความแตกต่างระหว่างแอพพลิเคชั่นเว็บกับเว็บไซต์แอพพลิเคชั่นเว็บจะแตกต่างจากเว็บไซต์เพราะแอพพลิเคชั่นบนเว็บมีลักษณะเหมือนแอพทั่วไป.

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

เหตุใดเราจึงต้องมี Progressive Web Apps?

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

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

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

เหตุใดแอพพลิเคชั่นบนเว็บจึงมีเหตุผล?

ตามที่ระบุไว้ในรายงานแอพมือถือในสหรัฐอเมริกาในปี 2560 ของ comScore ผู้ใช้แอพใช้จ่ายเกือบ 77 เปอร์เซ็นต์ของเวลาในแอพสามอันดับแรกของพวกเขา, ในขณะที่ส่วนที่เหลือของแอพที่ไม่ได้ใช้งาน แต่ยังคงบล็อกทรัพยากรระบบรวมถึงหน่วยความจำ ยิ่งกว่านั้นมันยังแชร์ว่า ผู้ใช้ร้อยละ 50 ดาวน์โหลดแอพเป็นศูนย์ต่อเดือน. ข้อเท็จจริงนี้แสดงให้ผู้ใช้ลังเลที่จะติดตั้งแอพใหม่และด้วยเหตุนี้ PWA จึงมีความได้เปรียบ.

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

ยิ่งไปกว่านั้นแอพแบบเนทีฟมีราคาแพงกว่าเว็บไซต์มากถึงห้าถึงสิบเท่าหรือมากกว่านั้นขึ้นอยู่กับประเภทของโครงการ นอกจากนี้ค่าใช้จ่ายของพวกเขาสามารถเพิ่มขึ้นได้หากมีความจำเป็นในการพัฒนาแอพพื้นฐานสำหรับหลาย ๆ แพลตฟอร์ม (เช่น Android และ iOS) ด้วยรหัสฐานที่แตกต่างกัน อย่างไรก็ตาม PWA สามารถช่วยได้ ลดต้นทุนการพัฒนาที่สูง, ขอบคุณที่ให้การสนับสนุนแพลตฟอร์มที่หลากหลาย.

คุณสมบัติของ Web Apps ก้าวหน้า

Progressive Web Apps มีคุณสมบัติตรงมากมายที่ทำให้พวกเขาแตกต่างจากคู่ที่เรียบง่ายกว่าของพวกเขาเช่นแอปบนเว็บ (หรือที่ง่ายกว่า - เว็บไซต์):

• อ่อนไหว. ทำงานบนอุปกรณ์ทั้งหมดที่มีหน้าจอทุกขนาด.
• ออฟไลน์แรก. โหลดในเครือข่ายที่ช้าหรือไม่มีเลย.
• รู้สึกเหมือนแอพ. ดูและโต้ตอบเหมือนแอปเนทีฟ.
• ปัจจุบัน. อัปเดตด้วยตัวเองเกือบจะโปร่งใส.
• ปลอดภัยและมั่นคง. ใช้ HTTPS เพื่อโหลดทรัพยากรหน้า.
• ค้นพบ. ประโยชน์ของเนื้อหาให้กับเครื่องมือค้นหา.
• Re-engageable. มีส่วนร่วมอีกครั้งโดยใช้การแจ้งเตือน.
• สามารถติดตั้งได้. สามารถวางบนหน้าจอหลักของคุณ.
• ที่เชื่อมโยงกัน. โหลดหน้าเหมือนแอป แต่มี URL.

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

บันทึก: คุณสามารถอ่านเพิ่มเติมเกี่ยวกับคุณสมบัติและรายละเอียดอื่น ๆ ในโพสต์นี้.

การสร้างแอพพลิเคชั่นบนเว็บแบบก้าวหน้า?

Google ให้บริการ “รายการตรวจสอบ Web App ที่ก้าวหน้า” - รายการรายละเอียดเพื่อช่วยผู้เริ่มต้นสร้างแอปพลิเคชันเว็บแบบโปรเกรสซีฟ รายการไม่มีคู่มือนี้แบ่งปัน คุณสมบัติที่จำเป็นในการสร้าง PWAs - “PWA พื้นฐาน” และ “กปภ. ที่เป็นแบบอย่าง”; อดีตแสดงรายการสิ่งที่สำคัญสำหรับแอพพื้นฐานและแอปขั้นสูงสำหรับแอปขั้นสูง.

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

เป็นแอพพลิเคชั่นบนเว็บที่ก้าวหน้าในอนาคต?

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

Apple แนะนำฟีเจอร์ PWA (Web APIs) ใน Safari 11.1 รวมถึง Beacon API, Service Workers, Web App Manifest เป็นต้น ดังนั้นการนำ PWAs ไปยัง iOS ในไม่ช้าหากยังไม่ได้ดำเนินการ Google ได้รองรับ PWAs ใน Chrome สำหรับ Android แล้วและกำลังวางแผนที่จะนำไปใช้กับแพลตฟอร์มเดสก์ท็อปเช่นกัน Microsoft ยังเพิ่มการรองรับ PWAs ใน Microsoft Edge และจะแสดงรายการเหล่านั้นใน Microsoft Store เช่นกัน.

คุณคิดอย่างไร - เป็นแอพพลิเคชั่นบนเว็บแบบก้าวหน้าในอนาคต? แจ้งให้เราทราบโดยตรงที่ @aksinghnet หรือเขียนความคิดเห็นผ่านทางส่วนความคิดเห็นด้านล่างเพื่อแสดงความคิดเห็นของคุณ.