此篇主要紀錄PWA開發過程及心得,內容為PWA有什麼特色,為何React可以使PWA成為接近App的操作體驗,以概念敘述與簡單開發流程紀錄來介紹PWA。
PWA擁有傳統網頁和移動應用的優點,使網頁應用程式能安裝到移動裝置上,隱藏網站的網址連結列,提供更加順暢的用戶體驗,在這個前端技術發達的時代,網站開發人員也可以開發出原生App的順暢感,在前端技術上多一分優勢及考量。
我認為只能因需求來決定,兩者是不同的軟體產品,原因是PWA是以網頁的技術來運行,因此無法做到原生裝置的功能性和安全性,簡單的說就是網頁軟體工程與行動應用軟體工程是兩者不同的功能,行動應用開發才能完全利用裝置的原生功能,顧及功能面和安全性,而在專案初期選擇PWA來提升專案優勢是很不錯的選擇。
PWA可以滿足大部分的專案需求,只需開發網站來達成目標,專注在前後端的開發上,例如有間小的商務新創公司,只需要雇用網頁前後端的工程師來完成購物網站,再透過PWD來讓用戶安裝到手機上增加使用率,後續再考慮原生App的開發即可,既可加速專案開發,降低開發成本,專注在網站技術即後端伺服器即可。
開發網站的技術(程式碼與環境運行選擇)很多種,我選用React的框架讓使用者有更順暢的體驗,React小部分即時渲染網頁區塊,可以讓使用者不會有那種傳統的網站呆版和延遲感,以下歸類幾個PWA高品質的重點
官方技術文件 連結
加入manifests檔案,這個檔案主要就是設定App名稱和Icon,詳細功能參數設定可以參考我提供的文件連結。
{
"short_name": "R036部落格",
"name": "R036部落格",
"lang": "zh-TW",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "icon-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "icon-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#FFFFFF"
}
使React可以讀取到manifest.json
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
加入你的App icon到React Public專案路徑
在網站設定中找到安裝應用程式
跳出提示視窗
安裝完成後通知
如同App外觀將網站安裝至行動裝置上,也視同應用程式來管理,如權限、記憶體、通知等
以上是本次對於PWA的技術心得與記錄,PWA在網路上有很多的優缺點介紹,我認為實際考量上很簡單,考慮專案需求以及目前資源(開發時間、資金、工程師技術領域)答案就很明顯了,如果資本雄厚,那麼公司當然就是一句“我全都要”