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

关注下面的标签,发现更多相似文章
评论
说说你的看法