กระจ่างแม้กระทั่งในใจเด็กเล็ก! Progressive Web Apps หรือที่เรียกกันย่อๆ ว่า PWAs เป็นเหมือนเกมส์ปริศนาที่ซ่อนอยู่ในเว็บไซต์ทั่วไป เมื่อพบหรือแก้ได้แล้ว เว็บไซต์เหล่านั้นก็จะแปลงร่างเป็นแอปพลิเคชันที่มีลูกเล่นมากขึ้น วิ่งเร็วขึ้น และสามารถใช้งานได้แม้ว่าเราจะไม่ได้เชื่อมต่อกับอินเทอร์เน็ต!
เพื่อให้เข้าใจได้ง่ายขึ้น ลองนึกถึงเว็บไซต์ปกติที่เราเข้าไปดูข้อมูลหรือเล่นเกมส์ออนไลน์กันอยู่เป็นประจำนั้นแหละ แต่ถ้าเว็บไซต์นั้นเป็น PWA มันก็จะมีพลังพิเศษ คือเมื่อเรา "บันทึก" หรือ "ติดตั้ง" เว็บไซต์นั้นลงบนโทรศัพท์หรือคอมพิวเตอร์ของเราแล้ว เราจะสามารถที่จะเปิดมันขึ้นมาใช้งานได้ตลอดเวลา เหมือนกับแอปที่โหลดมาจาก App Store หรือ Google Play นั่นเอง
เพราะ PWAs มีประโยชน์อย่างมากในโลกของการเขียนโปรแกรม เนื่องจากมันช่วยให้มีตัวเลือกเพิ่มขึ้นสำหรับนักพัฒนาเว็บไซต์ในการสร้างประสบการณ์ที่ดีกว่าให้กับผู้ใช้งาน เราไม่จำเป็นต้องเขียนโค้ดแอปแบบผู้ใช้งานแต่ละแพลตฟอร์ม (เช่น iOS หรือ Android) แยกกันอีกต่อไป แต่สามารถสร้างเว็บไซต์ที่สามารถแปลงร่างเป็นแอปได้ง่ายๆ แล้ว
ลองนึกถึงโปรแกรมเขียนโปสการ์ดที่เราสามารถเข้าไปออกแบบและส่งโปสการ์ดให้กับเพื่อนๆ ได้เลยผ่านเว็บไซต์ ถ้าโปรแกรมนี้เป็น PWA เราสามารถที่จะบันทึกมันลงโทรศัพท์หรือคอมพิวเตอร์และใช้งานได้เหมือนแอปโดยไม่ต้องมีอินเทอร์เน็ต เราสามารถออกแบบและกำหนดข้อความลงบนโปสการ์ดได้เสมือนว่าเรากำลังใช้งานแอป!
เพื่อให้เข้าใจมากขึ้น เราลองมาดูโค้ดการสร้าง PWA สำหรับเว็บไซต์โปสการ์ดแบบง่ายๆ ด้วยการสร้าง Service Worker เพื่อให้เว็บไซต์สามารถทำงานแบบออฟไลน์ได้:
// service-worker.js
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('pwa-postcard-cache').then((cache) => {
return cache.addAll([
'/index.html',
'/style.css',
'/app.js',
'/image-library/offline-image.jpg'
]);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
ข้างต้นคือตัวอย่างโค้ดของ Service Worker ที่จะช่วยให้เว็บไซต์สามารถแสดงผลคอนเทนต์ที่บันทึกไว้ล่วงหน้า (เช่น หน้าเว็บหลัก, ไฟล์สไตล์, สคริปต์, และภาพที่มีอยู่ในแคช) แม้ว่าผู้ใช้จะไม่มีการเชื่อมต่ออินเทอร์เน็ตก็ตาม
การพัฒนาเว็บไซต์ที่เป็น PWA อาจฟังดูซับซ้อน แต่ผลที่ได้นั้นคุ้มค่าอย่างมากกับประสบการณ์ผู้ใช้ที่เหนือระดับ ผู้เรียนที่ EPT จะได้เรียนรู้วิธีการสร้างแอปพลิเคชันประเภทนี้ เพื่อให้พร้อมสำหรับการประยุกต์ใช้ทักษะได้ในอนาคต!
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM