React PWA(漸進式網路應用程式)開發技術心得
前言
此篇主要紀錄PWA開發過程及心得，內容為PWA有什麼特色，為何React可以使PWA成為接近App的操作體驗，以概念敘述與簡單開發流程紀錄來介紹PWA。
什麼是漸進式網路應用程式(PWA)
PWA擁有傳統網頁和移動應用的優點，使網頁應用程式能安裝到移動裝置上，隱藏網站的網址連結列，提供更加順暢的用戶體驗，在這個前端技術發達的時代，網站開發人員也可以開發出原生App的順暢感，在前端技術上多一分優勢及考量。
那麼有PWA還需要App嗎?
我認為只能因需求來決定，兩者是不同的軟體產品，原因是PWA是以網頁的技術來運行，因此無法做到原生裝置的功能性和安全性，簡單的說就是網頁軟體工程與行動應用軟體工程是兩者不同的功能，行動應用開發才能完全利用裝置的原生功能，顧及功能面和安全性，而在專案初期選擇PWA來提升專案優勢是很不錯的選擇。
PWA的優勢和價值
PWA可以滿足大部分的專案需求，只需開發網站來達成目標，專注在前後端的開發上，例如有間小的商務新創公司，只需要雇用網頁前後端的工程師來完成購物網站，再透過PWD來讓用戶安裝到手機上增加使用率，後續再考慮原生App的開發即可，既可加速專案開發，降低開發成本，專注在網站技術即後端伺服器即可。
React PWA的特色
開發網站的技術(程式碼與環境運行選擇)很多種，我選用React的框架讓使用者有更順暢的體驗，React小部分即時渲染網頁區塊，可以讓使用者不會有那種傳統的網站呆版和延遲感，以下歸類幾個PWA高品質的重點
- 網站操作的互動特效
- 即時渲染網站畫面
- 減少重新載入整頁網頁的感受
開發過程紀錄
官方技術文件 連結
manifests.json
加入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"
}
index.html
使React可以讀取到manifest.json
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Public
加入你的App icon到React Public專案路徑
展示
安裝
在網站設定中找到安裝應用程式
跳出提示視窗
安裝完成後通知
PWA應用程式
如同App外觀將網站安裝至行動裝置上，也視同應用程式來管理，如權限、記憶體、通知等
結語
以上是本次對於PWA的技術心得與記錄，PWA在網路上有很多的優缺點介紹，我認為實際考量上很簡單，考慮專案需求以及目前資源（開發時間、資金、工程師技術領域）答案就很明顯了，如果資本雄厚，那麼公司當然就是一句“我全都要”
你可能也想看
