logo
Home / Blog

PWA介紹(Progressive Web App)

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

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

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

目前是2021的下半年,根據國外的報導,雖然GOOGLE努力推廣多年,但是PWA架構並沒有很普及且有逐漸式微的趨勢。2018年曾有許多科技網站大力吹捧PWA將會取代傳統APP,不過許多之前用PWA開發模式的網站已改版為單純網站,下述星巴克訂餐的範例則使用專屬的連結操作,並沒有掛於官網中,不過Pinterest仍維持官網以PWA模式進行,但也僅是部分採用。

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

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

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

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

以下是幾個範例

STARBUCKS

PWA-starbucks PWA-starbucks

2017年上線,據稱帶來兩倍的活躍使用者。

網址 app.starbucks.com

安裝於電腦中

請開啟Chrome (Firefox需安裝外掛才支援)。

輸入網址後,會看到一個符號或按下更多三點鈕會看到安裝XXX的設定,即表示該網址具有PWA模式 (註:非絕對的判斷條件,有許多PWA網站並不會出現該符號),按繼續即可安裝。


接下來在電腦桌面上,會看到一個類似捷徑的圖示就代表可以使用了,點擊即可執行。

若要取消PWA,按下更多三點鈕,按下解除即可。

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

安裝於平板或手機上

iOS
請開啟Safari並輸入網址 app.starbucks.com (Chrome iOS尚未支援),按下分享鈕後請按[加入主畫面]的按鈕,確認後即可在桌面看到一個圖示,點擊即可執行。

PWA-starbucks PWA-starbucks

在Safari環境中,每個網址均可加入主畫面,PWA執行後會呈現應用程式的操作介面,而一般網站則會叫出瀏覽器來執行,類似書籤捷徑的概念,就不是應用程式的感覺了,如下面兩張圖。

PWA-starbucks PWA-starbucks

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





PINTEREST


PWA-starbucks PWA-starbucks

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





YUMMLY


PWA-starbucks PWA-starbucks

國外知名個人化的食譜建議及食譜搜索引擎。

所有文章


2021年網頁設計趨勢

想要了解下國外設計師歸納的2021年網頁設計趨勢嗎?

PWA介紹(Progressive Web App)?

由Google於2016年所提出的概念-漸進式網頁應用程式,意即由網頁來執行應用程式

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. 網路

實體店面與網路銷售的困境與尷尬

CRM系統回歸以人為本的初衷

再龐大的CRM系統若缺乏對人的關懷也是令人失望的,從一通電話談起

 立 即 洽 詢  125 world