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

模式一：弹性搜索体验

• 介绍

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

实现这种模式的核心就是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再把这些流媒体整合起来在发送给客户端。