แอปครอบครองโทรศัพท์ของคุณ นานกว่าทศวรรษ แอปไม่ได้มีอิทธิพลต่อเดสก์ท็อปหรือเบราว์เซอร์ในลักษณะเดียวกัน แต่สิ่งนี้เปลี่ยนไปในไม่กี่ปีที่ผ่านมา Progressive Web Apps (PWAs) กำลังเติบโตและเปลี่ยนแปลงการโต้ตอบของเรากับเว็บไซต์ทุกประเภท
แต Progressive Web App คืออะไรจริงๆ? PWA ทำอะไรที่เว็บไซต์ทั่วไปไม่ได้? นี่คือสิ่งที่คุณต้องรู้เกี่ยวกับ Progressive Web Apps
Progressive Web App คืออะไร?
Progressive Web Apps เป็นเว็บแอปพลิเคชันที่เสนอเว็บไซต์ทั่วไปให้ผู้ใช้ แต่ปรากฏเป็นแอปมือถือ Native PWAs พยายามนำความสะดวกในการใช้งานของแอป Native มาสู่ชุดคุณสมบัติของเบราว์เซอร์สมัยใหม่ โดยใช้ประโยชน์สูงสุดจากความก้าวหน้าทั้งสองด้าน
แล้วอะไรคือสิ่งที่กำหนด PWA?
- Universal (ครอบคลุม): PWA ต้องทำงานราบรื่น (เกือบจะทุกกรณี) สำหรับทุกผู้ใช้ ไม่ว่าจะใช้เบราว์เซอร์อะไร
- Responsive (ตอบสนอง): PWAs ควรทำงานกับอุปกรณ์ทุกชนิด เช่น โน้ตบุ๊ก แท็บเล็ต สมาร์ทโฟน ฯลฯ
- Design (ดีไซน์): ดีไซน์ควรเลียนแบบแอปมือถือ Native คือ เมนูเรียบง่ายหาง่าย โต้ตอบง่ายสำหรับฟีเจอร์ขั้นสูง
- Safe (ปลอดภัย): PWAs ควรใช้ HTTPS เพื่อรักษาความปลอดภัยข้อมูลผู้ใช้
- Discoverable (ค้นพบได้): ผู้ใช้สามารถหา PWAs ได้ และระบุได้ง่ายว่าเป็นแอปพลิเคชัน (ไม่ใช่แค่ "เว็บไซต์")
- Engagement (การมีส่วนร่วม): PWA ต้องเข้าถึงฟีเจอร์ Engagement แบบ Native เช่น Push Notifications
- Updates (การอัปเดต): PWAs อัปเดตตลอดเวลา ให้บริการเวอร์ชันล่าสุดของบริการหรือเว็บไซต์
- Installation (การติดตั้ง): อนุญาตให้ผู้ใช้ "ติดตั้ง" PWA ไปที่หน้าจอหลักได้ง่าย โดยไม่ต้องผ่าน App Store
- Sharing (การแชร์): PWAs ต้องการเพียง URL เดียวเพื่อแชร์ โดยไม่ต้องติดตั้ง
เห็นได้ชัดว่า PWAs มุ่งมั่นให้ผู้ใช้ประสบการณ์เว็บไซต์เต็มรูปแบบ พร้อมฟีเจอร์และดีไซน์อินเทอร์เฟซที่เรียบง่ายของแอป Native
Progressive Web App ทำงานอย่างไร?
กุญแจสำคัญของ Progressive Web Apps คือ Browser Service Workers
Service Worker คือสคริปต์ที่ทำงานเบื้องหลังของเบราว์เซอร์ "แยกจากหน้าเว็บ เปิดประตูสู่ฟีเจอร์ที่ไม่ต้องการหน้าเว็บหรือการโต้ตอบของผู้ใช้" คุณอาจใช้ Service Workers อย่าง Push Notifications และ Background Sync อยู่แล้ว แต่อนาคตของ PWA ใกล้ชิดให้สคริปต์เหล่านี้มีอำนาจมากขึ้น
ดังนั้น Service Workers จึงเป็นรากฐานของมาตรฐาน PWA ใช้ Web Cache สำหรับผลลัพธ์ที่เร็วเกือบทันที
ก่อน Service Workers สคริปต์ Cache ของเบราว์เซอร์ที่ใช้คือ Application Cache (หรือ App Cache) App Cache ใช้ในบริการออฟไลน์มากมาย แต่มีข้อบกพร่องบ้าง นอกจากนี้ App Cache มีข้อจำกัดที่รู้จักกันดี ตามที่ A List Apart อธิบาย
แต่ปัญหาหลักสำหรับนักพัฒนาคือขาดการโต้ตอบโดยตรงกับวิธีการทำงานของ AppCache อย่างแน่นอน หยุดนักพัฒนาแก้ไขปัญหาได้อย่างแม่นยำเมื่อเกิดขึ้น ตามลำดับ เว็บไซต์และบริการที่มีฟังก์ชันออฟไลน์เต็มรูปแบบเป็นทางเลือกที่มีความเสี่ยง
Service Workers แต่ทำงานนานเท่าที่การกระทำของพวกมันจำเป็น ใน PWA เมื่อคุณคลิกบางอย่างหรือใช้ฟีเจอร์ Service Worker จะกระโดดเข้ามาทำงาน สคริปต์ Service Worker (จำได้ไหมว่ามันคือสคริปต์) ประมวลผลเหตุการณ์ ตัดสินใจว่า Offline Cache สามารถตอบสนองคำขอได้หรือไม่ แนวคิดคือมี Offline Caches หลายอันสำหรับ PWA เลือกได้ ให้ขอบเขตฟังก์ชันออฟไลน์กว้างขึ้นมาก
เพิ่มเติม Cache ไม่ได้ใช้แค่เพื่อความเร็วออฟไลน์ ตัวอย่างเช่น คุณเข้า PWA แต่การเชื่อมต่อไม่ดีมาก Service Worker จะเสิร์ฟ Cache ก่อนหน้าที่ทำงานเต็มรูปแบบ โดยไม่รบกวนประสบการณ์ของคุณ
การรองรับเบราว์เซอร์สำหรับ Progressive Web App
มีข้อกำหนดสองข้อสำหรับการใช้ Progressive Web App: เบราว์เซอร์ที่รองรับ และบริการที่เปิดใช้งาน PWA
ก่อน มาดูเบราว์เซอร์ คุณมีสองทางเลือกในการตรวจสอบการรองรับ PWA ของเบราว์เซอร์ ทางแรกคือ Is Service Worker Ready? ของ Jake Archibald ซึ่งแสดงสถานะพร้อม PWA ของเบราว์เซอร์หลัก รวมถึง Samsung Internet อย่างสะดวก
สำหรับภาพรวมที่ละเอียดกว่า คุณควรดู Can I Use เว็บไซต์ที่เชี่ยวชาญในการรายการการนำเทคโนโลยีเว็บและเบราว์เซอร์ต่างๆ มาใช้ตามเวอร์ชันเบราว์เซอร์ ตัวอย่างเช่น หากคุณใส่ "service workers" ในแถบค้นหา คุณจะพบตารางแสดงหมายเลขเวอร์ชันที่แต่ละเบราว์เซอร์นำ Service Workers ของ PWA มาใช้
ตาราง Service Workers ของ Can I Use ยืนยันว่าเบราว์เซอร์หลักทุกรองรับ PWAs และยังแสดงการรองรับ PWA ของเบราว์เซอร์เดสก์ท็อปทางเลือกและเบราว์เซอร์มือถือหลายตัว
แยกวิเคราะห์เพิ่มเติม:
- เบราว์เซอร์เดสก์ท็อป (รองรับเต็มรูปแบบ): Chrome, Firefox, Opera, Edge, Safari
- เบราว์เซอร์เดสก์ท็อป (รองรับบางส่วน/เวอร์ชันเก่า): QQ Browser, Baidu Browser
- เบราว์เซอร์มือถือ (รองรับเต็มรูปแบบ): Chrome, Firefox, Safari, UC Browser, Samsung Internet, Mint Browser, Wechat
- เบราว์เซอร์มือถือ (รองรับบางส่วน/เวอร์ชันเก่า): QQ Browser, Android Browser, Opera Mobile
ดังนั้น เบราว์เซอร์หลักทุกรองรับ PWAs Microsoft Edge และ Safari เป็นผู้เข้าร่วมล่าสุดในรายการรองรับเต็มรูปแบบ ในทางกลับกัน QQ Browser และ Baidu Browser ใช้เวอร์ชันเก่า และลดระดับลงมาอันดับสอง
วิธีค้นหาและติดตั้ง Progressive Web App
ตอนนี้คุณรู้แล้วว่าควรใช้เบราว์เซอร์ไหน คุณสามารถคิดถึงการค้นหาและติดตั้ง PWA สำหรับตัวอย่างนี้ ฉันจะใช้ Samsung Galaxy S8 กับ Google Chrome
Progressive Web Apps อยู่ทุกที่ บริษัทมากมายปรับเว็บไซต์และบริการให้มีเวอร์ชัน PWA ในหลายกรณี คุณจะพบ PWA ครั้งแรกเมื่อเข้าหน้าหลักหรือเว็บไซต์มือถือของบริการ ซึ่งจะกระตุ้นกล่องโต้ตอบ Add to Home Screen
ดูวิดีโอด้านล่างเพื่อดู מה קורה เมื่อคุณเข้าชมเว็บไซต์มือถือของ Twitter
แน่นอน การเข้าเว็บไซต์เยอะๆ หวังจะเห็นการกระตุ้นหน้าจอหลัก ไม่ได้มีประโยชน์ จริงๆ แล้วมันกินเวลามาก ที่ดีคือคุณไม่ต้องทำนั้น เพราะมีเว็บไซต์สองสามแห่งที่จัดทำแคตตาล็อก PWA ไว้
ลอง outweb ก่อน รายการ PWA ที่ดีพอสมควร มีตัวเลือกใหม่ปรากฏบ่อย ต่อไปลอง pwa.rocks มีตัวเลือกน้อยกว่า แต่มี PWA ที่ใช้งานได้จริงที่คุณจะอยากเพิ่มในอุปกรณ์
เพิ่มเติม ในเดือนมกราคม 2019 Chrome 72 สำหรับ Android เปิดตัวพร้อม Trusted Web Activity (TWA) TWA อนุญาตให้แท็บ Chrome เปิดในโหมด Standalone ตามลำดับ ทำให้ PWAs สามารถปรากฏใน Google Play App Store ได้ PWAs แรกๆ ที่ปรากฏบน Google Play คือ Twitter Lite, Instagram Lite และ Google Maps Go พร้อมกับอีกมากมายที่จะมาต่อไป
Progressive Web Apps จะแทนที่ Native Apps ได้หรือไม่?
Progressive Web Apps เป็นขั้นตอนผสมผสานที่ยอดเยี่ยมระหว่างเบราว์เซอร์และแอปมือถือ Native PWAs จะแทนที่ Native Apps หมดไปหรือไม่? คำตอบคือ ไม่แน่นอนจากผม PWAs ดีในฐานะตัวเลือกที่เบา แต่เนื่องจากปัจจุบันมุ่งเน้นการจำลองเว็บไซต์และบริการที่มีอยู่ จึงไม่สามารถแทนที่ Native Apps ได้
อย่างน้อยก็ไม่ได้ในตอนนี้
PWAs ทำงานจริง ข้อมูลที่มีที่ PWA Stats ยืนยันเช่นกัน นี่คือตัวเลขน่าสนใจบางอย่างที่แสดงว่า PWAs กำลังเปลี่ยนการโต้ตอบของเรากับเว็บไซต์ที่ใช้บ่อย:
- Trivago พบการเพิ่ม Engagement 150% สำหรับผู้ใช้ที่เพิ่ม PWA ไปที่หน้าจอหลัก
- Forbes PWA "โหลดหน้าหลักเสร็จในแค่ 0.8 วินาที" ในขณะที่ Impressions ต่อการเยี่ยมชมเพิ่ม 10% ระยะเวลาการใช้งานของผู้ใช้บน Forbes PWA เพิ่มขึ้นสองเท่า
- Twitter Lite พบการเพิ่ม Pages per session 65% พร้อมการเพิ่ม Tweets 75% มากขึ้น ยัง Interactive "ในเวลาน้อยกว่า 5 วินาทีบน 3G"
- Alibaba พบการเพิ่ม Mobile Conversions 76%
PWAs ยังไม่ได้กลายเป็น Mainstream แต่กับประโยชน์มหาศาลที่พวกมันให้ เช่น การประหยัดพื้นที่บนอุปกรณ์ คุณจะได้ยินเกี่ยวกับพวกมากขึ้นในอนาคต
