-
เมื่อเราต้องเอา PWA ขึ้น Store
ตอนทำ Saifah.app เราก็กะว่าจะมีแค่ version PWA เพราะไม่อยากจะต้องมาทำ Native บวกกับทำไม่เป็น แต่พอทำจริงๆแล้วก็เจอ คน Comment ว่า “ไม่มีใน store หรอ” “เมื่อไหร่จะลง Store” ไอ้เราก็ไม่อยากจะเขียนใหม่เพราะวุ่นวาย เราก็เลยนึกถึง https://www.pwabuilder.com/ ที่จะช่วย pack PWA ของเราให้เอาขึ้น Store ได้ วิธีใช้งาน หลักๆคือใช้งานง่ายมากๆแค่เอา URL ไปแปะบนหน้าเว็บ แล้วตัว PWA builder จะบอกเราว่า เว็บของเรามีปัญหาอะไรที่ควรแก้ก่อนมั้ยพอแก้เสร็จแล้วเราก็สามารถกด download package ที่จะเอาขึ้น Store ของแต่ละ platform ออกมาได้เลย แต่ละ Platform ก็จะมี detail ให้เราต้องกรอกต่างกันออกไปส่วนใหญ่ก็เป็นพวก version แล้วก็พวก Icon แต่ตัว PWA builder จะพยายามไปดึงออกมาจาก…
-
หมดปัญหากับการโหลด file ใหญ่เมื่อคุณใช้ background fetch
ตอนผมทำ Postr.me ก็จะมีปัญหานึงคือ ตอนที่เราสร้าง video มันจะโหลดนานมากๆ พอเป็นมือถือมันก็จะลำบากมากเพราะจะย่อจอไม่ได้ก็เลยนึกได้ว่าเว็บมันมี feature background fetch นี่หน่า ซึ่ง feature นี้เนี่ยมันถูกสร้างมาเพื่อนการ Download file บน background โดยเฉพาะเลย โดยมันอาศัยความสามารถของ service worker ในการทำงานอยู่ทั้งที่เว็บปิดไปแล้ว อย่างแรกที่คุณต้องมีคือ serviceworker ที่ติดอยู่กับตัวเว็บก่อน หลังจากนั้นก็ง่ายเลย ก็แค่เรียกใช้ code ตามนี้ https://gist.github.com/thangman22/369bdfe257bfd7681efeb3f296badbc1 อันนี้ก็เป็นอันจบฝั่งหน้าบ้านไป ส่วน downloadTotal ถ้าเราไม่รู้ก็ปล่อยว่างไว้ได้เลย พอ code เริ่มทำงานส่วนของ UI บนมือถือของเราก็จะมีหน้าตาแบบนี้ ความนี้ดูเหมือนว่ามันจะจบแต่ไม่จบนะครับ เพราะว่าเวลามัน download จบเนี่ยถ้าเราไม่ handle เอาไว้มันก็จะ download เฉยๆเลยคราวนี้เพื่อให้เราเอามาใช้ได้เราต้องเอาไปใส่ใน อะไรซักที่ก่อน ซึ่งอาจจะเป็น cache API ก็ได้้ ซึ่งก็ต้องไปเพิ่ม…
-
10 คำถามกับเรื่อง Installation ของ Progressive Web App ที่คนมักสงสัยและชอบถามกันบ่อย
ตั้งแต่เริ่มพฑูดเรื่อง PWA ก็เริ่มจะมีคนถามคำถามซ้ำๆเกี่ยวกับเรื่องการติดตั้งอยู่หลายคำถามวันนี้ผมจะมา list ให้อ่านกันครับว่ามีคำถามอะไรบ้างที่คนชอบสงสัยและชอบถามกันเข้ามา 1. จะบังคับ Banner ได้มั้ยว่าจะให้ขึ้นตอนไหน ถ้าใครที่หน้าเว็บมี manifest.json และมี service worker จะคงเคยเห็นว่า มี banner บอกว่าให้ add to home screen โผล่ขึ้นมาซึ่งก็มีคนเคยสงสัยว่า จะบังคับให้มันโผล่ขึ้นมาได้มั้ยคำตอบก็คือ ไม่ได้ครับ เราบังคับให้มันขึ้นมาไม่ได้เลย โดย เงื่อนไขที่มันจะโผล่ขึ้นมาหรือไม่โผล่ขึ้นมาอ้างอิงตามนี้เลย เพราะฉะนั้นแล้วตอบคำถามที่ว่า จะบังคับ banner ขึ้นมาได้มั้ยคำตอบคือ “ไม่ได้ครับ” 2. ทำ Banner install เองได้มั้ย ข้อนี้ขอตอบว่า ได้ครับ แต่ว่ามันอาจจะไม่ได้เป็นอย่างที่ใจนึกเท่านั้นเอง สาเหตุที่ผมบอกแบบนั้นเพราะว่า วิธีการการสร้าง Banner ของเราขึ้นมาเองจะเป็นการดัก event ที่ชื่อว่า beforeinstallprompt ซึ่ง event นี้จะถูกสร้างขึ้นมา ตอนนี้ Banner install…
-
มาเข้าใจ Add to Home screen Banner บน Chrome ใหม่กันหน่อย (สำคัญ)
เดิมแล้ว ถ้า User เข้ามาในเว็บไซต์ที่มี manifest + serviceworker ติดตั้งอยู่ แล้วเข้าตาม Add to Home Screen criteria (ลองกด link ไปดูครับ ไม่ได้พิมพ์ไว้กลัว Google ปรับ Criteria) ตัว banner หน้าตาด้านล่างนี้จะโผล่มา และเมื่อ user ตอบตกลง ก็จะมี Dialog แบบนี้โผล่ขึ้นมา แต่ใน Chrome 68 มันจะไม่เป็นแบบนั้นอีกแล้วววว!!!!! ใน Chrome 68 จะไม่มี การแสดง banner นี้ขึ้นมาอีกแล้ว แต่จะเปลี่ยนไปเป็นการ fire event ที่มีชื่อ ว่า beforeinstallprompt ขึ้นมาแทน แล้วถ้าเราต้องการให้ dialog ที่มีหน้าตาอย่างข้างบนแสดงออกมา เราต้องสั่ง ให้มันโชว์เองด้วย code…
-
Why Store is not necessary for Progressive Web App
This article is based on my point of view and I’m open for any suggestion and another point of view Current stage After Microsoft allow developer submit PWA to Microsoft store it look like future of PWA is shining up. iOS is the latest browser supported PWA even is not perfect much but user…
-
Progressive Web App กำลังไม่ได้อยู่แค่ Mobile และ Chrome อีกต่อไป
ปีที่ผ่านมาเรามักจะเห็น Progressive web app ถูกพูดในมิติของการเอามาแทนที่ Mobile App เป็นอย่างมาก แต่จริงๆแล้วด้วยตัวของ Technology แล้ว Progressive Web App ไม่ได้จำกัดอยู่ เพียงการเอามาใช้แทน Mobile App เพียงอย่างเดียว นอกจากนั้นแล้วในปีที่ผ่านมาเนื่องจาก Google เองเป็นพูดถึง Progressive Web App ค่อนข้างเยอะมากทำให้คนโดยทั่วไปก็ยังมีความเข้าใจผิดๆว่า Progressive Web App จะใช้ได้แต่บน Chrome เท่านั้น แต่ ณ วันนี้ทุกอย่างเปลี่ยนไปแล้ว เพราะ Progressive Web App กำลังจะกลายเป็น Solution ที่จะอยู่ในทุกๆ Platform และ OS Add to home screen ได้ทุก Browser แล้ว Desktop is coming.. เริ่มด้วย…
-
ทำไมเราถึงน่าลองทำ Lite version ด้วย Progressive Web App
บทความนี้แปลจากอีกบทความนึงที่ผมเขียนเป็น ภาษาอังกฤษ อาจจะมีบางอย่างแปลมาไม่เหมือนเพราะไม่รู้จะแปลแบบไหน อย่าว่ากันนะครับ Lite version คืออะไร แล้วทำไมต้อง Lite version Back to basic มือถือทุกวันนี้ เร็วขึ้นและถูกลง แต่ไม่ใช่ว่าทุกเครื่องจะมาพร้อม CPU แรงๆ GPU ดีๆ เรายังมีทั้งมือถือราคา 4,000 บาท ไปจนถึง 40,000 บาท นอกจากนั้นบนโลกนี้ยังมีการเชื่อมต่ออินเตอร์เน็ตที่เป็น 2G อยู่ บางคนอาจจะคิดว่าเหลือไม่เยอะแล้ว แต่จาก สถิติจากงาน GoogleChrome Dev Summit 2017 บอกไว้ว่า “60% ของการเชื่อมต่อบนโลกนี้ยังเป็น 2G อยู่” ครั้งแรกที่ได้ยินผมคิดเลยว่านี่หลอกกันแน่ๆ แต่เอาเข้าจริง มันจริงครับ จากเหตุผลที่บอกไปทั้งหมดเรายังมีบางกลุ่มของ ผู้ใช้ที่ไม่ได้ต้องการ Feature ทั้งหมด 100% ของเรา แต่เค้าอาจจะต้องการ 20%–30% ที่สามารถใช้งานได้อยากเต็มประสิธิภาพของมือถือเค้า ไม่ใช่แค่ผู้ใช้ที่ใช้มือถือราคาถูก แต่ว่ายังมีผู้ใช้บางกลุ่มที่ต้องการใช้ Application…
-
Progressive Web App is a perfect solution for your Lite version
What / Why Lite version Back to basic The mobile phone is faster and cheaper but not all phone does have high-performance GPU and CPU we still have $100 phone in the market besides we even have had 2G internet connection. “60% of mobile internet connection in this world is 2G” is a quote that I…
-
Progressive Web App ไม่ Support iOS แล้วจะทำยังไง
ช่วงนี้มีคนมาถามผมเยอะมากๆเรื่อยๆว่า “Progressive Web App ใช้บน iOS ไม่ได้แล้วเราต้องทำยังไง” “ผู้บริหารไม่เห็นเลยว่าทำไมต้องทำ ทำไป iOS ก็ใช้ไม่ได้” ทำความเข้าใจเรื่องนี้กันก่อน ก่อนอื่นต้องเข้าใจก่อนนะครับว่า PWA ไม่ใช่เทคโนโลยีใหม่ มันคือนิยามการทำ Mobile site อีกแบบเท่านั้นเอง คล้ายๆกับหลายปีก่อนที่เรามีคำว่า HTML5 แบบนั้นเลย เพราะฉะนั้นการเปลี่ยนเว็บเป็น PWA ไม่ใช่การสร้าง Version ใหม่ แต่มันคือการอัพเกรด Mobile site ให้ไปใช้เทคโนโลยีกลุ่มนี้เท่านั้นเอง เรามองง่ายๆว่ามันคือ การทำเว็บใหม่ให้หน้าตาเหมือน App พอครับ ยังไม่ต้องคิดอะไรซับซ้อน ซึ่งเอาเข้าจริงไม่ได้มีการกำหนดตายตัวเลยด้วยซ้ำว่า PWA ต้องมีอะไรหรือไม่มีอะไร แล้วไอ้ที่เค้าบอกว่าต้อง Add to Home Screen ได้หละ?? เราแค่มีมุมมองคร่าวๆครับว่าถ้า Web จะมาสู้ App ได้มันควรจะ Install ได้ เปิดได้โดยไม่ต้องต่อเน็ต ซึ่งเราก็เลยกำหนดภาพจำง่ายๆว่า ถ้ามันมีทั้งสองอย่างนี้เราจะเรียกว่า…
-
มาดูว่า Add to home screen version ใหม่ มีอะไรเปลี่ยนไปบ้าง
ใน Chrome 57 beta มีการปรับปรุง feature Add to home screen ใหม่ซึ่งทำให้ PWA ดูเหมือน Application มากขึ้น ไม่ได้ใช้คำว่า Add to home screen แล้ว เดี๋ยวๆๆๆๆๆๆๆๆอ่านข้ามไปได้เลย เพราะว่า ตอนปีก่อน feature นี้ เปลี่ยนคำว่า Add to home screen เป็นคำว่า Install แต่ตอนนี้มันเปลี่ยนกลับมาแล้ว แต่ผมยังไม่ลบออกเผื่อมันเปลี่ยนกลับมา…………. อย่างแรกที่เปลี่ยนไปเลยคือ ไม่มีคำว่า “Add to home screen” แล้ว เพราะตอนนี้ Chrome เปลี่ยนไปใช้คำว่า “Install” แทน ไม่ได้ Add แค่ Home screen แล้ว เดิมแล้ว PWA ที่โดน…