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


avatar-img
19會員
19內容數
軟體生活 v0.3.6 是一個理念象徵,一個專注在資訊科技與人文的地方 「在現代科學的浪潮中,我們的理性根植於人文學科的土壤」
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
隨著電子商務的蓬勃發展,越來越多企業和個人開始投入購物網站的架設和App開發。然而,從零開始設計一個成功的購物網站並開發出高效的App,並不是一件容易的事。本文將為你提供從初步規劃到最終完成的指南,幫助你在競爭激烈的市場中脫穎而出。
Thumbnail
RWD(適應性網頁設計)不僅能提高使用者體驗,還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理,RWD設計能顯著提升網站在搜尋引擎中的排名。
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
響應式網頁設計(Responsive Web Design,簡稱RWD)是一種設計和開發網頁的方法,旨在使網站能夠根據不同設備和屏幕尺寸的大小,自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗,無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
透過Responsive網頁設計技術,能夠讓您的網站在不同裝置上顯示良好。此外,我們的服務還包括多種語言介面支援、內容管理系統、無限頁數網站、無限網上影片、無限網上表格以及專業的Banner設計。
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
隨著電子商務的蓬勃發展,越來越多企業和個人開始投入購物網站的架設和App開發。然而,從零開始設計一個成功的購物網站並開發出高效的App,並不是一件容易的事。本文將為你提供從初步規劃到最終完成的指南,幫助你在競爭激烈的市場中脫穎而出。
Thumbnail
RWD(適應性網頁設計)不僅能提高使用者體驗,還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理,RWD設計能顯著提升網站在搜尋引擎中的排名。
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
響應式網頁設計(Responsive Web Design,簡稱RWD)是一種設計和開發網頁的方法,旨在使網站能夠根據不同設備和屏幕尺寸的大小,自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗,無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
透過Responsive網頁設計技術,能夠讓您的網站在不同裝置上顯示良好。此外,我們的服務還包括多種語言介面支援、內容管理系統、無限頁數網站、無限網上影片、無限網上表格以及專業的Banner設計。
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經