Service Workers和离线缓存

1人阅读 评论(0) 收藏 举报

系列文章:

  1. Service Workers 和离线缓存 (本文)

  2. Notification with Service Workers push events

  3. PWA:添加应用至桌面及分享

第一次听到 Service Workers 这个词还是在去年 Google 来安利 Angular 2 的时候,那时就觉得很惊艳,想搞一搞,但是因为没把网站升级成 https 一直拖到现在。不久前,把网站升级成了 https,终于可以搞一发了。

本篇主要包含以下内容:

当然,还是先来看看 Service Workers 究竟是什么?

What's Service Workers?

Service Workers 是谷歌 chrome 团队提出并大力推广的一项 web 技术。在 2015 年,它加入到 W3C 标准,进入草案阶段。W3C 标准中对 Service Workers 的解释太细致,相对而言,我更喜欢 MDN 上的解释,更简练,更易于理解。

Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs. - MDN

简单翻译一下:Service workers 基本上充当应用同服务器之间的代理服务器,可以用于拦截请求,也就意味着可以在离线环境下响应请求,从而提供更好的离线体验。同时,它还可以接收服务器推送和后台同步 API。

那么,这项技术的浏览器支持情况是什么样,还是来看一眼 Can I use?

可以从看到,Chrome 和 Firefox, Opera 都已经支持 Service Workers,底下的备注也写到 Edge 在开发中,Safari 也考虑支持。至于 IE,船长都跳船了。看了 PC 端,再来看看移动端。移动端的支持率并不尽如人意,不过在安卓 4.4 之后,安卓原生浏览器,以及安卓版的 Chrome 都已经开始支持 Service Workers。

说句题外话,突然发现在 Can I use 中选择导入我国数据时,竟出现了 UC 和 QQ 浏览器的支持情况,口以口以

查看评论

HTML5-Service Worker实现离线页面访问

如果提到HTML5的新API,WebSocket ,Web Workers大家应该比较熟悉。WebSocket是用于简述请求数量的新协议,Web Workers是用于实现浏览器的多线程。而今天要介绍的...
  • qiqingjin
  • qiqingjin
  • 2016-06-10 23:27:38
  • 2647

阿里云前端周刊 - 第 36 期

点击有惊喜 推荐 1. Rust 默认可以编译为 WebAssembly https://www.hellorust.com/news/native-wasm-tar...
  • yunqishequ1
  • yunqishequ1
  • 2017-12-15 16:04:45
  • 161

Service Worker 缓存技术

一、关于H5缓存技术提到H5缓存我们应该会想到应用缓存(application cache),只需要在标签上加一个配置,然后编辑对应的index.appcache,就能实现我们的缓存。CACHE MA...
  • screaming_color
  • screaming_color
  • 2017-12-27 15:04:42
  • 104

Service Workers“早”知道?

最近关于Service Workers的研究与讨论日益增多,今天就给我大家梳理一些相关资源,让大家一睹为快!!...
  • whqet
  • whqet
  • 2015-11-16 09:43:03
  • 2100

ServiceWorker详解

原生App拥有web应用通常所不具备的离线体验,定时的默默更新,消息通知推送等功能。而新的Service Worker 标准让在web app上拥有这些功能成为可能。...
  • u013853928
  • u013853928
  • 2017-01-15 23:47:05
  • 6477

Service Workers/Web Workers/WebSockets的区别

原文戳这里前言之前在看面经的时候看到了“Service Workers”这个名词,赶紧百度了一下,发现许多博客对它的描述是“一个Service Worker是一段运行在浏览器后台进程里的脚本,他独立于...
  • wopelo
  • wopelo
  • 2017-11-22 20:22:48
  • 221

Service Workers 初体验

Service Workers 初体验 【https://www.w3ctrain.com/2016/09/17/service-workers-note/】 在开始和 Service W...
  • guojin08
  • guojin08
  • 2018-01-02 11:20:55
  • 55

网页离线缓存

什么是离线缓存 离线缓存,就是将指定的网页文件(例如css、js)保存到本地,当用户没有网络时,依旧可以通过浏览器使用这些文件。 为何要用离线缓存 从网站所有者的角度来说,增加离线缓...
  • poptxz
  • poptxz
  • 2016-12-06 16:20:50
  • 863

离线缓存demo

  • 2017年04月24日 20:33
  • 27.42MB
  • 下载

聊聊Service Worker

Web Workersweb worker: 为Web内容在后台线程中运行脚本提供了一种简单的方法,线程可以执行任务而不干扰用户界面,即:运行在后台的 JavaScript浏览器一般有三类 web W...
  • Panda_m
  • Panda_m
  • 2017-09-07 15:15:40
  • 394
    个人资料
    等级:
    访问量: 0
    积分: 22
    排名: 0