Progressive Web app In action With Vue.js เหมือนจะง่าย

พอดีว่าเมื่อก่อนปีใหม่ อยากทำ personal web ของตัวเอง ก็เลยกะว่าจะทำจริงจังเลยทำเป็น PWA ให้ได้ด้วย และด้วยความที่อยากลอง Vue.js แบบเต็มๆ ก็เลยคิดว่า จะจัดพร้อมๆกันเลย พอลงมือจริงก็เจออะไรโน่นนี่เยอะมากๆ ก็เลยอยากมาแชร์ว่าเจออะไรมาบ้าง กับการทำ PWA ด้วย Vue.js

Vue.js ใช้งานง่าย

Vue.JS ใช้งานง่ายจริงๆครับ ถ้าใครลอง React มา จะรู้สึกเลยว่า Vue.js ใช้งานง่ายกว่า แต่เอาเข้าจริง Vue.JS มีจุด dirty อยู่เยอะพอสมควร ส่วนตัวผมใช้ vue-cli ในการ create applicaiton ซึ่งก็ช่วยให้ เราไม่ต้องเสียเวลาไปกับ การ setup app หรือ webpack แต่ด้วยความที่เว็บผมไม่ใหญ่ ก็เลยไม่ได้ใช้ vuex หรือ vue router จริงๆตรงนี้ไม่ซีเรียสนะครับอยากใช้เท่าไหนก็ได้

อย่าลืม Code Splitting

ตอนแรกผมไม่ได้เจอปัญหาเลยและไม่ได้คิดว่าทำไมต้องทำ code splitting แต่พอเริ่มปรับ network ให้ช้างลงจะเริ่มเห็นเลยว่า component ที่ไม่ได้เป็น logical ไม่ยอมโหลดออกมาก่อนและมีช่วง white screen นานมาก ก็เลยนึกได้ว่าตอนไป GDE summit ก็มีการพูดถึง code splitting อยู่ ก็เลยลองทำ ซึ่งก็ช่วยแก้ปัญหาให้หายไปได้เลย วิธีก็ง่ายมากๆ จากเดิมที่เรา import component แบบนี้

Import Index from ‘./pages/Index’

ก็เปลี่ยนเป็นแบบนี้ ซึ่ง Webpack จะรู้เองว่า เวลา build ให้แยกไฟล์ส่วนนี้ออกมา

const Index = resolve => {
 require.ensure([‘./pages/Index’], () => {
 resolve(require(‘./pages/Index.vue’))
 })
}

แต่สุดท้ายแล้ว ถ้าจะให้ผ่าน Lighthouse เราต้องทำให้มี detail บางอย่างโผล่ขึ้นมาในกรณีที่ Javascript ยังไม่เริ่มโหลด หรือ ไม่ได้ Enable ด้วย ซึ่งผมแยกส่วนนี้ออกมาจาก app container หลักเลย

Sw-precache With Webpack

ผมต้องการให้เว็บใช้ offline ได้ ซึ่ง solution ที่ Google แนะนำคือ sw-precache plugin ของ webpack ซึ่งพอเราเพิ่ม plugin ไปในไฟล์ config ตัว webpack ก็จะเอา list ของไฟล์ที่ build ทั้งหมดยัดไว้ใน service worker ให้เราเองเลย แต่เราต้องไปเพิ่ม code ในส่วน register service worker เองนะครับ webpack ไม่ได้ inject ให้ ลองไปดูใน GitHub ได้ ครับใช้งานไม่ยาก

https://github.com/goldhand/sw-precache-webpack-plugin

ใช้ ClosureCompiler ด้วย

ClosureCompiler คือ ตัว complier JavaScript ของ Google ที่จะช่วยให้ Javascript ของเราทำงานได้เร็วขึ้น โดย ClosureCompiler จะเข้าไป compile code ของเรารอบนึงก่อนและหาจุดที่ต้อง optimize ซึ่ง นอกจากทำให้ script เร็วขึ้นแล้ว ยังเล็กลงมาเหมือนกัน ซึ่งถ้าอยากรู้ว่า code ที่เราทำ จะ complie ออกมาเป็นแบบไหนให้ไปลองเล่นได้ที่ http://closure-compiler.appspot.com/ ซึ่งเพิ่มความง่าย เราก็ ใช้ plugin ของ Webpack https://github.com/roman01la/webpack-closure-compiler แต่ผมติดปัญหานิดนึงกับ plugin UglifyJs ซึ่งถ้าใช้ ClosureCompiler แล้วต้องปิด UglifyJs ไปด้วย

