logo

PWA介紹 (Progressive Web App),優、缺點及範例介紹


簡介

優點

缺點

如何安裝

其他範例

PWA (Progressive Web Application) 是由Google於2016年提出的概念,簡單來說就是把功能放在瀏覽器中執行,但可以不透過瀏覽器操作,一般人可能比較難理解。可以這麼想像,在行動裝置端模式下,安裝APP需先下載並安裝執行,但是PWA省去這一個步驟,無須安裝APP直接打開瀏覽器加上簡單的設定即可執行。同樣的在桌上型電腦中,可以直接點擊該應用程式,但無須下載EXE及按下一步安裝等工序。

對行動裝置使用者來說,最大的感受就是在操作時感覺像在操作app,也就是app-like的體驗。對很多公司來說,PWA可以當成行銷工具,據國外媒體報導,有採用PWA的網站流量以及訂單量均增加,一來是無需額外下載app ,二來是PWA可以接近原生的功能,大大增加便利度及流暢度。

優點

根據Google開發者文件,PWA具有以下優點:

簡而言之,較受人注目的優點是

對使用者

對開發者或業主


缺點

1 瀏覽器/平台的支援是一大問題,一個網站可以在諸多平台及裝置及瀏覽器上運行,桌上型電腦作業系統有Windows、MAC及Linux,行動作業系統有iOS及Android,瀏覽器常見有Chrome/Safari/Firefox/Opera/Edge等,要求這麼多資源均支援原本就不是一件簡單的事情,而且許多受限的功能也無法取代原生的APP。

2 另一個主要的問題是大部分消費者並不清楚如何操作,並不是說不懂如何操作網站,而是說不知道該如何把該網站轉成類應用程式的操作模式,也因此實務上並不會有許多業主想要採用這種方式,工程師也不想額外增加開發工時。

此外根據國外部落客評論,對於行動裝置而言,PWA會比原生APP耗電量來的高,由於它們是用複雜的程式編寫的,手機必須更加努力的轉譯程式碼,但此說法未被確認。另外,PWA無法存取NFC/藍牙等原生設備的缺點使其仍無法取代傳統的APP。

根據國外的報導,雖然GOOGLE努力推廣多年,但是PWA架構並沒有很普及,對大多數人來說還是相對較新的概念。2018年曾有許多科技網站大力吹捧PWA將會取代傳統APP,不過經過幾年的觀察,有許多之前用PWA開發的網站已取消PWA模式,但相對地也是有不少新的網站加入PWA的陣營中。

對於不想砸大錢開發手機APP的企業來說,PWA無疑對他們是最好的選擇。手機APP經常因版本的更新而需要大量的維護,而PWA是基於瀏覽器而生,若瀏覽器沒有甚麼大更動,維護相對較容易,製作及維運成本均大幅下降。

PWA會是未來的趨勢或是會成為歷史上的一個名詞,就讓市場及時間來決定了。


如何安裝

以下說明在不同的裝置及不同瀏覽器中如何安裝PWA網站 (Firefox目前不直接支援,需外接外掛)

以BMW.com為例

1. 安裝於 WINDOWS 的 Chrome 中

請開啟Chrome瀏覽器,輸入網址可看到安裝鈕。

若看到安裝鈕圖示,即表示該網址具有PWA模式 (註:適用於大部分情況,有少數PWA網站僅針對行動裝置才適用)。

要正規的驗證是否網站具有PWA模式,須透過瀏覽器的原始碼檢測或是Lighthouse工具,但是已經進入工程師的範圍了,就先打住以免打瞌睡。

按下安裝後,就會在桌面產生捷徑
 
 
雙擊即可執行,執行結果如下,可以觀察到雖然是網站但是卻沒有瀏覽器的框架了

 

解除安裝

按下右上方三點鈕,選擇 '解除安裝' 即可。

 

2. 安裝於 WINDOWS 的 EDGE 中

