จากบทความ Web App—บันทึกการทำ Todo List App ผมได้เรียนรู้การสร้าง Web App แบบง่ายๆ ไปแล้ว วันนี้ผมจะมาเสริมให้ Todo List App ของผมเป็น Progressive Web Apps เพื่อให้ทำงานได้แม้ว่าจะไม่ได้ต่อ Internet !!! ซึ่งเป็นข้อดีแบบหนึ่งของ Progressive Web Apps ครับ🔥🔥🔥
Progressive Web Apps (PWA) คืออะไร? ผมอยากให้เพื่อนๆ ลองทำความรู้จักกับ PWA ในคลิปนี้ครับ
สรุปฟีเจอร์หลักๆ โดยทั่วไป
- ใช้งานได้ทุก Browser และทุก Mobile Platform
- สามารถใช้งานได้ทั้ง Online และ Offline ได้เนื่องจากทำ Cache เก็บไว้ในตัว
- มีการอัปเดตข้อมูลเมื่อ Online
- Layout เหมือนกับ Application ผู้ใช้ไม่ต้องเรียนรู้ใหม่
- สามารถ Push Notification ได้ โดยที่ไม่ต้องเปิดเว็บหรือแอพทิ้งไว้
วันนี้ผมจะมาเปลี่ยน Todo List App ให้เป็น Progressive Web Apps แบบง่ายๆ โดยให้สามารถใช้งานได้ทั้ง Online และ Offline ได้เนื่องจากทำ Cache เก็บไว้ในตัว โดยในการทำให้เว็บของเราเป็น PWA นั้น พระเอกจะมีออกเป็น 2 คนหลักๆ คือ ServiceWorker กับ Manifest.json หากพร้อมแล้วก็มาลุยกันเลยครับ🎢
1. สร้าง ServiceWorker
— ServiceWorker มีหน้าที่กำหนดให้ Cache สิ่งต่างๆ ที่เราจำเป็นในเว็บของเราไว้ ซึ่งเราก็กำหนดได้ว่าจะให้ Cache ส่วนไหนไว้บ้าง ในตัวอย่าง Code ด้านล่างผมทำการ Cache ข้อมูลเว็บทั้งหมดไว้เลยครับ เพราะ Todo List App มีอยู่หน้าเดียว 🤣🤣🤣 สำคัญคือเว็บที่จะใช้งานพวก Service Worker ได้จำเป็นต้องมี HTTPS นะครับ (ถ้าใช้ Firebase Hosting ก็จัดให้ได้เลยครับ ดีจริงๆ)
2. สร้าง Manifest.json
— Manifest.json มีหน้าที่มากมาย เช่น
- ทำให้เว็บของเรามี Icon สวยๆ บนหน้า Home screen เมื่อ Users กด Add to Homescreen
- สามารถเปิดเว็บแบบ Full screen mode ไม่มี Address bar เมื่อ Users กดเข้ามาจากหน้า Homescreen
- ควบคุมมุมมองแนวตั้ง แนวนอน ของ Users ได้
- ระบุ สี และ Icon ที่จะใช้มาประกอบเป็น Splash screen ได้
— ลองดูตัวอย่าง Code ด้านล่างได้เลยครับ
3. เพิ่ม ServiceWorker กับ Manifest.json
— กลับไปที่ไฟล์ index.html ที่ได้ทำไว้แล้ว เพิ่ม ServiceWorker กับ Manifest.json ลงไปตามตัวอย่าง Code ด้านล่างได้เลยครับ😄
— ทำการตรวจสอบด้วย Lighthouse Audit ถ้าผ่านหมดก็ใช้ได้แล้วครับ 🧑🚀
ท้ายสุด เป็นอย่างไรบ้างครับการทำ Progressive Web Apps แบบง่ายๆ เพียงแค่ไม่กี่ขั้นตอน Web App ของเราก็สามารถใช้งานได้แบบ Offline แล้วครับ รายละเอียดอื่นๆ ยังมีอีกมากมาย ในการสามารถสร้าง Progressive Web Apps สามารถอ่านเพิ่มเติมได้ในอ้างอิงท้ายบทความได้ครับ…🖤🖤🖤
อ้างอิง
1. https://blog.heroku.com/how-to-make-progressive-web-app
2. https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605
3. https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
🔗 https://bit.ly/3c4tlmV
Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
🔗 http://bit.ly/36q8A12