精读《Caches API》

2019-01-14 admin

1 引言

caches 这个 API 是针对 Request Response 的。caches 一般结合 Service Worker 使用,因为请求级别的缓存与具有页面拦截功能的 Service Worker 最配。

本周精读的文章是 cache-api,介绍了浏览器缓存接口的基本语法。

2 概述

浏览器拥有全局变量 caches 操作缓存。

caches 包含任意命名空间,可以通过 caches.open 创建或访问。

const myCache = await caches.open("myCache");

添加缓存

通过 add 添加缓存。由于 caches 缓存是基于请求的,因此参数可以是一个 URL 地址,或一个完整的 Request 对象:

// URL only
myCache.add("/subscribe");

// Full request object
myCache.add(new Request('/subscribe', {
    method: "GET",
    headers: new Headers({
    'Content-Type': 'text/html'
  }),
    /* more request options */
});

每执行 add 时,浏览器都会主动请求并缓存返回的 Response。

可以通过 addAll 批量添加缓存:

myCache.addAll(["/subscribe", "/assets/images/profile.png"]);

读取缓存

通过 match 读取缓存。与 add 类似,参数可以是 URL 地址或完整 Request 对象,同时支持 matchAll

const res = await myCache.match("/subscribe");

更新缓存

通过 addput 更新缓存。

当某个请求缓存需要更新时,你可以重新执行 add 操作。

同时 put 也可以更新缓存,你可以手动构造返回值,这样浏览器就不需要发请求了:

const request = new Request("/subscribe");
const fetchResponse = await fetch(request);
myCache.put(request, fetchResponse);

销毁缓存

通过 delete 销毁缓存。

你可以销毁某个路径的缓存:

myCache.delete("/subscribe");

也可以销毁某个缓存命名空间:

caches.delete("myCache");

结合 service Worker

可以利用 addEventListener('fetch') 监听浏览器请求时机,并在匹配到缓存时,直接替换为返回结果,当缓存不存在时才继续发请求。

self.addEventListener("fetch", (e) => {
    e.respondWith(
        // Check if item exists in cache
        caches.match(e.request).then((cachedResponse) => {

            // If found in cache, return cached response
            if (cachedResponse) return cachedResponse;

            // If not found, fetch over network
            return fetch(e.request);
        });
  );
});

3 精读

笔者利用 caches API + service worker 实现了纯浏览器端的后端渲染。

首先基于下面三个基本事实:

  • 利用 service worker 可以拦截请求。
  • caches 可以主动 put 修改缓存。
  • react-dom/server 可以在浏览器端执行。

这三个能力组合一下,我们真的可以实现前端 SSR:

  1. 打开页面时,利用 web worker 调用 react-dom/server 构造一个 SSR 字符串。
  2. 利用 caches.put 添加当前页面缓存,将 react-root 部分塞入构造好的 SSR 字符串。
  3. 下次打开页面时,优先命中缓存,仿佛是后端提供了 SSR 服务,但其实服务是由上一次浏览器提供的。

前端渲染有几个好处:

  1. 不消耗服务器计算资源,如果页面有百万 UV,可能一天就能节省几十万元服务器电费。
  2. 不消耗服务器存储资源,如果页面是千人千面的,后端 SSR 存储成本巨大,但分摊到个人电脑就不成问题。
  3. 不需要写两套代码。虽然服务端渲染重复利用前端资源,但 DOM 环境等都是模拟出来的,且前端代码还存在内存泄露风险,许多 SSR 的前端代码必须判断前后端环境,给维护造成了巨大负担。在前端渲染下这不成问题,我们的口号是:前端代码请交给浏览器执行。

笔者将这套前端渲染能力封装在 前端工程化工具 Pri 中,开启配置项 useServiceWorker=true clientServerRender=true 尝试。

后面有机会单独选一篇精读介绍 前端渲染,你也可以直接参考笔者 简陋的实现:由于 service worker 必须存在一个实体文件,因此脚手架会自动生成它,所以你看到的运行代码是一堆字符串。

4 总结

前端渲染是一个较为极端的例子,caches 更多用来缓存简单的静态页面,静态博文,或者不经常变动的后端接口。

留下一个思考题:你还能想到 caches 的其他用法吗?欢迎留言。

讨论地址是:精读《Caches API》 · Issue #124 · dt-fe/weekly

如果你想参与讨论,请点击这里,每周都有新的主题,周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

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

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

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

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

文章标题:精读《Caches API》

相关文章
图片上传之FileAPI与NodeJs
HTML5之fileAPI HTML5之fileAPI使得我们处理图片上传更加简单。 实例 html代码 <div class="form-group"> <label for="moda...
2017-02-17
详解本地Node.js服务器作为api服务器的解决办法
在看react-native教程的时候,遇到要在手机端调试,需要api服务器,但是由于Node.js自己就作为服务器,没有apache怎么解决这个问题,用apache和nginx也可以解决,但是有点复杂,我们就使用node已有的模块解决这个...
2017-03-15
一个 API 友好的 vuepress 主题
<g-emoji fallback-src=“https://assets-cdn.github.com/images/icons/emoji/unicode/1f4e6.png”>📦</g-emoji> ...
2018-05-30
NodeJS仿WebApi路由示例
用过WebApi或Asp.net MVC的都知道微软的路由设计得非常好,十分方便,也十分灵活。虽然个人看来是有的太灵活了,team内的不同开发很容易使用不同的路由方式而显得有点混乱。 不过这不是重点,我在做Node项目的时候就觉得不停的用u...
2017-03-15
使用Postman做API自动化测试
Postman 最基本的功能用来重放请求,并且配合良好的 response 格式化工具。 高级点的用法可以使用 Postman 生成各个语言的脚本,还可以抓包,认证,传输文件。 仅仅做到这些还不能够满足一个系统的开发,或者说过于琐碎,你仍需...
2017-12-18
用Gatsby和Strapi创建一个静态博客(翻译和自己探索过程中的经验总结)
原文参阅: Building a static blog using Gatsby and Strapi或https://blog.strapi.io/buildi…. 本篇主要是对其精华内容进行翻译, 以及实操过程中遇到的问题解决和探索...
2018-01-26
vue项目api接口管理
默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关。 import Vue from 'vue' import ax...
2018-04-20
NodeJS 微信公共号开发 - 获取并缓存 access_token 和 jsapi_ticket
背景 使用 NodeJS 进行微信公共号开发,后端调用各接口时都需使用 access_token,前端调用 js-api 则需要后端根据 jsapi_ticket 生成 signature。 由于 access_token 和 jsapi_...
2018-04-28
精读《重新思考 Redux》
本周精读内容是 《重新思考 Redux》。 1 引言 《重新思考 Redux》是 rematch 作者 Shawn McKay 写的一篇干货软文。 dva 之后,有许多基于 redux 的状态管理框架,但大部分都很局限,甚至是倒退。但直到看...
2018-05-14
已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用
vue-cli-project 已构建配置好的vuejs全家桶项目,统一管理后端接口 | 获取数据 | 请求数据,已包含vue-router,vuex,api,axios. webpack, 储存用vue-ls, 异步async/awai...
2018-05-25
回到顶部