PWA漸進式網路應用程式技術心得

閱讀時間約 4 分鐘
raw-image


前言

此篇主要紀錄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專案路徑

raw-image


展示

安裝

在網站設定中找到安裝應用程式

raw-image



跳出提示視窗

raw-image


安裝完成後通知

raw-image


PWA應用程式

如同App外觀將網站安裝至行動裝置上,也視同應用程式來管理,如權限、記憶體、通知等


結語

以上是本次對於PWA的技術心得與記錄,PWA在網路上有很多的優缺點介紹,我認為實際考量上很簡單,考慮專案需求以及目前資源(開發時間、資金、工程師技術領域)答案就很明顯了,如果資本雄厚,那麼公司當然就是一句“我全都要”


18會員
17內容數
軟體生活 v0.3.6 是一個理念象徵,一個專注在資訊科技與人文的地方 「在現代科學的浪潮中,我們的理性根植於人文學科的土壤」 生活系列 【一分鐘午後微醺】一杯影視寓意調酒 【三分鐘膠囊咖啡】一顆知識概念膠囊
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
使用React.js實作CAPTCHA元件的步驟和技巧
Thumbnail
使用 React 做出一個便條紙的頁面,可以紀錄自己的想法後丟上去。並且讓使用者即使重新整理頁面,也不會遺失資料。
當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
Thumbnail
本文記錄了在實作Movie Guide專案中嘗試使用useEffect Hook從OMDB API抓取電影資料的過程。透過錯誤的抓資料方式和正確使用方式的對比,介紹了useEffect Hook的基本語法、與async...await的搭配、依賴陣列的使用以及cleanup函式的重要性。
Thumbnail
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
React props 的基本概念與用法,同時也提到了一點 React 在資料傳遞方面的規定與原則。
Thumbnail
初探 JSX 語法、規則以及其背後運作方式。
Thumbnail
簡單認識 JS 的 import 和 export 用法,以及它們在 React 的使用情境
Thumbnail
記錄了前端框架的學習原因、使用好處以及注意事項。
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
使用React.js實作CAPTCHA元件的步驟和技巧
Thumbnail
使用 React 做出一個便條紙的頁面,可以紀錄自己的想法後丟上去。並且讓使用者即使重新整理頁面,也不會遺失資料。
當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
Thumbnail
本文記錄了在實作Movie Guide專案中嘗試使用useEffect Hook從OMDB API抓取電影資料的過程。透過錯誤的抓資料方式和正確使用方式的對比,介紹了useEffect Hook的基本語法、與async...await的搭配、依賴陣列的使用以及cleanup函式的重要性。
Thumbnail
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
React props 的基本概念與用法,同時也提到了一點 React 在資料傳遞方面的規定與原則。
Thumbnail
初探 JSX 語法、規則以及其背後運作方式。
Thumbnail
簡單認識 JS 的 import 和 export 用法,以及它們在 React 的使用情境
Thumbnail
記錄了前端框架的學習原因、使用好處以及注意事項。