當vue遇到pwa--vue+pwa移動端適配解決方案模板案例

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

一.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~