Progressive Web App

PWA #1: 3 คุณสมบัติเข้าใจง่ายของ Progressive Web App ตามนิยามของ Google

เรื่องที่เกี่ยวข้อง -

Progressive Web App มักจะสร้างความสับสนให้กับพวกเราที่เริ่มศึกษาเรียนรู้ ซึ่งก็ไม่แปลกเพราะมันมีคุณสมบัติของ Web Application แบบเดิมที่เราใช้กันมาตั้งแต่ก่อนยุค Mobile Application ซะอีก

ซึ่งขนาดและขอบเขตของ Progressive Web App นั้น ก็ไม่ได้กว้างจนจับต้องไม่ได้ ซึ่งวันนี้พลขอเอาคุณสมบัติของ Progressive Web App ที่ Google นิยามมาสรุป เป็น 3 อย่างด้วยกัน

Reliable

ผู้ใช้มักจะมีความคาดหวังในตัวแอพพลิเคชั่นพื้นฐาน คือกดเปิดมาแล้ว มันต้องทำงานได้

ไม่ว่าจะต่อเน็ต หรือไม่ต่อเน็ตก็ตาม

พวกเราเคยมีความเข้าใจว่า เว็บแอพพลิเคชั่น จะเปิดใช้งานได้ จะจัดการข้อมูลได้นั้น ต้องให้อุปกรณ์ต่อกับอินเตอร์เน็ตตลอดเวลา

แต่ด้วยกลไกที่เรียกว่า Service Worker เป็นสิ่งที่จะทำให้นักพัฒนาควบคุมการทำงานของแอพพลิเคชั่นในการเรียกใช้ข้อมูลต่างๆ จาก Web server หรือหรือจะเลือกเป็น cache ก็ได้

ทำให้ตัวแอพสามารถเลือกดาวน์โหลดข้อมูลที่จำเป็นมาเก็บไว้ในแอพพลิเคชั่นก่อนได้ เวลากดเปิดจากหน้า Home screen ก็สามารถแสดงข้อมูลได้ทันที

Fast เร็ว ลื่น ไหล

หากพูดถึงการเข้าถึงเว็บต่างๆ Google บอกสถิติว่า 53% ของคนเข้าเว็บ จะออกจากเว็บเรา ถ้าใช้เวลาโหลดเกิน 3 วินาที คุณสมบัติด้านความเร็วจึงกลายเป็น 1 ใน 3 ที่ Google กำหนดขึ้นมา

โดยเฉพาะในโลกที่ กลุ่มลูกค้าของเราใช้ Smart phone และ tablet มากกว่าคอมพิวเตอร์ ทำให้การควบคุมประสิทธิภาพนั้นมีขอบเขตที่ท้าทายมากกว่าเมื่อก่อนนัก

Engaging

การเข้าถึง Progressive Web Application นั้น สามารถทำได้จากหน้า Home screen ทันที

ไม่ต้องมีการโหลดผ่าน App Store หรือ Play Store ผู้ใช้งานสามารถเลือกที่จะเซฟตัวแอพเก็บไว้ในเครื่องได้เลย

กลไกนี้ เกิดจากสิ่งที่เรียกว่า Web Manifest ซึ่งทำให้เราสามารถควบคุมตัวเว็บที่เซฟไว้ในเครื่องได้ ไม่ว่าจะเป็น App Icon, รูปแบบของการเปิดปิดแอพ, รวมไปถึง Web Push Notification

ง่ายใช่ไหมล่ะ?

ดังนั้น การทำ Progressive Web App ไม่ได้จำกัดอยู่ที่เทคโนโลยีตัวใดตัวหนึ่ง ไม่ว่าเราจะใช้ React, Angular, VueJS หรือแม้แต้ JQuery เราก็สามารถเปลี่ยนเว็บที่มีอยู่เดิมของเราเป็น Progressive Web App ได้ครับ

จะทำกันยังไง? วางแผนแบบไหนดี? กดติดตามได้ผ่านช่องทางต่อไปนี้ครับ

อ้างอิง – Google: Progressive Web App

Loading Facebook Comments ...
Menu