云社区 博客 博客详情
云社区 博客 博客详情

【Chrome web.dev Live 2020总结】第二天第8集:高级PWA模式

华为云官网技术团队 发表于 2020-07-23 10:48:19 07-23 10:48
华为云官网技术团队 发表于 2020-07-23 10:48:19 2020/07/23
0
0

【摘要】 本文主要介绍4种高级PWA模式,并用workbox libraries 展示如何实现4种不同的模式。

模式一:弹性搜索体验

  • 介绍

    这种模式能用在任何提供搜索功能的网站。当用户在安卓设备上谷歌搜索一些东西的时候断网了,这个时候它不是提示一个报错信息页,而是显示一个自定义离线的页面,请求用户通知权限,如果用户点击同意,那么等到网络恢复的时候,用户会受到一条搜索功能现在可以用了的通知,点击这则通知用户就可以直接跳转到之前的查询页面。

实现这种模式的核心就是background sync api,它可以使用户在拥有稳定网络之前去进行其他操作。

在workbox中的实现代码:

插件具体代码:

接受一个参数来记录失败的访问记录方便等网络好了之后再访问,还有一个回调函数,用来等到网络顺畅之后调用重新访问那些失败的访问记录。

模式二:service workers自适应加载

  • 介绍

这种模式主要利用serviceworkers,不管网络和设备如何,他都可以提供一个较快的访问速度。

Terra 是巴西最大的媒体网站之一,它有很多连接速度不同的用户群。为了给用户提供一个更加稳定的服务,他们把service workers和网络信息api结合起来,在2g或3g连接向用户提供低质量的图像,以达到轻便快速的效果。

  • 在workbox中的实现代码:

在插件中限制进入的用户数量,你也可以自己添加自定义插件。

你可以检查连接的类型,如果是低速连接,就可以创建一个新的低质量图片的url,再根据这个url创建一个新的请求,根据这些条件获取最合适的图像文件。

模式三:即时导航体验

  • 介绍

这种模式对各种类型的网站都有用,因为我们在网站中执行任务需要很多步骤,每个步骤都是一个导航请求,html页面的导航实时请求通常通过网络来满足。这意味着要使用无缓存(no-cache)或max-age=0的缓存控制头,以确保响应相当新鲜,但是这样就可能会响应比较慢,为了解决这个问题,我们可以利用“预取”这项技术。

预取通常是通过在页面中使用资源提示来实现的。预取标签告诉浏览器以最低浏览器版本来获取资源,并将其保存在http缓存中五分钟。

  • 在workbox中的实现代码:

模式四:使用service workers来预缓存应用外壳

  • 介绍

这种模式主要应用于使得多页应用程序感觉像是单页应用程序。DEV是很多软件开发人员忠爱的平台,它是一个多页应用程序,让我们看下他们是怎么做的:

首先,他们为主页的页眉和页脚创建了部分内容,这些会被service workers添加到缓存中,即预缓存。页面内容是导航时从网络中实际获取的唯一部分。

但是这个解决方案的关键在于流媒体的使用,多亏了它,才可以在完全响应就绪之前在屏幕上绘制页面内容。

在workbox中的实现代码:

头部尾部使用缓存优先策略,中间内容部分使用网络连接,workbox再把这些流媒体整合起来在发送给客户端。

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消