PWA คืออะไร
PWA คือ Progressive Web App เป็นเทคโนโลยีที่จะทำให้เว็บของเรา มีความใกล้เคียงกับ App บนมือถือมากยิ่งขึ้น รวมถึงความลื่นไหลในการใช้งาน, เข้าเมนูต่างๆอย่างง่ายดาย, การใช้งานเมื่ออยู่ใน Mode Offline, การทำ Push Notification ฯลฯ ในขณะเดียวกันก็เก็บข้อดีของเว็บไว้เช่น ความสดใหม่ของข้อมูล(อัพเดทกันได้ทันที ไม่ต้องไปอัพ App Store) และความเข้าถึงง่ายไม่ต้อง Install ให้ยุ่งยาก
การทำงานของ PWA PWA มีจุดเด่น 2 เรื่องหลักคือ ServiceWorker กับ Manifest.json
1.ServiceWorker
ServiceWorker คือ การกำหนดให้ Cache สิ่งต่างๆที่จำเป็นในเว็บของเราไว้ ซึ่งเราสามารถกำหนดได้ว่าจะให้ Cache ส่วนไหนบ้าง หรือไม่ Cache ส่วนไหน
มองกันง่ายๆครับ เราอาจจะบอกให้ ServiceWorker แคช Header, ปุ่มต่างๆ ของเว็บไว้ เพื่อครั้งต่อไปที่เข้าเว็บไม่ต้องเสียเวลามานั่งโหลดเจ้า Element เหล่านั้นใหม่ แต่ในส่วนเนื้อหาเนี่ยให้ไม่ต้องแคช ให้ดึงออกมาใหม่ทุกครั้ง หรือจะบอกให้ใช้ Strategy ต่างๆ เช่น Cache Then Network คือเข้าเว็บมาให้ดึงเนื้อหาจาก Cache ที่เก็บไว้ก่อนพอ Network โหลดเสร็จค่อยเอาเนื้อหาใหม่มา Re render เว็บของเราอีกครั้ง
ซึ่ง ServiceWorker ก็จะทำให้เว็บไซต์ของเราทำงานเร็วขึ้น ผิดหูผิดตา รวมถึงสามารถทำงานในโหมด Offline ได้ด้วย เนื่องจาก Browser สามารถไปดึง Element บางส่วนที่เรากำหนดไว้จาก Cache มาใช้งานได้เลย (ตัวอย่าง ลองเล่นกันดูครับ https://airhorner.com/ ทำงานได้ Offline เต็มรูปแบบ)
อีกหนึ่งหน้าที่สำคัญของ ServiceWorker คือ การทำ Push Notification นั่นเอง เนื่องจากเจ้า ServiceWorker เรายังสามารถทำการปิด Browser ของเราไปแล้วแต่ OS ก็สามารถทำการปลุก ServiceWorker ออกมาทำงานได้ ซึ่งก็ทำให้เราสามารถเขียน Code เพื่อรับ Message ที่ส่งมาได้
2.Manifest.json
เป็นไฟล์ JSON ที่เราใส่เข้าไปใน header ของ html ซึ่งหน้าที่ของมันมีมากมายอาทิเช่น
ทำให้เว็บของเรามี Icon สวยๆบน หน้า Home screen เมื่อผู้ใช้งานกด Add to Home screen เว็บของเรา
ก็สามารถเปิดเว็บแบบ Full screen mode ไม่มี Address bar เมื่อผู้ใช้งานกดเข้ามาจากหน้า Home screen
ควบคุมมุมมองแนวตั้ง แนวนอน ของผู้ใช้งานได้ ระบุ สี และ Icon ที่จะใช้มาประกอบเป็น Splash screen (หน้าจอ ตอนกดแอพขึ้นมา ลองดูรูปข้างบนครับ อันขวาสุด)
อีกเรื่องสำคัญคือเว็บไซต์ของเราจะใช้งานพวก ServiceWorker ได้จำเป็นต้องมี HTTPS นะครับ
เดี๋ยวนี้มี Cloudflare, Firebase ให้ลองเล่นกันฟรีๆครับ ซึ่งทำให้เราไปลองทำ HTTPS กันแบบฟรีๆ
ตัวอย่างการเขียนโปรแกรม PWA: https://github.com/googlecodelabs/your-first-pwapp/archive/master.zip
Source อ้างอิง
- PWA RoadShow Full day Slide: https://drive.google.com/drive/folders/0B55wxScz_BJtV1lGbTBOYlhLTVk
- Your First Progressive Web App (Code Lab):
https://codelabs.developers.google.com/codelabs/your-first-pwapp/index.html#0
- Client-Side Storage: https://www.html5rocks.com/en/tutorials/offline/storage/
- Web Storage API:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
- Udacity: Intro to Progressive Web Apps:
https://www.udacity.com/course/intro-to-progressive-web-apps--ud811
ขอบคุณข้อมูลจาก: https://medium.com/@timeff
การทำงานของ PWA PWA มีจุดเด่น 2 เรื่องหลักคือ ServiceWorker กับ Manifest.json
1.ServiceWorker
Source: Progressive Web App Roadshow 2016
ServiceWorker คือ การกำหนดให้ Cache สิ่งต่างๆที่จำเป็นในเว็บของเราไว้ ซึ่งเราสามารถกำหนดได้ว่าจะให้ Cache ส่วนไหนบ้าง หรือไม่ Cache ส่วนไหน
มองกันง่ายๆครับ เราอาจจะบอกให้ ServiceWorker แคช Header, ปุ่มต่างๆ ของเว็บไว้ เพื่อครั้งต่อไปที่เข้าเว็บไม่ต้องเสียเวลามานั่งโหลดเจ้า Element เหล่านั้นใหม่ แต่ในส่วนเนื้อหาเนี่ยให้ไม่ต้องแคช ให้ดึงออกมาใหม่ทุกครั้ง หรือจะบอกให้ใช้ Strategy ต่างๆ เช่น Cache Then Network คือเข้าเว็บมาให้ดึงเนื้อหาจาก Cache ที่เก็บไว้ก่อนพอ Network โหลดเสร็จค่อยเอาเนื้อหาใหม่มา Re render เว็บของเราอีกครั้ง
ซึ่ง ServiceWorker ก็จะทำให้เว็บไซต์ของเราทำงานเร็วขึ้น ผิดหูผิดตา รวมถึงสามารถทำงานในโหมด Offline ได้ด้วย เนื่องจาก Browser สามารถไปดึง Element บางส่วนที่เรากำหนดไว้จาก Cache มาใช้งานได้เลย (ตัวอย่าง ลองเล่นกันดูครับ https://airhorner.com/ ทำงานได้ Offline เต็มรูปแบบ)
Source: Progressive Web App Roadshow 2016
อีกหนึ่งหน้าที่สำคัญของ ServiceWorker คือ การทำ Push Notification นั่นเอง เนื่องจากเจ้า ServiceWorker เรายังสามารถทำการปิด Browser ของเราไปแล้วแต่ OS ก็สามารถทำการปลุก ServiceWorker ออกมาทำงานได้ ซึ่งก็ทำให้เราสามารถเขียน Code เพื่อรับ Message ที่ส่งมาได้
2.Manifest.json
เป็นไฟล์ JSON ที่เราใส่เข้าไปใน header ของ html ซึ่งหน้าที่ของมันมีมากมายอาทิเช่น
ทำให้เว็บของเรามี Icon สวยๆบน หน้า Home screen เมื่อผู้ใช้งานกด Add to Home screen เว็บของเรา
ก็สามารถเปิดเว็บแบบ Full screen mode ไม่มี Address bar เมื่อผู้ใช้งานกดเข้ามาจากหน้า Home screen
ควบคุมมุมมองแนวตั้ง แนวนอน ของผู้ใช้งานได้ ระบุ สี และ Icon ที่จะใช้มาประกอบเป็น Splash screen (หน้าจอ ตอนกดแอพขึ้นมา ลองดูรูปข้างบนครับ อันขวาสุด)
อีกเรื่องสำคัญคือเว็บไซต์ของเราจะใช้งานพวก ServiceWorker ได้จำเป็นต้องมี HTTPS นะครับ
เดี๋ยวนี้มี Cloudflare, Firebase ให้ลองเล่นกันฟรีๆครับ ซึ่งทำให้เราไปลองทำ HTTPS กันแบบฟรีๆ
ตัวอย่างการเขียนโปรแกรม PWA: https://github.com/googlecodelabs/your-first-pwapp/archive/master.zip
Source อ้างอิง
- PWA RoadShow Full day Slide: https://drive.google.com/drive/folders/0B55wxScz_BJtV1lGbTBOYlhLTVk
- Your First Progressive Web App (Code Lab):
https://codelabs.developers.google.com/codelabs/your-first-pwapp/index.html#0
- Client-Side Storage: https://www.html5rocks.com/en/tutorials/offline/storage/
- Web Storage API:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
- Udacity: Intro to Progressive Web Apps:
https://www.udacity.com/course/intro-to-progressive-web-apps--ud811
ขอบคุณข้อมูลจาก: https://medium.com/@timeff
ความคิดเห็น
แสดงความคิดเห็น