当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~