關於漸進式網頁(PWAs)

What are Progressive Web Apps(PWAs)?

Progressively enhance web apps to look and feel like native apps.
PWAs透過漸進的方式，優化網站並達到原生App的優點，講白一點就是使用者的環境只要有支援，就能享受更好的使用者體驗，環境不支援沒關係，就只是繼續使用原本網站該有的模樣。

Progressive 的涵義

Progressive(漸進性)，當你的網站符合要求，能將網站漸進式的昇華到與原生App匹敵的效果，但如果環境不支援，也可以向下降級到原本網站的功能。
使得Web更能與App匹敵的特性都是以漸進的方式增強的，在比傳統網頁應用更好的同時也保證了降級兼容。
像Service Worker(PWAs需要使用到的技術)目前的支援度上，iOS的Safari就沒有支援，但Chrome for Android就有，雖然iOS沒有支援，但並不影響原本在手機上操作的體驗性。

資料來源：https://caniuse.com/

主要的三個特色

Reliable

具備載入(Loading)快速，而且提供**離線瀏覽(Offline)**的功能

圖片來源： https://developers.google.com/web/progressive-web-apps/
而實現離線功能的主要功臣就是Service Worker，是一個在Client端跑的背景程式，能達成資料的快取、推播和離線瀏覽等等。

Fast

快速回應使用者的需求(UX體驗好)

圖片來源： https://developers.google.com/web/progressive-web-apps/
現代的使用者，如果網站載入超過3秒就會有53%的人選擇離開，
因此網頁的效能，變成了前端一個很重要的課題。

Engaging

圖片來源： https://developers.google.com/web/progressive-web-apps/
操作起來感覺像是在使用原生(Native)的Mobile App，擁有可安裝性
，簡而言之就是能在手機桌面，新增一個網頁的快速連結(url)的icon，
還有推播功能來吸引使用者回顧網站，擁有像原生App一樣的特色。

Why PWA?

官方點出了四個使用PWAs的理由。

1. 網站連結的icon
2. 提升與使用者的聯繫
3. 網站的穩定性
4. 提升轉換率(公司最在意的一件事)
   網站最重要的是使用者，有使用者才有投資在這上面的意義，因此網站要能留住使用者，勢必內容需有足夠的價值，才能吸引瀏覽者的眼球，當網站累積一定內容與知名度後，突然有一天發現，使用者雖然點進來的人多，但離開的人也有千百種原因，像是不小心點到廣告、UX做太差或是網頁資訊太多太雜亂(如：圖檔、js、css等等)，導致載入時間太久，毅然決然地離開。

這時候網頁開發者需要會面臨地挑戰，一下子從網頁開發轉到了SEO、UX(使用者體驗)、效能調整(檔案壓縮)和RWD(Responsive Web Design)等等，以使用者體驗為導向的開發方式，也因為這樣才陸續地出現了很多的Framework(React、Vue、Angular5)讓開發者以更系統化的方式滿足使用者體驗。

但有一點很重要的事項必須提醒，就算不依賴PWA，也能達到快速且使用者體驗很好的網站，只要遵守網站效能的規定，就算網站不是以新的Framework、Google AMP或PWAs等方式實現，也可以提升網站的體驗感

說了那麼多，那為什麼還需要PWA呢?

1. 因為潮
2. 它保證了網站的效能(因為必須遵守許多效能的規範才能實現)
3. 在使用端的快取功能(Service Worker)，能大大的提升使用者在重複瀏覽時候的使用者體驗
4. 開發一個Web就能體驗到Native App的功能特色(如：推播、手機的icon連結)
5. 開發成本比Native App小，例如一個軟體就必須要有兩位開發者(iOS和Android)

是否該使用PWAs

既然PWAs那麼好，那是否一定就要學PWAs，其實不然，在決定導入技術之前，有許多要考量的，如下：

1. 目前使用我們網站的客群多以什麼裝置(PC/Mobile)
   PWAs的特色在於強化，Mobile使用者的使用體驗，並且提升使用者的回顧率。
2. 如果8成使用者來自Mobile，那Android佔幾成?
   目前iOS的Safari並不支援Service Worker，因此如果大多使用者來自iPhone用戶，那麼花的時間成本效益，我認為更值得放在SEO優化或是網站效能校正。
3. 目前網站的效能已經達到合格的情況下，PWA的功能是否能提升該網站的使用客群的回顧率(考慮用戶的使用習慣)?

GitHub

https://github.com/DakHarry/30day-pwas-practice