一个 PWA 的诞生

2018-09-17 admin

PWA(Progressive Web Apps)虽然是网页应用,但是可以带来媲美原生的用户体验,其中包含离线可用,后台推送等功能。PWA 不是一个新名词,早在 2015 年已经开始提出这个思想并明明,但是直到 iOS12 发布,PWA 终于可以在 iOS 中添加到主屏,只有安卓和 iOS 都能使用 PWA 的基本功能,它才算是真的开始走近大众。想了解 PWA 可以看看百度的 LAVAS 官网,在国内网站中 LAVAS 官网会有比较完整的 PWA 资料。

本文可以提前让大家熟悉 PWA 搭建,文中提到的配置来自一个 Redesign 的 nipponcolors,最近才做好的,使用的各种库都是现在(2018.09.14)最新的,可用的,另外本文不讨论应用功能,单纯讲讲 PWA 的搭建。

仓库地址:https://github.com/ssshooter/… 网页地址:https://ssshooter.github.io/n…

搭建

Vue-cli3 与 2 的区别挺大的,3 默认搭建工程并非像 2 一样拉取模板,而是自己选择需要的 feature 生成项目。

clipboard.png

要生成 PWA 项目请勾上 PWA Support

一个关于 HMR 的已知问题

假设大家都知道 HMR(热模块更新)是什么了,vue-cli3 的某些版本可能会有这么一个问题,HMR 无法使用,控制台就一直显示 waiting 连接,文件一改直接显示连接断开。解决方案有二:

  1. 如果你的依赖使用 cnpm 安装,尝试删掉 node_modules 后使用 npm 下载。

  2. vue.config.js 作以下配置

    chainWebpack: config => {
        config.resolve.symlinks(true)
        return config
    },
    

参考地址

值得注意的配置

eslint 配置

在这里首先推荐一下尾逗号,加上尾逗号的好处只有一个,但真的十分重要,那就是 diff 会非常好看。然后 <a>eslint-plugin-vue</a> 插件是一些预设规则组合,分 base,essential,strongly-recommended,recommended 四级,请自由选择,没有最好的搭配,只要用得舒服就好,团队合作还是非常推荐定好 eslint 规则,使用尽量详细的同一套规则,在代码合并时感觉会非常爽快。

clipboard.png

设置 eslint 后建议配置开发服务器的 overlay 选项,在 eslint 报错时会覆盖在页面上,时刻提醒你写代码得有信条。

  devServer: {
    overlay: {
      warnings: true,
      errors: true,
    },
  },

资源优化

图片

vue-cli3 搭建的工程没有自带图片优化插件,所以请自行安装。有更好的图片压缩插件求推荐啦,这里使用的是 imagemin-webpack-plugin,基本配置如下:

var ImageminPlugin = require('imagemin-webpack-plugin').default
// Or if using ES2015:
// import ImageminPlugin from 'imagemin-webpack-plugin'

module.exports = {
  plugins: [
    // Make sure that the plugin is after any plugins that add images
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', // Disable during development
      pngquant: {
        quality: '95-100'
      }
    })
  ]
}

字体

字体问题是个大问题,因为中文字体实在太太太太大了,随随便便一个都 10m 了,等待这东西下载真的給用户体验带来致命打击,但是!但是!有这么一个程序!

之前一直知道 font-spider,它的功能是获取使用到的字体,然后分析出使用了改字体的字符,最后把字符抽离出来。这大大减少了中文字体的体积,但是缺不能用于 js 渲染的网页,后来才找到 font-spider-plus,虽然要手动操作一下(最简单的方法:发布网页之后用 fsp 把用到的字爬出来),但是得到的优化真的很大哦!

响应式设计

PWA 给了我们一个很简单的跨平台方法,不只有移动端可以添加到首屏,PC 端也同样可以,所以响应式设计对 PWA 可以说是必须的。 PC 端的添加方法在 F12 里,至于更加方便的方法…好像是要改 flag 才能用,那么也谈不上多方便了,所以不介绍了😂

clipboard.png

PWA 专属问题

建议使用 LightHouse 给你的 PWA 评分,报告中还会带有修改建议,十分实用。

manifest.json

PWA 添加至桌面的功能实现依赖于 manifest.json。这个文件结构很简单,填写对应字段即可,可在这里了解详情。

Service Worker 刷新

针对 PWA 功能来说,项目成功生成就已经配置好离线缓存功能,对 Service Worker 不熟悉的同学来说可以说很方便了。但是对于推送功能和 Service Worker 的更多细节仍然需要深入研究才能流畅使用这个新兴玩意。 (以下称 Service Worker 为 SW) 有一个问题特别值得注意,那就是 SW 的更新问题。SW 控制项目环境的缓存,但是 SW 更新后怎么刷新缓存就不那么容易理解了。SW 更新后,会进入 waiting 状态,旧的 SW 依旧正常运行,所以新的 SW 无法激活,你需要关闭整个浏览器才能把旧的 SW 关闭,再次打开网页就能看到新的 SW 运作了。 有一个方便一点的方法,配置

    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true,
    },

之后,第一个选项如其字面意思,会跳过 Waiting 状态,而 clientsClaim 可以让 SW 进入 activated 状态后立即控制页面(但是实际上,SW 即使立刻控制页面并输出新数据,SPA 也要刷新才能渲染为最新版本,但这也总比关闭浏览器好多了)。 详细原理请查阅谷歌官方资料(需要梯子)。

最后,给你一个佛系刷新方法

Service Worker 的特殊之处除了由浏览器触发更新之外,还应用了特殊的缓存策略: 如果该文件已 24 小时没有更新,当 Update 触发时会强制更新。这意味着最坏情况下 Service Worker 会每天更新一次。

Preload

clipboard.png

这个是 Lighthouse 提醒我的。对于一些必要的资源,可以使用 Preload 预先下载(特别是字体或图片等资源),不必等使用时再下载,这又将会是几百毫秒的等待。更多信息可以参考 vue-cli 官网相关页面:https://cli.vuejs.org/zh/guid…

最后

完整配置地址 https://github.com/ssshooter/… https://github.com/ssshooter/… 这是一个最最简单的 PWA,没有对 SW 进行深度配置,很多功能没有用上。Vue-cli3 搭建的项目使用 workbox-webpack-plugin,SW 默认是自己生成的,需要自己附加 SW 功能可以使用 InjectManifest 插件。最后提一下 Lavas App,可以把你的 PWA 包装成一个 apk,本质是快捷方式,方便了还没支持 PWA 的安卓系统。

如果有其他问题,可以在评论区讨论~

原文链接:https://segmentfault.com/a/1190000016420122

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-40450.html

文章标题:一个 PWA 的诞生

相关文章
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回&quot;undefined&quot;:一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
回到顶部