Progressive web App คือ?

Published in

GDG Bangkok

3 min readJun 4, 2016

ถ้าให้บอกว่า Progrssive Web App เป็น เครื่องมือหรือเทคโนโลยีใหม่ ก็ อาจจะพูดไม่ได้เต็มปากจริงๆ แต่ Progressive Web App เป็นแนวทางการทำเว็บ ให้ออกมาเหมือน App

ในอดีต การที่เราต้องทำ installation app เป็นเรื่องจำเป็นมากๆ เพราะว่า การเข้าถึงอุปกรณ์ต่างๆในเครื่อง ยังยาก ไม่ว่าจะเป็น กล้อง Bluetooth, Wifi, Microphone หรือ Notification แต่ด้วยมาตรฐาน HTML ในปัจจุบัน เลยทำให้เว็บสามารถทำอะไรแบบนั้นได้หมดแล้ว รวมถึง Chrome version ใหม่ๆก็ เร็วมากๆ จนเว็บสามารถใแทนเว็บได้แล้ว ลองดูได้ง่ายๆ เว็บ M.facebook.com กับ Application Facebook ที่แทบจะเหมือนกันหมด และบนเว็บยังกินทรัพยาการน้อยกว่าด้วย

คราวนี้ Google ก็เลยมองว่าเอ้ย ลองมากำหนดแนวทางให้คนทำ App แล้ว Run บน Browser ดีกว่าง่ายดี User สบายด้วย ไม่ต้องมานั่ง ดาว์นโหลด App ทาง Google เลยกำหนดแนวทางไว้ 9 บ้อแบบนี้

Progressive — ใช้ได้ทุก Browser และ User ทุกนเข้าถึงได้ (ถึงแม้ตอนนี้ Feature หลักๆจะยัง Support ไม่ครบทุก Browser ก็ตาม)
Responsive — เหมาะกับทุก อุปกรณ์ ไม่ว่าจะเป็น tablet หรือ มือถือจอเล็กจอใหญ่
Connectivity independent -ทำงานได้ทั้ง online หรือ offline หรือแม้กระทั้งเน็ดห่วยๆ
App-like — เหมือน App ทำให้ออกมาหน้าตาเหมือน Application ทั่วๆไป
Fresh — อัพเดทตลอดเวลา พอเป็น Web ก็ไม่มีปัญหาเรื่องต้องมา อัพเดทจาก store หรือรอเป็นวันๆ
Safe — อยู่บน HTTPS เว็บเดี๋ยวนี้ถ้าให้ปลอดภัยก็ต้องอยู่บน HTTPS
Discoverable -ต้องรู้ว่าเป็น Application ด้วย มาตรฐาน W3C ที่กำหนดให้ web มี manifest ได้ ทำให้เราแยกไม่ยากเลยว่าอันไหนเป็น App อันไหนเป็นเว็บ
Re-engageable — ต้อง reengage กับลูกค้าได้ นั่นก็คือ Notification นั่นเอง
Installable — ต้องสามารถ Install ได้ โดยทั้งที่มันเป็น เว็บแต่ยัง Install ได้
Linkable — เป็น Link และ มี Url (แน่นอนอยู่แล้วจะทำเป็นเว็บแล้วมันก็ต้องมี Url สิ)

ด้วยแนวทาง 9 ข้อข้างบน Google ทำให้ Browser Chrome Support Progressive Web App มากมากมาย

Manifest.json

ในสมัยก่อนเวลาเราต้องการเขียนข้อมูลต่างๆของเว็บไซต์ เราก็มักจะฝังลงไปใน meta แต่เราลองดู meta ทุกวันนี้สิครับ Chrome ก็เลยบอกว่า ถ้าจะทำ progrssive web app แล้วจะ config พวก สี icon หรือ วิธีการ display ให้เราเอาไปใส่ไว้ใน manifest.json แล้วก็เอาไปใส่แบบนี้
<link rel=”manifest” href=”/manifest.json”>
แล้วใน manifest.json ก็เขียนประมาณนี้

