iT邦幫忙

第 11 屆 iThome 鐵人賽

3
Modern Web

超緊繃!30天Vue.js學習日記系列 第 33

[Vue.js][日記]親愛的,我讓Mobile Web變成了PWA

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20190912/20110850dsypfXRkNe.jpg
超緊繃!30天Vue.js學習日記 親愛的,我讓Mobile Web變成了PWA

大家好,我是IAN。

接續著昨天的主題製作簡易的天氣預報頁面,過於無聊的我今天嘗試讓他變成了PWA(Progressive Web Apps)

先奉上Demo頁面:點我點我

會認識PWA是因為在9月底時參加了今年的JSDC Workshop,最近開學又碰上了一門開發Mobile APP的選修課,老師也不對期末專題的開發工具,語言設限制,原本想說要試試看Vue+NativeScript...但是參考資料以及官網的document都不是很清楚故作罷,所以就花了短短的時間用PWA生出來了,希望期末能夠順利交差(?)

講了這麼多,什麼是PWA呢?

請參考這邊

基本上就是能夠開發一次,用在多個地方,並且跟以往的Mobile web比起來,他還能夠做到訊息推播,Splash screens,能夠在主畫面放上一個app icon,用起來像極了NativeAPP!

說了這麼多,如果你也想弄一個,可以點擊以下參考資料,原則上2個小時內能夠搞定(有web成品的前提下,並且功能簡單)

參考資料:

點我點我
點我點我
點我點我

預覽畫面:

https://ithelp.ithome.com.tw/upload/images/20191021/201108508ylMwC9USZ.jpg

https://ithelp.ithome.com.tw/upload/images/20191021/20110850IpXl8D8pMj.jpg


上一篇
[Vue.js][日記]無聊加個菜
系列文
超緊繃!30天Vue.js學習日記33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
阿展展展
iT邦好手 1 級 ‧ 2020-02-17 05:48:12

恭喜完賽!!
最後瞬間升級變成 PWA XDDD

我要留言

立即登入留言