写在前面：这个项目杂七杂八看起来很杂，这篇文章主要是就是介绍下这个模板项目的几个要点，让大家从这个项目中能学到真正实用的技术要点，项目地址在文末。

一.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把他添加进去，如图所示：

image.png

• 在写项目时直接使用设计稿标注的px单位，通过工具去把px单位转化成rem单位。这个通过px2rem-loader这个工具就可以轻松实现。具体配置可参考vue使用px2rem

有了这两者完美结合，移动端适配就很方便了。相比于淘宝和网易的适配方案，这个方案的优点主要是：

• 配置方便自由，简单明了，不用标注多张设计稿
• 不用根据px值去手动计算rem值，直接根据设计稿写px值即可，提高开发效率

此外，本项目引入了vuetify这个vue组件库，这个库是默认使用stylus开发的，为了满足多需求本项目也配置了scss的开发环境，并提供了scss的组件模板，实现在不使用第三方组件库时来自己实现css组件的提炼和复用。

三.总结

未来会根据这个模板实现一个真实项目，目前这个模板项目地址为pwa-vue-template,欢迎大家多多star~

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