輸入網址,按下按鈕後會出現是否安裝畫面

按下安裝後,系統會詢問要不要放在工作列或是捷徑中,可依照個人需求勾選
 
 
如果沒有放在捷徑或工作列,可以到"開始"用網址名稱搜尋
執行結果如下  

解除安裝
可以到"應用程式"中解除安裝,也可以透過搜尋找到後按下"解除安裝"  

3. 安裝於 MAC 的 Safari 中

輸入網址,按下分享按鈕,選擇"加入DOCK中"

 
 
加入後,就會在DOCK中顯示圖像,圖像按下即執行

4. 安裝於 iOS 中 (以iphone為例)

不論是 Chrome 或是 Safari ,輸入網址,按下分享鈕後請按[加入主畫面],即可於主畫面產生APP的圖示,接下來的操作就如同一般的APP
(Chrome)
(Safari)

 
若要移除,則與APP操作無異,長按圖式以移除,不過這時出現的就不是移除APP,而是刪除書籤

5. 安裝於 Android 中的 Chrome

輸入網址,按下分享鈕後請按[新增至主畫面]的按鈕,確認後即可在桌面看到一個圖示,點擊即可執行。





若要移除,則與APP操作無異,長按圖式以移除



其他範例

PINTEREST

網址 www.pinterest.com

與先前的行動網站相比,據稱使用者停留的時間增加了40%,產生廣告收入增加了44%,核心參與度增加了60%。

PWA-PINTEREST


Spotify

網址 www.spotify.com

PWA-spotify

instagram

網址 www.instagram.com

PWA-instagram
twitter

網址 https://www.x.com


soundcloud

網址 https://www.soundcloud.com


udn聯合新聞網

網址 https://www.udn.com


若有PWA方面的開發需求,也可與我們聯絡
       所有文章
PWA介紹 (Progressive Web App),優、缺點及範例介紹
由Google於2016年所提出的概念-漸進式網頁應用程式,意即由網頁來執行應用程式
Shopify 是什麼 ? 完整介紹及畫面說明
全世界最多人使用的開店平台究竟有甚麼媚力?
SQL Server Replication 資料庫同步服務
一個很好用卻常被忽略的工具
2021年網頁設計趨勢
想要了解國外設計師歸納的2021年網頁設計趨勢嗎
UX為什麼很重要?
從2015年進軍台灣的蝦皮如何打敗露天及奇摩而成為拍賣的盟主談起
Microinteractions微互動如何改善UX設計?
一位資深產品設計師於多年前提出的微互動觀點,發酵於近幾年並帶給UX界不少的發想及實作
企業E化不能等-從一則實例談起
最近讀到一則新聞,員工離職把硬碟格式化,結果造成公司業務大停擺
Adobe Animate介紹
十多年前網頁動畫獨領風騷的FLASH於2016年更名為Adobe Animate後,原軟體於2020年底將正式停止服務
Figma介紹
Figma這幾年在UX界爆紅,他的優勢在哪邊? 為何得到設計師的青睞?
LINE官方帳號(俗稱LINE2.0)整理包
LINE@生活圈已全面升級並改名為官方帳號
Google將於2020/9正式採用行動版內容優先索引
不具適合手機瀏覽的網站是該調整的時候了
擴增AR實境在APP的應用愈來愈多元
擴增實境時在APP上的應用由早期的2D已進步到3D的應用,其多元性及互動趣味更甚以往
Wireframe的優點
Wireframe俗稱線稿圖,好的Wireframe節省一半的製作時間及增強各部門的效率
程式碼也可以環保化
對人可以不用斤斤計較,但是對雲端服務就要斤斤計較,甚至是錙銖必較
實體 v.s. 網路
實體店面與網路銷售的困境與尷尬
新知
LINE官方ID | @823yjemy
Discord | arshirerocks
新北市土城區中央路二段191號13樓之一
© 貝姆資訊有限公司 Arshire. EST 2004