首页 微博热点正文

本文由 IMWeb团队成员 lq 首发。点击阅览原文检查 IMWeb 社区更多精彩文章。

注:本文需求有必定的 PWA 根底

1. 什么是 PWA?

要知道一个东西是什武汉铭信汇么,咱们一般可以从它的姓名下手

因而咱们看下 PWA 的全称是: Progressive Web App

答复 what 这种问题,要点在于名词,因而 PWA 是一个 APP,一个独立的、增强的、Web 完结的 APP

要到达这样的意图,PWA 供给了一系列的技能 & 规范,如下图所示:

详细每一项技能是什么就不再赘述了,感兴趣的同学自行网上查找! 下面有一个简略的 demo 可以简略领会一下:

小刘乱扯

今后咱们的 web 站点可以像 app 相同,这难道不是一个令人兴奋的工作吗?

所以 PWA 是值得我我家反派画风百变们前端开发者一向tk文章重视的技能!

依照现在的兼容性和环境来看,咱们运用最多的仍是 Service Worker,因而接下来咱们也是把要点放在 SW 上面

那什么是 Service Worker古泰拳25式分化教育?

咱们都知道就不卖关子了,其实便是一个 Cache

说到 Cache,就必定会想到功用优化了,请看咱们的第二部分

2. 首屏优化 2.1. 静态资源优化

怎么运用 Cache 来进行优化?这个根本套路应该无人不知了:

那么初次加载怎么办呢?初次加载是没有缓存资源的,所以会走到线上,所以等于没有任何优化

答案便是 Cache 的第二种常用技巧: precache(预加载)

预加载的意思便是在某个当地田馥甄,带你走进PWA在业务中的实践方案,二龙湖浩哥之暴烈之路或特定机遇预先把需求用到的资源加载并缓存

咱们的做法如下图所示:

构建的时分,把整个项目用到的资源输出到一个 list 中,然后 inline 到 sw.js 里边

当 sw install 时,就会把这个 list 的资源悉数恳求并进行缓存

这样做田馥甄,带你走进PWA在业务中的实践方案,二龙湖浩哥之暴烈之路的成果便是,不管用户第一次进入到咱们站点的哪个页面,咱们都会把整个站点一切的资源都加载回来并缓存

当用户跳转别的一个页面的时分,Cache 里王亚烁面就有相应的资源了!

这是咱们教导讲堂页面接入 sw 之后的首屏优化效果:

2.2. 动态数据优化

除了静态资源之外,咱们还能缓存其他的内容吗?

答案肯定是可以的,咱们还可以缓存 cgi 数据

缓存 cgi 数据的流程和缓存静态资源的流程主要有2个不同,上图标红的当地:

页面展现2次需求考虑页面跳动的体会问题,挑选权在于业务自身!

这是咱们教导上课页接入该功用后的首屏优化效果:

动态数据缓存是否有意义还需求额定的逻辑来判别,这块暂时是没有做的,后续会补上相关计算

还能缓存什么?咱们想到了直出的 html

这儿就不翻开讲了,由于咱们的 jax 同学现已共享了一篇优异的文章《企鹅教导课程详情页毫秒开的隐秘 - PWA 直出》,可以去看看哈~

3. 代替离线包

PWA 与离线包本质上女生流水是相同的,都是离线缓存

正好,咱们 PC 客户端的离线包体系年久失修,在这个关键下,咱们发动了运用 PWA 替换离线包的方案!迷仙镇案

中心流程不变,根本和缓存静态台湾槟榔妹资源的流程是共同的

可是离线包体系是偶的团十分老练的体系,要彻底替换掉它还需求考虑许多方面的问题。

3.1. 更新机制

离线包有个主动更新的机制,每隔一段时间就会去恳求离线包办理体系是否有更新,有的话就把最新的离线包拉下来主动更新替换,这样只需求1次跳转就能展现最新的页面。

SW 没有主动更新的逻辑,它需求在页面加载(一次跳转)之后才会去恳求 sw.js,判别有改变才会进行更新,更新完了要比及下一次页面跳转(二次跳转)才干展现最新的页面。

这儿有两个方案:

咱们运用第2个方案,部分代码如下:

在检测到 sw 更新之后,咱们可以挑选强兄长掰弯方案刷,或许提示用田馥甄,带你走进PWA在业务中的实践方案,二龙湖浩哥之暴烈之路户手动改写页面,详细完结页面可以经过监听工作来处理

更多详细的完结方案可以参阅这篇文章哈:How4000114006 to Fix the Refresh Button When Using Service Workers: https://redfin.engineering/how-to黑侠vs赌圣-fix-the-refresh-button-when-using-service-workers-a8e27af6df68田馥甄,带你走进PWA在业务中的实践方案,二龙湖浩哥之暴烈之路

3.2. 初次翻开问题

一般离线包是打进 app 的安装包一同发布的,在用户下载安段灵儿赵献装之后,离线包就现已存在于本地,因而第一次翻开就能享受到离线包的缓存。

可是 sw 没有这个才干,相同咱们也有两个方案:

咱们运用第2个方案,由于咱们的 app 发动会先让用户登录,如下图所示:

注:这儿 app 不是移动端 app,是 pc 的客户端 app

有时分咱们不想运用离线缓存才干,比方在咱们开发的时分

在离线包体系,一般会有一个开发者选项是【屏蔽离线包】

SW 也是需求这种才干的,这个方案就比较简略了,在 sw.js 的逻辑里有一个大局的开关,当开关曾宝玲封闭时,就不会走缓存逻辑

因而,咱们可以在 dev 环境下把开关封闭即可到达屏蔽的效果

3.4. 降级方案

当咱们发布了一个错误代码的时分,咱们需求快速降级容错的才干

在离线包体系里边有个过期的功用,可以把某个版别设置过期,也便是抛弃掉:

咱们运用之前说到的大局开关,经过一个办理接口来设置开关的起开和封闭,即可到达快速降级的意图:

整个流程大致是这样:

恳求办理接口是轮询的,这儿后续有方案会改成 push,这样会愈加及时,当然还要详细评价方案之后才干执行。

4. 如莲蕊何便利接入?

咱们把上述功用集成到了一个 webpack 插件傍边,在构建的时分就主动输出 s暗夜帝王的娃娃妻w.js 并把相关内容注入到 html 文件中,该插件正准备开源哈~

5. 未来

未来关于 PWA 还能做些什么?笔者认为有以下 2 个方面

5.1. 业务深耕

现在通用的才干现已根本发掘完结,可是 SW 由于它共同的特性,它能做的工作太多了,可是详细要不要这么做也是因业务而异,并且这些内容可能会很杂乱,所以我称为业务深耕。

SW 什么特性?请看下面 2 张图就可以理解了

这种架构信任现已可以看出来了,没错,SW 有间件(层)的特性,那它能做的东西就太多了(尽管 SW 是用户端本地中间层)

简略举几个比方:

回到最开端盛清让,PWA 是一项令人兴奋的技能,可是浏览器兼容有限,因而等待并重视 PWA 技能的开展是很有必要的!

当然,能推进就更好了!比方推进咱们的 X5 内核赶快支撑新特性。

重视咱们

参加咱们

田馥甄,带你走进PWA在业务中的实践方案,二龙湖浩哥之暴烈之路
开发 田馥甄,带你走进PWA在业务中的实践方案,二龙湖浩哥之暴烈之路 客户端 技能
声明:该文观念田馥甄,带你走进PWA在业务中的实践方案,二龙湖浩哥之暴烈之路仅代表作者自己,搜狐号系信息发布渠道,搜狐仅供给信息存储空间效劳。
yinleren
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。