Gatsby | 簡單兩個步驟，讓你把 Gatsby 個人網站變成 PWA！
Hi！大家好，我是神 Q 超人！這篇要繼續分享該如何將 Gatsby 的網站變成 PWA（全名是 Progressive web apps）！抱歉我碰到幹話瓶頸了，這篇文章就讓我直接開始吧（根本沒人在意幹話的部分 😂）！
什麼是 PWA？
PWA 這技術可以讓你的網站變成像是原生的 App 一樣被下載到手機的桌面，然後因為本體還是 Web 所以透過 RWD 也不需要維護 IOS 和 Android 兩種系統。
更厲害的是不管當下有沒有網路都可以瀏覽下載下來的內容！因為 PWA 會在下載時預先存取網頁的資料，其中一種實現 PWA 此功能的方式類似於「App Shell 模型」，而根據 Google Developers 上解釋的：
App“shell”是支持用戶界面所需的最小的 HTML、CSS 和 JavaScript，如果離線緩存，可確保在用戶重複訪問時提供即時、可靠的良好性能。這意味着並不是每次用戶訪問時都要從網絡加載 App Shell。 只需要從網絡中加載必要的內容。
出處：App Shell 模型
然後將其應用在 PWA 的效果，這篇文章 內這段話解釋的很棒：
PWA 建構一個 model，將不經常變動的內容(App Shell)和變動的內容(Content)區分開來，可以把 App Shell 下載後、將內容透過 service work cache 至本地端資料庫，之後的 loading 就能夠使用 cache 的內容、立即獲取頁面，提供更即時的顯示，如此一來、在網路速度很慢甚至是沒有網路的環境裡都能夠藉由 cache 讓使用者進行瀏覽。
現在大家都對 PWA 有一些瞭解了，那就來看看如何將 Gatsby 變成 PWA 吧！
PWA 的規範
要讓網站變成 PWA 並不需要重新建構一個網站，但還是得完成一些 PWA 的規範，這些規範在 MDN 上寫得非常清楚，主要有以下三點要處理：
- 網站必須要使用 Https 的通訊協定。
- 網站的專案內必須包含 Web App Manifest，它是一個 JSON 文件，主要是描述你這個網站被下載後的顯示樣子（顯示的 Icon 或指定初始頁面就是要處理的部份之一）
- 負責處理網站緩存的 Service workers。
Https 的通訊協定
這個部分因為我是使用 GitHub 的靜態頁面服務器，所以就不需要考慮這個問題，如果沒有 SSL 的話就得再去申請一下。
Web App Manifest 文件
Web App Manifest 其實就像上方說的，它就是個普通的 JSON 檔，而在 Gatsby 的 Plugins 海海裡面，就有個能夠自動產生 Web App Manifest 的插件，名字叫做 gatsby-plugin-manifest。安裝完後，只要在 gatsby-config.js 中加上一些相關的 option，就可以在 build 的時候幫你產生 Web App Manifest 的內容和下載下來的 icon 囉！
輸入指令安裝：
npm install gatsby-plugin-manifest這裡要大家注意一下，因為我自己在用的 Gatsby 是 2.X 版本的，所以直接裝 gatsby-plugin-manifest 最新版本會有版本不支援的問題，個人最後選擇了 @2.4.30 版本，如果在 build 的時候出現同樣的狀況，可以參考看看。
裝完之後就可以到 gatsby-config.js 中的 plugins 區塊加入以下內容：
上方設定中的 name 和 short_name 會是網站被下載下來的名字，而 start_url 則是點開 App 後的初始頁面，其他還可以設置 background_color 或 theme_color（不過個人覺得沒什麼差 😂）。
還有一點使用上要注意的，上方其實有說 gatsby-plugin-manifest 也可以幫你產生顯示的 icon 到打包後的網站，但是在這裡不曉得是不是我的版本太舊，所以 gatsby-plugin-manifest 在 CI/CD 的時候，產生圖片的部分一直失敗：
最後的解決方法就不透過 gatsby-plugin-manifest 產生 icon 了，我直接在 Gatsby 的專案根目錄建立一個 static/icons，把各種尺寸的 icon 放裡面，這樣 Gatsby 就會在打包時幫我原封不動丟到打包後的網站了：
但如果各位想嘗試用 gatsby-plugin-manifest 產生 icon 的話，也可以把下面這行加到 gatsby-plugin-manifest 的 option 內，gatsby-plugin-manifest 會把你指定圖片產生成各尺寸的 icon，然後一樣放到打包後專案的 icons 目錄：
icon: `src/images/icon.png`,如果完成了這個部分，就能打開瀏覽器的 Developer tool 的 Applications，看看有沒有讀到 Web App Manifest 囉：
Service workers
最後是最簡單的部分啦！離線緩存的功能在強大的 Gatsby 中，仍然有 Plugins 可以來處理，Plugin 的名字是 gatsby-plugin-offline，從命名就可以看出它和離線有 87% 關聯。
下載 gatsby-plugin-offline：
npm install gatsby-plugin-offline這個部分仍然會遇到和 gatsby-plugin-manifest 相同的版本問題，個人是使用 @2.0.25 版。
下載後一樣到 gatsby-config.js 的 plugins 裡加上 gatsby-plugin-offline，它就可以運作得很好了：
要注意的是，雖然 gatsby-plugin-offline 會自動幫你把網站的資料做緩存，但是那不包括其他像是圖片或字體等資源，所以 options 的 precachePages 就可以讓你指定 url，只要是在那些 url 之下，那 gatsby-plugin-offline 就還是會幫你對那些內容做緩存。
確認結果囉
電腦
如果確認網站都完成上方的 PWA 三個規範，就可以到打開 Chrome，然後進入到你的網站，看起來會完全一樣，不過當你把滑鼠移到網址列的時候，就會多出現一個下載的 icon，點擊會問你要不要下載 App：
用力點下下載後，就會跳出另一個視窗顯示網站的內容：
這個網站也會像其他 App 一樣出現在應用程式中，之後只要點擊這裡就可以打開網站囉：
手機
如果是使用 IOS 系統，就只能透過 Safari 來安裝 PWA，而且安裝的按鈕還藏的很隱密，簡單的流程大概是：
- 用 Safari 打開網站。
- 點選 Safari 下方那排 icon 的中間那個（和上一頁、下一頁放一起的那些 Icon）
- 打開後滑到最下面點編輯動作，然後把「加入主畫面」加到喜好項目中。
- 完成後直接點選加入主畫面後按新增。
手機也就會出現 App 啦！
點開後雖然會顯示網頁的內容，但運行起來就像是一般的 App 一樣，沒有在瀏覽器內的感覺：
參考文章
其實用 Gatsby 做 PWA 比想像中還要簡單很多，除了在中途遇到的那些版本問題之外，接下來可能會再去研究一下 Hexo 的 PWA 設置，其實本來要一起研究的，但是拖延症大爆發就只做了 Gatsby 而已。 😂
那之後如果還想到要幫 Gatsby 申裝什麼功能（或是各位可以給我一些酷酷的建議 😂），我會研究一下再和大家分享！文章內如果有任何問題或是錯誤的地方，再麻煩留言告訴我，感謝大家！🙌
