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在網路上有很多的優缺點介紹，我認為實際考量上很簡單，考慮專案需求以及目前資源（開發時間、資金、工程師技術領域）答案就很明顯了，如果資本雄厚，那麼公司當然就是一句“我全都要”