ลองเทสใน network ที่ต่างกัน

อันนี้เป็นเรื่องใหญ่มากๆเพราะว่าพอไปอยู่บนมือถือแล้ว ด้วยอินเตอร์เน็ตที่ความเร็วต่างกัน อาจจะส่งผลให้เว็บของเรา แสดงผลได้ต่างกันมากๆ ซึ่งใน chrome devtools มี tools ที่เอาไว้ จำลองความเร็วของ internet แบบต่างๆเอาไว้แล้วซึ่งเราสามารถลองเทสได้เลยตรงนี้จะช่วยให้เราเห็นได้ว่า คนที่ใช้เน็ตช้าๆจะเจออะไรบ้างถ้าใช้เว็บของเรา

ทำให้ LightHouse เต็ม 100 โคตรยาก

อันนี้ต้องบอกเลยว่า การทำให้ lighthouse เต็ม 100 คะแนนยากมากๆ โดย light house จะ audit ตั้งแต่การทำงาน offline ความสมบูรณ์ของ manifest ความเร็วในการโหลด ยาวไปถึงความ responsive หรือ ความปลอดภัย ส่วนตัวแล้วผมติดตรงเรื่อง สี font ที่ไม่ตัดกับ พื้นหลัง กับเรื่อง performance นิดหน่อย สุดท้ายก็ได้มาประมาณ 97–98 ไม่เกินนี้

เก็บ Manifest ให้เรียบร้อย

อันนี้สำคัญมากๆครับ เพราะว่า เวลา Save to home screen แล้ว ถ้าเราเก็บเรื่อง icon หรือชื่อ app ไม่ครบ จะออกมาไม่สวยมากๆ ต้องดูทั้ง color แล้วก็ size ของ icon ด้วยนะครับ ดูได้จากอันนี้เลยครับ 
https://thangman22-pwa.firebaseapp.com/static/manifest.json

Please Use ManUp.js

ผมเจอปัญหาเยอะมากๆที่จะทำให้ เว็บของผม Support ทุก platform เพราะว่า ถ้าจะเขียน meta ให้ support ทั้ง window ทั้ง ios และ chorme meta ของเราจะยาวมากๆ ผมเลยแก้ปัญหาด้วยการหา polyfill มาใช้ ก็เลยไปเจอกับ ManUp.js เข้า โดย manup จะช่วย Gen manifest.json ของเราออกมาเป็น meta ต่างๆใน ทุก platform ให้ ปัญหาคือ ManUp.js ไม่ได้ อัพเดทมานานมากๆ ผมเลยต้องเอามาแก้อีกเยอะเลย แต่ว่า เร็วๆนี้ผมกำลังจะ folk ออกมาทำใหม่ให้มัน support feature ใหม่ๆหน่อยลองไปดูได้ที่ https://github.com/boyofgreen/manUp.js ก่อนนะครับ

อย่าลืม HTTPS

ตรงนี้ ถ้าใครไม่ได้ใช้ Firebase hosting หรือ พวก service อื่นๆ ก็อย่าลืม ใส่ HTTPS นะครับไม่งั้น Service Worker จะไม่ทำงาน

Test บน Device จริงเท่านั้น

ต่อให้เราจะเทสบน network หลายๆแบบแล้ว ผมยังแนะนำนะครับให้ทดสอบกับเครื่องมือถือจริงๆเพราะบางทีบนมือถือจะมีจุดหน่วงมากกว่าบนคอมเยอะมากๆเพราะฉะนั้นแล้วอย่างน้อยลองเปิดกับเครื่องจริงๆด้วยจะได้ไม่มีปัญหาตอนเอาไปใช้จริง

ก็ถ้าใครอยากละลองเล่น PWA ที่ผมทำเล่นๆก็ไปดูได้ที่ https://thangman22-pwa.firebaseapp.com/ ครับ