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

一.pwa

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

• 可靠 - 即使在不穩(wěn)定的網(wǎng)絡(luò)環(huán)境下，也能瞬間加載并展現(xiàn)
• 體驗 - 快速響應(yīng)，并且有平滑的動畫響應(yīng)用戶的操作
• 粘性 - 像設(shè)備上的原生應(yīng)用，具有沉浸式的用戶體驗，用戶可以添加到桌面

大家看到這問題來了，pwa如何做到這上面三點呢？主要是通過一系列的前端技術(shù)，來做到以上幾點。下面依次介紹：
1.可靠 -- 當用戶打開我們站點時（從桌面 icon 或者從瀏覽器），通過 Service Worker 能夠讓用戶在網(wǎng)絡(luò)條件很差的情況下也能瞬間加載并且展現(xiàn)。

Service Worker 是用 JavaScript 編寫的 JS 文件，能夠代理請求，并且能夠操作瀏覽器緩存，通過將緩存的內(nèi)容直接返回，讓請求能夠瞬間完成。開發(fā)者可以預存儲關(guān)鍵文件，可以淘汰過期的文件等等，給用戶提供可靠的體驗。具體用法姐介紹詳見Service Workers: PWA 的關(guān)鍵

2.體驗 -- 為了保證首屏的加載，我們需要從設(shè)計上考慮，在內(nèi)容請求完成之前，可以優(yōu)先保證 App Shell 的渲染，做到和 Native App 一樣的體驗，App Shell 是 PWA 界面展現(xiàn)所需的最小資源。

App Shell 架構(gòu)是構(gòu)建 Progressive Web App 的一種方式，這種應(yīng)用能可靠且即時地加載到您的用戶屏幕上，與本機應(yīng)用相似。App“shell”是支持用戶界面所需的最小的 HTML、CSS 和 JavaScript，如果離線緩存，可確保在用戶重復訪問時提供即時、可靠的良好性能。這意味著并不是每次用戶訪問時都要從網(wǎng)絡(luò)加載 App Shell。 只需要從網(wǎng)絡(luò)中加載必要的內(nèi)容。。具體用法姐介紹詳見App Shell 模型

3.粘性 -- Web App Manifest 允許開發(fā)者控制 PWA 添加到桌面，允許定制桌面圖標、URL等等;PWA 可以通過給用戶發(fā)送離線通知，讓用戶回流
PWA：添加應(yīng)用至桌面及分享
與用戶互動

二.移動端適配解決方案

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

• 根據(jù)屏幕大小動態(tài)設(shè)置HTML根字體大小和viewport scale。實現(xiàn)這一點這個項目用到了hotcss這個工具，但由于官方配置略麻煩，也沒有相應(yīng)的webpack項目官方配置說明，這里直接把hotcss里的src目錄下的hotcss.js內(nèi)容拷貝出來，在自己項目中新建一個viewport.js的文件，把hotcss.js里的內(nèi)容黏貼進去。然后在webpack的config文件里，根據(jù)你建的這個個viewport.js文件的路徑，在entry把他添加進去，如圖所示：

image.png

• 在寫項目時直接使用設(shè)計稿標注的px單位，通過工具去把px單位轉(zhuǎn)化成rem單位。這個通過px2rem-loader這個工具就可以輕松實現(xiàn)。具體配置可參考vue使用px2rem

有了這兩者完美結(jié)合，移動端適配就很方便了。相比于淘寶和網(wǎng)易的適配方案，這個方案的優(yōu)點主要是：

• 配置方便自由，簡單明了，不用標注多張設(shè)計稿
• 不用根據(jù)px值去手動計算rem值，直接根據(jù)設(shè)計稿寫px值即可，提高開發(fā)效率

此外，本項目引入了vuetify這個vue組件庫，這個庫是默認使用stylus開發(fā)的，為了滿足多需求本項目也配置了scss的開發(fā)環(huán)境，并提供了scss的組件模板，實現(xiàn)在不使用第三方組件庫時來自己實現(xiàn)css組件的提煉和復用。

三.總結(jié)

未來會根據(jù)這個模板實現(xiàn)一個真實項目，目前這個模板項目地址為pwa-vue-template,歡迎大家多多star~

作者：nightZing
原文：https://juejin.im/post/5af264296fb9a07aa54248f9