จบลงไปแล้วครับกับ Progressive Web App Dev Summit 2016 Bangkok โดยงานจัดที่ โรงแรม W Hotel ทางผมขอสรุปเนื้อสำคัญในงานให้ผู้อ่านที่พลาดไม่ได้ไปงานกันครับ

1-12-2559-16-58-29

เปิดงานด้วยการโชว์ Stat ก่อนครับว่า 13% ผู้ใช้งานจะใช้ App บนเว็บ App แล้่วก็มี 87% ที่ใช้งานบน App ครับ

1-12-2559-16-59-33

จุดสำคัญที่ทาง Google เน้นตลอดครับ First package ต้องการก่อน 3 วินาทีครับ บ้านเลยก็ภายใน 3 วินาทีเว็บต้องโหลดอะไรบางอย่างขึ้นมาให้ User เห็นครับไม่งั้นจบเห่ครับ User ปิดเว็บทิ้งทันทีครับ

1-12-2559-17-01-46

พระเอกของงานนี้เลยก็ว่าได้ครับคือ Service Worker ครับ โดยทาง Dev จะเป็นผู้สั่ง Service worker ให้ Cache อะไรเก็บไว้ในเครื่องบ้างครับ ตั้งแต่รูป ไฟล์ CSS Javascript ต่างๆ ซึ่งเจ้าตัวนี้แหละครับเมื่อ User เปิดเว็ยบครั้งต่อไปจะเร็วมากๆ รวมไปถึงสามารถทำให้ User ใช้งาน Web แบบ Offline ได้ด้วยครับมันคือหัวใจของ Progressive web app เลยครับ

1-12-2559-17-07-55

Google เริ่มเอาจิงกับ HTTPS มากขึ้นครับโดยตัว Service worker เนี่ยต้องใช้งานผ่าน HTTPS เท่านั้นครับ นอกจากเวลา Dev สามารถทำ Localhost ได้ครับแต่เมื่อไรที่ขึ้น Production ต้องผ่าน HTTPS เท่านั้นครับผม

1-12-2559-17-04-54

โดย Service Worker จะมี Life cycle ดังนี้ครับ โดยการทำงานคือเปิดเวลาเราเปิดเว็บ Service worker ก็จะ Register ครับแล้วก็ทำการ Cache ไฟล์ต่างๆโหลดไฟล์ Static ต่างๆมาเก็บไว้ครับถ้าไม่มีปัญหาก็จะ จบการ install แล้วเข้าสู่ Activated ครับถ้าโหลดไฟล์ไม่ครบไม่ผ่านก็จะตก Error แล้วก็จะทำการ Install ใหม่ครับ

1-12-2559-17-11-501-12-2559-17-12-031-12-2559-17-12-131-12-2559-17-12-22

ส่วนนี้เป็นการโชว์การ Cache ไฟล์การอัพเดทไฟล์ Cache ต่างๆให้ดูครับ

1-12-2559-17-13-50

เราสามารถดูรายละเอียดต่างๆได้ใน Chrome Dev tools ครับ

1-12-2559-17-15-26

รวมถึงรายละเอียดไฟล์ต่างๆที่ แคชไว้ครับผม

1-12-2559-17-16-17

1-12-2559-17-17-37

1-12-2559-17-18-04

Notification ของ Web Progressive สามารถใส่ Notification ได้ครับแล้วยังสามารถใส่ปุ่มได้ด้วยเพื่อ UX ที่ดีสำหรับ User ครับ

1-12-2559-17-18-571-12-2559-17-19-041-12-2559-17-19-12

เราสามารถเช็ตคะแนนของเว็บได้ด้วย Plugin Light house บน Chrome สามารถเช็คว่าเว็บเรามีการ Cache หรือป่าว รวมถึงว่าต้องปรับแต่งเว็บตรงไหนเพิ่มเติมบ้าง

1-12-2559-17-18-481-12-2559-17-21-17

ตัวควบคุมการทำงานเริ่มต้นทั้งหมดเราจะทำผ่าน Manifest.json รูป Icon App จะให้เป็นอะไร เปิด App บนมือถือหน้าแรกจะให้เข้าไปที่ไหน

1-12-2559-17-22-48

1-12-2559-17-23-14

1-12-2559-17-25-53ส่วนต่อไปจะเกี่ยวกับ AMP (Accelerated Mobile Pages) ครับตัว AMP เนี่ย Google จะแคชเฉพาะตัวหนังสือกับรูปไว้ที่ CDN ของ Google เลยเพราะงั้นการเขียนเว็บแบบ AMP จะไม่เกี่ยวอะไรกับ Javascript เลยครับ ซึ่งถ้าเว็บที่ไม่ใช่ AMP เวลาเข้าเว็บก็จะวิ่งไปดึงเว็บจากประเทศที่ใกล้ที่สุดมาครับ

1-12-2559-17-26-46

เปรียบเทียบให้ดูหมัดต่อหมัดระหว่าง AMP (Accelerated Mobile Pages) กับ PWA (Progressive Web App )1-12-2559-17-28-16

AMP จัดการโดย HTML ธรรมดา แต่ถ้าเป็น PWA จัดการโดย Jason API

1-12-2559-17-29-08

ตัวอย่าง PWA แต่ละภาษาครับผม

มาถึง Service ใหม่ของ Google คือ Auto fill form กับ Payment API

1-12-2559-17-31-10

คือการให้ Google ช่วย Auto fill form

1-12-2559-17-29-451-12-2559-17-31-49

วิธีการเขียนเพื่อให้รองรับก็ประมาณนี้

1-12-2559-17-31-40

เค้าโม้ไว้ว่าจะทำให้ยอดขึ้นถึง 25% เลยนะครับ น่าสนใจมาก

ส่วนต่อไปของใหม่และน่าสนใจมากครับ กับ Google Payment API

1-12-2559-17-37-58

คือ Service ที่ช่วยย่นขั้นตอนการชำระเงินให้เหลือแค่กดปุ่มชำระเงินแล้วจบเลย !!!! งงมั้ย

1-12-2559-17-38-17โดยตรงนี้ Google ไม่ได้เป็นคนทำ Payment นะครับแต่เป็นการถาม User ว่ายืนยันจะให้ข้อมูลกับทางเว็บไหมโดยถ้าตอบตกลง Service Google จะส่งข้อมูลเป็น Json ไฟล์ ให้กับทางเว็บให้นำไปทำการชำระเงินได้เลย ก็จะทำให้เว็บขายของสามารถตัดหน้า Payment ออกไปได้เลยเหลือแค่กดชำระเงินเสร็จ แล้วก็ไปหน้าชำระเงินสำเร็จแล้วได้เลย

1-12-2559-17-39-471-12-2559-17-39-581-12-2559-17-40-061-12-2559-17-40-19

วิธีการใช้งานก็ประมาณนี้ครับผม

 

สุดท้ายนี้ ส่วนไหนผู้เขียนมีการบรรยายตรงไหนผิดพลาดต้องขอภัยมา ณ ที่นี้ด้วยครับ เพราะงานเป็นภาษาอังกฤษล้วน ผู้เขียนอังกฤษไม่แข็งแรงเท่าไร

 

ทดลองเล่น CodeLab เพิ่มเติมเพื่อความเข้าใจได้ที่นี่ครับ https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0