Ray 已發佈 2019-10-17

Day1-PWA 初體驗 - 前言

前言

PWA 是一個逐漸成熟的網頁技術,那 PWA 到底是什麼?它又有用處?又為什麼要了解?所以接下來的文章就讓我們來了解 PWA 吧 :D

PWA 是什麼

PWA 是在 2016 年 Google I/O 上提到的一個技術,稍微小科普一下 Google I/O 是 Google 的開發者年會是每一年都會舉辦的一個研討會(註解),首先 PWA 全名是 Progressive Web App,又稱漸進式網絡應用程式,也有人會稱它為混合型應用程式,那為什麼會有這個呢?原因有幾個,其中一個是出在現階段使用智慧型手機上網的人越來越多,而通常一般使用者如果要進入我們的網站就必須知道網址(URL),但是使用者是健忘的,所以對於網址的記憶力比較差,而這樣子就會導致使用者總是記不住我們的 URL 進而遺忘不再回來我們的網頁,那另一個原因則是現代的人很喜歡安裝 APP(Application),有多愛下載呢?讓我們來看一下 2017 年時的下載量 ↓

原文出自 全球 APP 市場趨勢

而 PWA 其實就是模仿成類似 APP 的東西,你可以將這個 Web 頁面轉換成一個 APP 圖示並放置在自己桌面上,進而提升使用者體驗而且還可以離線存取,在 Google 官方手冊中的 你的首個 Progressive Web App 中,你可以看到一張類似天氣的 APP ↓

原文出自 你的首個 Progressive Web App

其實上圖畫面就是一個 PWA 應用,本身這個天氣 APP 是一個 Web 技術所製作出來的唷~

PWA 實際應用

那麼上面講那麼多文謅謅的廢話,那有實際應用嗎?我相信你會這樣子問。

在 Google I/O 2016 的官方網站就是採用 PWA 技術所製作,所以你可以嘗試使用手機打開 Google I/O 2016 官方網站,記得要使用 Chrome 來開啟該網站

首先使用手機 Chrome 瀏覽器打開 Google I/O 2016 的官方網站 ↓

Google I/O 2016

通常有兩種做法,第一種作法就是在你進去該網站後就會跳出提示訊息告知你 是否要將 I/O 2016 加到主畫面 也就是手機桌面 ↓

是否要將 I/O 2016 加到主畫面

第二種做法則是自己手動加到主畫面 ↓

加到主畫面

當你按下加入到主畫面時就會跳出視窗問你是否新增到主畫面(當然按下新增) ↓

是否新增到主畫面

最後就可以在桌面上看到 I/O 2016 啦~

PWA 建立成功

那麼你可能會問那如果是沒有 PWA 技術的網站呢?這邊我們拿六角學院來測試 ↓

六角學院

接下來就會發現加到主畫面的樣子好像與前面 PWA 不太一樣,不但沒有 Logo,名稱也很像書籤 ↓

加到主畫面

回到桌面上來就可以看出差異了 ↓

差異

而且就連移除都有點不太一樣唷~ PWA 的移除方式就跟移除 APP 是一樣的,所以可以說是非常像一個真的 APP ↓

移除 APP

而沒有支援 PWA 的六角學院官網就像刪除書籤一樣 ↓

刪除書籤

最後

那麼這初體驗也會使用到實際的練習專案上,這樣子才能夠實際的體驗到 PWA 的強大~所以這邊就讓我們準備繼續初體驗 PWA 吧 :D

參考文獻

Google I/O

全球 APP 市場趨勢

你的首個 Progressive Web App

關於筆者

暱稱:Ray

介紹:廢話不多說,讓我們來學習寫程式吧 :D 目前經營一個技術部落格:https://hsiangfeng.github.io/

文章列表 文章列表