那個..到底什麼是漸進式網頁(PWA)？

或許你可能已經有聽過這個名詞，但是很難去說出它真正的含意 QQ

其實我們一般會認為漸進式網頁應(PWA)只是一個術語，指的是將「一些功能」添加到在瀏覽器中運行的任何網頁。

也就是我們可以逐步增強現有網頁的功能，讓它感覺起來像是原生行動應用裝置APP。

這邊我用3個名詞來總結PWA所擁有的特色：

1. Reliable(可靠的)：這邊說PWA是可靠的，意味著它除了可以在正常情形下快速載入頁面，甚至當使用者在離線狀態時，也可以使用PWA中的部分功能，這也正是漸進式網頁的其中一項核心內容。
2. Fast(快速)：這邊所說的快速不僅僅是在載入頁面期間，還包含了一旦網頁運行時，PWA要對使用者的操作立即產生反應回饋。
3. Native-like(接近原生APP)：PWA能夠提供載入時的動畫(Splash screen)，而且在瀏覽器的支援下還能夠存取手機設備功能以及當應用程式已經關閉，PWA也能提供推播通知等功能。

嘿嘿~~ 到這邊是不是感覺PWA越來越像原生APP所擁有的功能了呀!!!

PWA vs Native Mobile Apps

比較在手機上一般用戶花在網頁和原生APP的時間吧!!

• Mobile Web vs Native App :
  

這是comScore在2017年公佈的一份報告。我們可以看到手機用戶將87%的時間花在原生APP上，而只有13%的時間花是在瀏覽器中在網頁上。那你可能覺得我們還要寫網頁幹嘛XDD，首先讓我們找出為什麼一般用戶會花費大多數時間在原生APP上，主要有以下幾個原因：

1. 推播通知：即使應用程式已經關閉，推送通知也會主動通知用戶，只要點擊它，用戶就會立即回到了APP中。
2. 螢幕圖示：用戶只要點擊在手機桌布中的圖示就可以立即開啟APP，不用像網頁還要輸入網址。
3. 存取手機設備(ex:相機)：用戶可以透過原生APP來存取手機功能如相機、地理定位和檔案系統等等。
4. 離線使用：許多原生APP也可以離線使用，至少可以操作APP中的部分功能。

這邊先破梗一下，其實PWA基本上可以擁有上述這些功能 !!!

但是沒有任何東西是完美的....

這裡我從兩個論點來說明為什麼：

1. 如果你想支援iOS和Android這兩個平台，就必須要學習兩種語言或者需要多位開發人員才能完成，但是如果能只用一般網頁語言寫一個接近原生APP的網頁的話會更加節省人力成本。
2. 更好的論點是根據統計大多數用戶在使用原生APP時，有80%的時間只會進入前三名的APP像是Google、Facebook、WhatsApp等等，不幸的是可能不是你所開發的APP。另外用戶平均每個月安裝新APP的數量接近於0，這使得我們辛苦開發的APP被一般用戶發現的機率非常非常地低。

下面這張圖很明顯地說明了PWA和傳統網頁、原生APP之間的差異：(簡單來說PWA是一個結合兩者優點的一套解決方案)

到目前為止，我們已經大致了解PWA是什麼，以及為什麼我們可能想要開發一個PWA而不是傳統原生的APP。接下來就讓我們開始了解開發一個漸進式網頁到底需要什麼技術和功能。

PWA Core Building Blocks

• 其中最最最重要的就是Servive Worker這個核心元件，透過Cache技術它讓我們的網頁也可以具有像是原生APP才有的「離線使用」和「背景同步」功能，另外也支援「推播」的功能。
• 再來Web App Manifest文件允許我們去定義一些metadata，讓我們的PWA在手機上運行時，看起來就像是一般原生APP一樣(例如在螢幕上直接增加icon不用到商城安裝、開起PWA時不會像開啟瀏覽器上面會有網址條...等等)
• 還有一些其他的Web API，如地理位置API或相機API，以便我們可以去存取各種手機上的功能。

目標學習路徑

1. Application Manifest ---> 2天
2. Service Worker Basic ---> 2天
3. Javascript Promise and Fetch API ---> 2天
4. Service Worker Caching (Offline Access) ---> 3天
5. Advanced Caching Strategies ---> 3天
6. Caching Dynamic Data with IndexedDB ---> 3天
7. Responsive Web Design ---> 2天
8. Background Sync ---> 3天
9. Web Push Notifications ---> 3天
10. Media API(Camera) and Geolocation API ---> 3天
11. Automated Service Worker Management ---> 3天

學習資源

• Google Developers for PWA
• Google Developers for Workbox
• MDN Web Docs
• 2018 IT邦幫忙鐵人賽 PWA學習筆記
• TechBridge PWA實戰經驗分享

因為我最後目標是要實作出一個「旅遊日記PWA」，在網頁和手機上都可以正常地運行，所以這邊我附上網頁template的github連結，之後我也會根據這個模板去修改，將我們的網頁慢慢地增加上述的新功能(記得要運行npm install安裝http-server套件)。

Template Github Link

Day01 結束 !!