Installation

ถ้าบอกว่าเป็น Application แล้ว ก็ต้อง install ได้ คราวนี้จะมาทำ Store ให้ Progressive web app อีก ก็คงจะเป็นเรื่องวุ่นวาย เพราะฉะนั้นการ install ของ Progrssive web app บน chrome ก็แค่ “Add to home screen”

Custom Chrome UI

พอ Install ได้ Chrome ก็เลยเปิดให้เราปรับอะไรๆได้นิดหน่อยถ้า App นั้นถูกเปิดมาจาก Icon ที่หน้า Home screen ของเราหลักๆ ณ วันนี้ก็
— สีของ status bar
— Orentation ว่าจะ แนวนอนหรือแนวตั้ง
— Icon ของ Application (ที่ไม่ใช่ Favicon)
— จะให้ โชว์ Address bar มั้ย
— Splash screen
ซึ่งทั้งหมด ก็สามารถเขียนลงไปได้ใน manifest.json

Service Worker

อันนี้แทบจะสำคัญสุดใน Progrssive Web App เลยก็ว่า ได้ เพราะว่า Service worker คือ Script จะ Run อยู่ใน Background ของ browser เพื่อจัดการสิ่งต่างๆโดยที่ ถ้าเราปิด Browser ไป ตัว script นี้ก็ยังจะรันอยู่เสมอ ปัจจุบัน Feature ใหญ่ๆที่ Support การ Run background โดยสมบูรน์ คือ Notification และ Background sync นอกจากสองอย่างนี้แล้ว Service worker ยังถูกเอามาใช้งานในการ ทำ cache asset ต่างๆของ Application เช่น Js css หรือ HTML เพื่อนที่เวลาเรา เข้าสู่ Mode offline Application ก็ยังจะทำงานได้จาก Cache ที่เก็บไว้ โดยเราสามารถสั่งให้ Application ของเรา Cache asset ทั้งหมดเมื่อเปิด และอัพเดทเรื่อยๆถ้ายังอยู่ในสถานะออนไลน์ก็ได้ คราวนี้เวลาเรามี Application บางอย่างที่ไม่ต้องใช้ internet ตลอดเวลา user ก็สามารถที่จะใช้ งานได้อย่างปกติเลย

Hardware API

จริงๆจะพูดว่าเป็นเพราะ Progressive web app ก็ไม่ได้ เพราะ ด้วย API ใหม่ๆของ HTML ทำให้เว็บในสมัยนี้เข้าถึง Hardward ได้มากขึ้นด้วยตัวเองอยู่แล้ว ทั้ง orentation, Microphone, Camera, Wifi, Bluetooth ทำให้การที่เราจะต้องไปพึ่ง Application ที่เป็น native ก็เป็นเรื่องที่จำเป็นน้อยลงไปบ้าง

Notification

ใน Chrome version ใหม่ๆเราสามารถ ส่ง Notification ผ่าน GCM (เปลี่ยนเป็น FCM แล้ว) มาในเครื่องได้โดยตรง โดยที่ไม่จำเป็นต้องเปิดหน้าเว็บทิ้งไว้ โดยความสามารถนี้ก็ทำบน service worker เพื่อให้มันสามารถทำงานเป็น Background ได้

สำหรับ ตัว Progrssive web app เองก็ยังอยู่ในการขั้นตอนการพัฒนามาตรฐานไปเรื่อยๆแต่ดูจากการดันสุดตัวของ Google แล้วต้องบอกว่ามันมาแน่นอน

สำหรับ Blog นี้คงไม่ได้มี Tutorial นะครับ แต่สัญญาว่ามาแน่นอน ถ้าดันเขียน tutorial ด้วย ยาวแน่นอน

Originally published at http://gdg.in.th on June 4, 2016.