แอพครองโทรศัพท์ของคุณ เป็นเวลานานที่แอพไม่ได้มีอิทธิพลต่อเดสก์ท็อปหรือเบราว์เซอร์ของคุณในลักษณะเดียวกัน ที่มีการเปลี่ยนแปลงในปีที่ผ่านมา Progressive Web App (PWA) กำลังเติบโตขึ้นและเปลี่ยนแปลงการโต้ตอบของเรากับเว็บไซต์ทุกประเภท
แต่ Progressive Web App คืออะไรกันแน่? กปภ. ทำอะไรที่เว็บไซต์ไม่ทำ? นี่คือสิ่งที่คุณต้องรู้เกี่ยวกับ Progressive Web Apps
Progressive Web App คืออะไร
Progressive Web Apps คือเว็บแอปพลิเคชันที่นำเสนอไซต์ปกติแก่ผู้ใช้ แต่ปรากฏเป็นแอปบนอุปกรณ์เคลื่อนที่ที่มาพร้อมเครื่อง กปปส. พยายามนำความสามารถในการใช้งานของแอปบนอุปกรณ์เคลื่อนที่แบบเนทีฟมาใช้กับชุดฟีเจอร์เบราว์เซอร์สมัยใหม่ โดยใช้ประโยชน์จากความก้าวหน้าในด้านการพัฒนาทั้งสองอย่างเต็มที่
อะไรเป็นตัวกำหนด กปภ.
- สากล :PWA ต้องทำงานได้อย่างราบรื่น (เกือบ) สำหรับผู้ใช้ทุกคนโดยไม่คำนึงถึงเบราว์เซอร์
- ตอบสนอง :PWA ควรใช้งานได้กับอุปกรณ์ทุกชนิด เช่น แล็ปท็อป แท็บเล็ต สมาร์ทโฟน และอื่นๆ
- การออกแบบ :การออกแบบควรเลียนแบบแอปบนอุปกรณ์เคลื่อนที่ที่มาพร้อมเครื่อง ซึ่งหมายถึงเมนูที่คล่องตัวและค้นหาได้ง่าย พร้อมการโต้ตอบที่เรียบง่ายสำหรับคุณลักษณะขั้นสูง
- ปลอดภัย :กปปส. ควรใช้ HTTPS เพื่อรักษาความปลอดภัยข้อมูลผู้ใช้
- ค้นพบได้: ผู้ใช้สามารถค้นหา PWA และสามารถระบุได้อย่างง่ายดายว่าเป็นแอปพลิเคชัน (แทนที่จะเป็น "ไซต์")
- การมีส่วนร่วม: กปภ. ต้องมีสิทธิ์เข้าถึงคุณสมบัติการมีส่วนร่วมดั้งเดิมเช่นการแจ้งเตือนแบบพุช
- อัปเดต: กปภ.ยังคงเป็นปัจจุบัน โดยให้บริการหรือไซต์เวอร์ชันล่าสุด
- การติดตั้ง: ให้ผู้ใช้ "ติดตั้ง" PWA ไปยังหน้าจอหลักได้อย่างง่ายดายโดยไม่ต้องใช้ App Store
- การแบ่งปัน: PWAs ต้องการเพียง URL เดียวในการแบ่งปัน โดยไม่ต้องติดตั้งใดๆ
อย่างที่คุณเห็น PWAs มุ่งหวังที่จะมอบประสบการณ์เว็บไซต์เต็มรูปแบบแก่ผู้ใช้ด้วยฟีเจอร์ที่ปรับปรุงให้ดีขึ้นและการออกแบบอินเทอร์เฟซของแอปที่มาพร้อมเครื่อง
Progressive Web App ทำงานอย่างไร
กุญแจสู่ Progressive Web Apps คือพนักงานบริการเบราว์เซอร์
พนักงานบริการคือสคริปต์ที่ทำงานอยู่เบื้องหลังของเบราว์เซอร์ของคุณ "แยกออกจากหน้าเว็บ เปิดประตูสู่คุณลักษณะที่ไม่ต้องการหน้าเว็บหรือการโต้ตอบกับผู้ใช้" คุณอาจใช้พนักงานบริการ เช่น การแจ้งเตือนแบบพุชและการซิงค์ในเบื้องหลังได้ในขณะนี้ แต่ PWA ในอนาคตอันใกล้จะทำให้สคริปต์เหล่านี้มีประสิทธิภาพมากขึ้น
ด้วยเหตุนี้ พนักงานบริการจึงเป็นรากฐานของมาตรฐาน PWA โดยใช้แคชของเว็บเพื่อให้ได้ผลลัพธ์ในทันที
ก่อนเจ้าหน้าที่บริการ สคริปต์แคชของเบราว์เซอร์ที่ใช้ได้คือ Application Cache (หรือ App Cache) คุณลักษณะแคชของแอปในบริการออฟไลน์แรกๆ ที่หลากหลาย แต่ค่อนข้างจะเกิดข้อผิดพลาดได้ นอกจากนี้ App Cache ยังมีข้อจำกัดที่เป็นที่รู้จักกันดีหลายประการ ดังที่ A List Apart อธิบายไว้
แต่ปัญหาหลักสำหรับนักพัฒนาคือการขาดการโต้ตอบโดยตรงกับวิธีการทำงานของ AppCache ทำให้นักพัฒนาไม่สามารถแก้ไขปัญหาที่เกิดขึ้นได้อย่างถูกต้อง ในทางกลับกัน เว็บไซต์และบริการที่มีฟังก์ชันการทำงานแบบออฟไลน์เต็มรูปแบบเป็นตัวเลือกที่มีความเสี่ยง
อย่างไรก็ตาม พนักงานบริการจะคงอยู่ตราบเท่าที่จำเป็นต้องดำเนินการ ใน PWA เมื่อคุณคลิกบางสิ่งหรือใช้คุณสมบัติ พนักงานบริการจะเริ่มดำเนินการ พนักงานบริการ (จำไว้ว่านี่คือสคริปต์) ประมวลผลเหตุการณ์โดยตัดสินใจว่าแคชออฟไลน์สามารถดำเนินการตามคำขอได้หรือไม่ แนวคิดคือมีแคชออฟไลน์หลายรายการสำหรับ PWA ให้เลือก ทำให้มีฟังก์ชันการทำงานออฟไลน์ที่หลากหลายขึ้น
นอกจากนี้ แคชไม่ได้มีไว้สำหรับเพิ่มความเร็วแบบออฟไลน์เท่านั้น ตัวอย่างเช่น คุณไปที่การประปาส่วนภูมิภาค แต่การเชื่อมต่อของคุณเป็นหย่อมมาก พนักงานบริการให้บริการแคชก่อนหน้า ทำงานได้อย่างสมบูรณ์โดยไม่รบกวนประสบการณ์ของคุณ
การสนับสนุนเบราว์เซอร์เว็บโปรเกรสซีฟ
มีข้อกำหนดสองประการสำหรับการใช้ Progressive Web App:เบราว์เซอร์ที่เข้ากันได้และบริการที่เปิดใช้งาน PWA
ก่อนอื่น มาดูเบราว์เซอร์กันก่อน คุณมีสองตัวเลือกในการตรวจสอบการรองรับเบราว์เซอร์ PWA อย่างแรกคือ Is Service Worker Ready ของ Jake Archibald? ซึ่งแสดงสถานะความพร้อมของ PWA ของเบราว์เซอร์หลัก ๆ และอินเทอร์เน็ตของ Samsung ได้อย่างง่ายดาย
สำหรับภาพรวมโดยละเอียดเพิ่มเติมของการสนับสนุนเบราว์เซอร์ PWA คุณควรตรวจสอบ Can I Use ซึ่งเป็นเว็บไซต์ที่เชี่ยวชาญในการแสดงรายการการใช้งานเว็บและเทคโนโลยีเบราว์เซอร์ต่างๆ ตามเวอร์ชันของเบราว์เซอร์ ตัวอย่างเช่น หากคุณป้อน "พนักงานบริการ" ในแถบค้นหา คุณจะพบตารางที่แสดงหมายเลขเวอร์ชันที่เบราว์เซอร์แต่ละเครื่องปรับใช้ผู้ปฏิบัติงานบริการ PWA
ตาราง Can I Use Service Workers ยืนยันว่าเบราว์เซอร์หลักทั้งหมดรองรับ PWA นอกจากนี้ยังแสดงให้เห็นว่า PWA รองรับเบราว์เซอร์เดสก์ท็อปทางเลือกและเบราว์เซอร์มือถือหลายตัว
แบ่งให้ละเอียดอีกนิด:
- เดสก์ท็อปเบราว์เซอร์ (รองรับเต็มรูปแบบ): Chrome, Firefox, Opera, Edge, Safari
- เดสก์ท็อปเบราว์เซอร์ (รองรับบางส่วน/เวอร์ชันที่ล้าสมัย): เบราว์เซอร์ QQ, เบราว์เซอร์ Baidu
- เบราว์เซอร์มือถือ (รองรับเต็มรูปแบบ): Chrome, Firefox, Safari, UC Browser, อินเทอร์เน็ต Samsung, Mint Browser, Wechat
- เบราว์เซอร์มือถือ (รองรับบางส่วน/เวอร์ชันที่ล้าสมัย): เบราว์เซอร์ QQ, เบราว์เซอร์ Android, Opera Mobile
ดังนั้น เบราว์เซอร์หลักทั้งหมดจึงสนับสนุน PWAs Microsoft Edge และ Safari เป็นส่วนเพิ่มเติมล่าสุดในรายการการสนับสนุนทั้งหมด ในทางกลับกัน ทั้ง QQ Browser และ Baidu Browser ต่างก็ใช้เวอร์ชันที่ล้าสมัยและได้ตกลงไปในระดับที่สองแล้ว
วิธีค้นหาและติดตั้ง Progressive Web App
เมื่อคุณทราบแล้วว่าควรใช้เบราว์เซอร์ใด คุณก็สามารถคิดเกี่ยวกับการค้นหาและติดตั้ง PWA ได้ สำหรับตัวอย่างนี้ ฉันจะใช้ Samsung Galaxy S8 กับ Google Chrome
เว็บแอปโปรเกรสซีฟมีอยู่ทุกที่ หลายบริษัทได้ปรับไซต์และบริการของตนเพื่อเสนอเวอร์ชัน Progressive Web App ในหลายกรณี คุณจะพบกับ PWA ก่อนเมื่อคุณไปที่หน้าแรกหรือไซต์มือถือของบริการ ซึ่งจะเรียกเพิ่มในหน้าจอหลัก กล่องโต้ตอบ
ดูวิดีโอด้านล่างเพื่อดูว่าจะเกิดอะไรขึ้นเมื่อคุณเยี่ยมชมไซต์มือถือ Twitter
แน่นอนว่าการเยี่ยมชมเว็บไซต์นับไม่ถ้วนและหวังว่าจะเห็นการเรียกใช้หน้าจอหลักนั้นไม่มีประโยชน์ อันที่จริงมันใช้เวลานานมาก โชคดีที่คุณไม่ต้องทำเช่นนั้น เนื่องจากมีไซต์สองแห่งที่ทุ่มเทให้กับการทำรายการ PWA
ขั้นแรก ให้ลองใช้เว็บนอก มันแสดงรายการ PWA ที่ค่อนข้างเหมาะสม โดยมีตัวเลือกใหม่ๆ ปรากฏขึ้นบ่อยครั้ง ต่อไป ให้ลอง pwa.rocks มีตัวเลือกน้อยกว่า แต่มี PWA ที่มีประโยชน์ที่คุณต้องการเพิ่มลงในอุปกรณ์ของคุณ
นอกจากนี้ ในเดือนมกราคม 2019 Chrome 72 สำหรับ Android มาพร้อมกับ Trusted Web Activity (TWA) TWA อนุญาตให้แท็บ Chrome เปิดในโหมดสแตนด์อโลน ในทางกลับกัน สิ่งนี้ทำให้ PWA สามารถนำเสนอใน Google Play App Store PWA สองสามรายการแรกที่จะปรากฏบน Google Play ได้แก่ Twitter Lite, Instagram Lite และ Google Maps Go โดยมีการตั้งค่าเพิ่มเติมให้ปรากฏเมื่อเวลาผ่านไป
เว็บแอปแบบโปรเกรสซีฟจะมาแทนที่แอปที่มาพร้อมเครื่องไหม
Progressive Web App เป็นขั้นตอนไฮบริดที่ยอดเยี่ยมระหว่างเบราว์เซอร์และแอปบนอุปกรณ์เคลื่อนที่ที่มาพร้อมเครื่อง PWAs จะแทนที่แอพดั้งเดิมทั้งหมดหรือไม่ นั่นเป็นเรื่องยากสำหรับฉัน PWA นั้นยอดเยี่ยมในฐานะข้อเสนอที่ไม่หนักเครื่อง แต่เนื่องจากปัจจุบัน PWA มุ่งเน้นที่การจำลองเว็บไซต์และบริการที่มีอยู่เป็นหลัก จึงไม่มาแทนที่แอปที่มาพร้อมเครื่อง
อย่างน้อยก็ไม่ใช่ในตอนนี้
PWAs ทำงานแม้ว่า ข้อมูลที่มีอยู่ในสถิติการประปาส่วนภูมิภาคสำรองนี้ด้วย ต่อไปนี้คือตัวเลขที่น่าสนใจบางส่วนที่แสดงให้เห็นว่า กปปส. กำลังเปลี่ยนแปลงการโต้ตอบของเรากับเว็บไซต์ที่ใช้กันทั่วไปอย่างไร:
- Trivago พบว่าการมีส่วนร่วมเพิ่มขึ้น 150% สำหรับผู้ใช้ที่เพิ่ม PWA ลงในหน้าจอหลัก
- หน้าแรกของ PWA ของ Forbes โหลดได้อย่างสมบูรณ์ในเวลาเพียง 0.8 วินาที ในขณะที่การแสดงผลต่อการเข้าชมเพิ่มขึ้น 10 เปอร์เซ็นต์ PWA ของ Forbes ยังเห็นความยาวของเซสชันผู้ใช้เพิ่มขึ้นเป็นสองเท่า
- Twitter Lite มีหน้าเว็บเพิ่มขึ้น 65 เปอร์เซ็นต์ต่อเซสชัน โดยมีทวีตเพิ่มขึ้นอย่างมาก 75 เปอร์เซ็นต์ นอกจากนี้ยังเป็นแบบโต้ตอบ "ในเวลาน้อยกว่า 5 วินาทีผ่าน 3G"
- อาลีบาบาได้รับคอนเวอร์ชั่นอุปกรณ์เคลื่อนที่เพิ่มขึ้น 76 เปอร์เซ็นต์
การประปาส่วนภูมิภาคยังไม่เป็นกระแสหลัก แต่ด้วยประโยชน์มากมายที่มีให้ เช่น การประหยัดพื้นที่ในอุปกรณ์ของคุณ คุณจะได้ยินเกี่ยวกับสิ่งเหล่านี้มากขึ้นในอนาคต
