Category Archives: progressive web apps

ทำปุ่มเมนู Animating Hamburger Icons

ทำปุ่มเมนูให้ทันสมัยแบบ Progressive web app ด้วย Animating Hamburger Icons แอพสมัยใหม่นั้นเป็นแบบนี้หมดแล้ว ปุ่มที่พูดถึงนี้ เวลาคลิกมันจะมี Animation ในการเปลี่ยนจาก Hamburger เป็น Arrow โดยสามารถเปลี่ยน Style ของปุ่มโดยใช้ sass config variable อ่าน Sass Basic http://sass-lang.com/guide โดยไฟล์ scss ที่สร้าง Style จะอยู่ที่ /Animating-Hamburger-Icons/sass/_components.hamburger.scss http://callmenick.com/post/animating-css-only-hamburger-menu-icons

Posted in progressive web apps | Leave a comment

Service Worker คืออะไร

Service Worker จะทำให้ Developer ใช้ความสามารถในการตรวจจับ Network ว่า Client เปิด/ปิด เน็ต โดยหลักการจะทำงานเป็น Background และยังนำมาใช้งานในส่วนอื่นได้มากมาย แล้วแต่เราจะ Implement (เป็นภาษา Javascript) ซึ่งมีประโยชน์มากๆใครที่รู้ก่อนก็ได้เปรียบอะนะ ใช้ทำอะไรหลักๆ 1. Web Push notification 2. Web Offline Access ข้อจำกัดของ Browser Service Worker Browser support ขณะนี้รองรับแทบจะทุก Browser แล้ว อ่านรายละเอียดเพิ่มเติม https://developers.google.com/web/fundamentals/getting-started/primers/service-workers https://developers.google.com/web/fundamentals/getting-started/codelabs/debugging-service-workers/

Posted in progressive web apps | Leave a comment

Web offline access ปิดเน็ตแล้วไม่ขึ้นไดโนเสาร์

วิธีการทำ Web offline access นึกถึงเวลาเราปิดเน็ตแล้วเข้าหน้าเว็บเจอไดโนเสาร์ ใครที่จะทำเรื่องนี้ เว็บของท่าน สิ่งที่ต้องมี 1.เหมือนเดิมต้อง HTTPS เพราะหลักการจะใช้ Service Worker ในการ fetch url เพื่อเช็คเน็ต 2. ตัวแปลที่จะบอกว่าเข้าจาก Device แบบไหนเช่น (desktop,mobile,tablet) เพื่อเราจะได้เลือก theme offline ถูกแบบ 1. โหลด UpUp Plugin และทำตามตัวอย่างไปเรื่อยๆ 2. เพิ่มเติมจากตัวอย่างให้ใส่ query string ต่อท้ายเสมอเพื่อแก้ปัญหาบางเว็บที่ทำ Lelavage cache เช่น UpUp.start({ … Continue reading

Posted in progressive web apps | Leave a comment

Web push notification using GCM + pushpad

การทำ Progressive web apps (Required HTTPS) ในส่วนของ Push notification มีหลักการทำงานโดยทั่วไปดังรูป ขั้นตอนการทำ Push notification โดยใช้ third party ผ่าน Pushpad Pro โดยเป็น Server Side (รวม Database) คอยเก็บเก็บ register id และส่ง register id ให้ GCM ส่งข้อความให้ลูกค้าของเรา โดยสรุปง่ายๆดังนี้ 1. สมัครใช้งาน Google Cloud Message(GCM) ปัจจุบันเป็น … Continue reading

Posted in progressive web apps | Leave a comment