寫在前面：這個專案雜七雜八看起來很雜，這篇文章主要是就是介紹下這個模板專案的幾個要點，讓大家從這個專案中能學到真正實用的技術要點，專案地址在文末。

一.pwa

1.什麼是 PWA，使用哪些技術做到pwa
Progressive Web App, 簡稱 PWA，是提升 Web App 的體驗的一種新方法，能給使用者原生應用的體驗。 PWA 能做到原生應用的體驗不是靠特指某一項技術，而是經過應用一些新技術進行改進，在安全、效能和體驗三個方面都有很大提升，PWA 本質上是 Web App，藉助一些新技術也具備了 Native App 的一些特性，兼具 Web App 和 Native App 的優點。 PWA 的主要特點包括下面三點：

• 可靠 - 即使在不穩定的網路環境下，也能瞬間載入並展現
• 體驗 - 快速響應，並且有平滑的動畫響應使用者的操作
• 粘性 - 像裝置上的原生應用，具有沉浸式的使用者體驗，使用者可以新增到桌面

大家看到這問題來了，pwa如何做到這上面三點呢？主要是通過一系列的前端技術，來做到以上幾點。下面依次介紹：
1.可靠 -- 當使用者開啟我們站點時（從桌面 icon 或者從瀏覽器），通過 Service Worker 能夠讓使用者在網路條件很差的情況下也能瞬間載入並且展現。

Service Worker 是用 JavaScript 編寫的 JS 檔案，能夠代理請求，並且能夠操作瀏覽器快取，通過將快取的內容直接返回，讓請求能夠瞬間完成。開發者可以預儲存關鍵檔案，可以淘汰過期的檔案等等，給使用者提供可靠的體驗。具體用法姐介紹詳見Service Workers: PWA 的關鍵

2.體驗 -- 為了保證首屏的載入，我們需要從設計上考慮，在內容請求完成之前，可以優先保證 App Shell 的渲染，做到和 Native App 一樣的體驗，App Shell 是 PWA 介面展現所需的最小資源。

App Shell 架構是構建 Progressive Web App 的一種方式，這種應用能可靠且即時地載入到您的使用者螢幕上，與本機應用相似。App“shell”是支援使用者介面所需的最小的 HTML、CSS 和 JavaScript，如果離線快取，可確保在使用者重複訪問時提供即時、可靠的良好效能。這意味著並不是每次使用者訪問時都要從網路載入 App Shell。 只需要從網路中載入必要的內容。。具體用法姐介紹詳見App Shell 模型

3.粘性 -- Web App Manifest 允許開發者控制 PWA 新增到桌面，允許定製桌面圖示、URL等等;PWA 可以通過給使用者傳送離線通知，讓使用者迴流
PWA：新增應用至桌面及分享
與使用者互動

二.移動端適配解決方案

移動端適配方案有很多，本專案提供了一種解決方案。這個方案的核心有兩點：

• 根據螢幕大小動態設定HTML根字型大小和viewport scale。實現這一點這個專案用到了hotcss這個工具，但由於官方配置略麻煩，也沒有相應的webpack專案官方配置說明，這裡直接把hotcss裡的src目錄下的hotcss.js內容拷貝出來，在自己專案中新建一個viewport.js的檔案，把hotcss.js裡的內容黏貼進去。然後在webpack的config檔案裡，根據你建的這個個viewport.js檔案的路徑，在entry把他新增進去，如圖所示：

• 在寫專案時直接使用設計稿標註的px單位，通過工具去把px單位轉化成rem單位。這個通過px2rem-loader這個工具就可以輕鬆實現。具體配置可參考vue使用px2rem

有了這兩者完美結合，移動端適配就很方便了。相比於淘寶和網易的適配方案，這個方案的優點主要是：

• 配置方便自由，簡單明瞭，不用標註多張設計稿
• 不用根據px值去手動計算rem值，直接根據設計稿寫px值即可，提高開發效率

此外，本專案引入了vuetify這個vue元件庫，這個庫是預設使用stylus開發的，為了滿足多需求本專案也配置了scss的開發環境，並提供了scss的元件模板，實現在不使用第三方元件庫時來自己實現css元件的提煉和複用。

三.總結

未來會根據這個模板實現一個真實專案，目前這個模板專案地址為pwa-vue-template,歡迎大家多多star~