โปรเกรสซีฟ เว็บ แอป (PWA = Progressive Web Apps)

ปรับปรุง : 2565-03-23 (ปรับใช้จุฬาภรณ์ลิขิต)

PWA (Progressive Web Apps) คืออะไร

PWA คือ เทคโนโลยีในการเขียนเว็บเพจ หรือทำเว็บไซต์ให้ใกล้เคียงกับแอปพลิเคชันมากขึ้น โดยไม่ต้องไปเขียนแอปพลิเคชันให้ใช้งานบน Android หรือ iOS แล้วต้องคอยอัพเดทรุ่น เข้า App store หรือ Play store จุดเด่นของ PWA มี 3 ข้อ
- น่าเชื่อถือ (Reliable)
- เร็ว (Fast)
- ผูกพันธ์ (Engaging)
แล้วยังสั่ง Add to Home Screen บน Smart Phone ได้
wiki/Progressive_web_application
google.com/codelabs/pwa-training/pwa03--going-offline

1. บทเรียนการพัฒนา PWA

TiMeFF เขียน Blog เรื่อง Progressive Web App คืออะไร และ มาลองกันแบบง่าย ๆ วันเดียวเสร็จ เขียนแนะนำไว้หลายเรื่อง อาทิ การติดตั้ง web server ผ่าน chrome ที่ /web-server-for-chrome/ หรือ ดาวน์โหลดรหัสต้นฉบับ (Source Code) - your-first-pwapp ระบบรายงานอากาศ แล้วพบว่า ใน Google dev ที่ developers.google.com แนะนำการใช้ sublime เมื่อ download จาก sublimetext.com พบว่า สระลอย นั่งอ่านดู นักพัฒนาที่เคยใช้ก็แนะนำไปใช้ Atom ที่แนะนำโดย github แม้ใช้ font source code pro ก็ยังแก้ปัญหาสละลอยไม่ได้ เมื่อ download Atom จาก https://atom.io/ พบว่า ระบบปฏิบัติการในเครื่องผมคือ Windows XP ไม่สามารถใช้ Atom ได้ ปกติในเครื่องผมใช้ Editplus อยู่น่ะครับ สงสัยต้องใช้ตัวเดิม กลับมาที่ตัวอย่าง PWA ที่ลงแล้ว ใช้งานบน Webserver ได้เลย คือ Sprinkle - Example Progressive Web App มี source ที่ pwa.sprinkle.space/ ถ้ากำหนด root directory เป็นห้อง src ก็จะเปิด demo ตัวนี้ได้ เพราะใน source code ใช้ /js /css และ /fonts
thaiall.com/pwa/sprinkle-master/src

2. บทเรียนการพัฒนา PWA พบบล็อก เขียนเรื่อง PWA เกี่ยวกับตารางเที่ยวบิน หัวข้อ A Beginner’s Guide To Progressive Web Apps โดย Kevin Farrugia ซึ่งทดสอบแล้ว พบว่า ตัวอย่างใน github ใช้งานได้ดี ที่ incredibleweb.github.io/pwa-tutorial/
คุณลักษณะ (Characteristics Of A Progressive Web App)
1. ใช้ประโยชน์จากอุปกรณ์ได้มากกว่าเดิม (Progressive)
2. ถูกพบโดยเสิร์ชเอนจิน (Discoverable)
3. เชื่อมโยงได้ (Linkable)
4. ปรับการแสดงผลตามอุปกรณ์ (Responsive)
5. เหมือนแอป รีเฟรชน้อย (App-like)
6. เชื่อมต่อน้อย (Connectivity-independent)
7. สร้างความผูกพันธ์ (Re-engageable)
8. ติดตั้งเข้าหน้าจอหลักได้ (Installable)
9. สดใหม่ (Fresh)
10. ปลอดภัย (Safe)

3. index_manifest.json

การเพิ่มเว็บไซต์ที่ชอบ เป็น shortcut ไปวางบนโฮมสกรีน (home screen) เป็นบริการที่น่าสนใจ เมื่อใช้ใน browser ต่าง ๆ จะสร้าง shortcut ไปบนหน้าแรกของโทรศัพท์ (home screen) ทำให้เข้าถึงเว็บไซต์ได้อย่างรวดเร็ว เช่นเดียวกับการทำ bookmark หรือ favorite กรณีแรก เมื่อใช้ Opera หรือ Firefox หรือ Samsung Browser สั่งเปิดดูเว็บไซต์ที่ชอบ และอยากเปิดดูซ้ำในภายหลัง เช่น เว็บไซต์ของส่วนราชการ สมาคม ชมรม หรือองค์กรที่ทำงานอยู่ ทำได้โดยเลือก Add a website shortcut to home screen หรือ เพิ่มลงในหน้าจอหลัก หรือ เพิ่มไปที่ หน้าจอแรก

กรณีที่สอง ใช้ Chrome browser ซึ่งจะรองรับโค้ด material.min.js และ manifest.json ที่ทำงานแบบ PWA (Progressive Web App) ที่ทำให้เว็บไซต์ที่ถูกเพิ่มผ่าน browser จะเป็น application ไปวางใน application listing และเปิดใช้งานได้ หากต้องการเพิ่มไปที่ home screen ก็สั่งเพิ่มไปที่หน้าจอหลักได้ ส่วน icon นั้น ถ้ามีรูปแบบเป็น image/png และมีขนาดของ icon เป็น 192px x 192px จะถูกนำไปแสดงเป็น icon บน smart phone
เว็บไซต์ ที่คาดหวังว่า ผู้สนใจเนื้อหาจะเปิดเว็บไซต์ซ้ำ ย่อมต้องพัฒนาให้รองรับการเพิ่ม website เป็น application บน smartphone เพื่อให้สะดวกในการเข้าถึงเว็บไซต์ได้อย่างรวดเร็ว และเป็น icon หนึ่งให้สามารถบริหารจัดการให้เป็นระเบียบบนอุปกรณ์ ทั้งบน home screen และ application listing
tag #android #browser #shortcut #pwa #icon #logo

ตัวอย่างโค้ด
<head>
<link rel="icon" type="image/png" href="rsplogo144.png" />
<link rel="manifest" href="/pwa/index_manifest.json">
<script defer src="/pwa/material.min.js"></script>
</head>

{
  "name": "Progressive Web Apps",
  "short_name": "pwa",
  "description": "PWA = Progressive Web Apps",
  "start_url": "/pwa/index.html",
  "background_color": "teal",
  "theme_color": "teal",
  "display": "standalone",
  "icons": [{
  "src": "rsplogo144.png",
  "sizes": "144x144",
  "type": "image/png"
  }]
}

ใช้เวลาโหลดเพจ = 220 มิลลิวินาที สูง = 1605 จุด กว้าง = 1264 จุด

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com

Truehits.net

"ยอมรับคุกกี้"
เพื่อให้เว็บไซต์นำเสนอ
ประสบการณ์ที่ดีขึ้นสำหรับคุณ

เราใช้คุกกี้ (Cookies) เพื่อเพิ่มประสบการณ์ และความพึงพอใจของท่าน เพื่อให้เว็บไซต์สามารถใช้งานได้ง่าย และมีประสิทธิภาพยิ่งขึ้น โดยการเข้าใช้เว็บไซต์นี้ถือว่าท่านได้อนุญาตให้เราใช้คุกกี้ตาม นโยบายคุกกี้ของเรา อ่านเพิ่มเติม