閱讀筆記 – 什麼是 PWA，為什麼你需要關心？

原文網址

What is a PWA and why should you care?

筆記

文章一開始提到了一個很重要的數據 – 60% 的網路流量是經由手機進行的，所以網頁服務在手機上的用戶體驗非常重要

但是開發原生的手機 App 對於許多小公司是需要更多開發成本的 – 例如同時要支援 iOS ，Android，所以將既有的網頁服務升級成具有手機的用戶體驗這項技術也趨於流行與受到重視

如果想要瞭解 PWA 可以做的到的功能，可以先來看看一般  Web 應用程式所缺少的核心屬性

1. 可靠性 ：如果網頁的載入時間超過 3 秒，Google 發現 53% 的用戶放棄了這個網站
2. 快速：網頁的頁面切換和滑動在手機上不如原生應用程式來的平順
3. 響應 ( Responsive ) : 適應不同裝置的螢幕大小 ( 這部分其實有很多 CSS 框架開始支援，例如 Bootstrap )
4. 可安裝性：像原生應用程式一樣安裝，然後使用者可以直接使用應用程式
5. 程式啟動畫面 ( Splash Screen )
6. 高度參與 ( Highly engage-able ) ：例如通知功能，在手機螢幕 Home icon ，全螢幕支援，可離線

以上這些傳統的 Web 應用程式的缺點，PWA 都可以做的到

PWA 是獨立於 ReactJS，Angular ，VueJS 這些最新的網頁前端框架，沒有相依關係

PWA 可以支援離線瀏覽是由 Service Workers 所達成的

PWA 的技術元件組成 – Service Worker/Manifest.json/HTTPS ( 很像在開發一個 Chrome extension ) 

文章最後有展示一個 PWA 應用程式 Fidgetspin.xys ，文章中有教你如何透過 Chrome DevTools 來觀看 Service Workers 如何運作

更多的 PWA 應用程式可以到 https://pwa.rocks/ 上觀摩，Google 也有一系列的 PWA Case Studies 

PWA 輔助開發工具

1. Lighthouse 這是 Google 所提供的輔助工具，用來 audit 將目前的網頁升級成 PWA 所需要進一步的體驗改善建議
2. Workbox  這也是 Google 提供的開源工具，可以用來產生 Service Worker檔案

相關線上課程/電子書

• PWA

喜歡我們的分享嗎？ 使用以下的社群分享按鈕分享給你的朋友吧！