books

游戏规则改变者 Service Worker

2-dim-code

吴小倩, W3C

The World Wide Web Consortium (W3C)万维网联盟

  • 尽展万维网全部潜能

  • 发布同时符合用户和商业利益的标准

  • ONE WEB FOR ALL

  • W3C的工作涉及到Web很多技术方向：文本和图形化展示的样式，Web多媒体（视频、音频），安全，支付，Web大数据，无障碍访问，移动技术等等

Available_on_the_App_Store

你也许已经知道这些规则：

Web Storage - HTML5 Offline - Indexed DB - Quota Management - ServiceWorkers

Web Storage

cookie

  • 提供两种在客户端存储持久化名-值对数据的新方式：

    1. sessionStorage
    2. localStorage
  • 类似Cookies，但弥补Cookies的不足；被浏览器厂商广泛支持。
  • 例子：在不同窗口或者页面里面，访问同一个网站，购买飞机票。

HTML5 Offline

  • W3C HTML5.0 推荐标准即将发布。
  • 资源？下载？离线？
  • 提供manifest
  • 例子：“时钟”应用，由"clock.html"，"clock.css"和"clock.js"三个文件组成—— 
    <html manifest="clock.appcache"></html>

Indexed DB

  • 取代Web SQL；
  • 对象存储！高效！
  • 重要的解决方案，浏览器厂商逐步支持中。 indexdb

Quota Management

  • 各种存储API的资源管理者：包括Application Cache，FileSystem API，Indexed DB，Web SQL等；
  • 沟通和管理本地存储：容量和上限。
  • 例子： 
    // Query current usage and availability in Temporary storage:
navigator.storageQuota.queryInfo("temporary").then(
  function(storageInfo) {
    // Continue to initialize local cache using the obtained
    // usage and remaining space (quota - usage) information.
    initializeCache(storageInfo.usage,
                    storageInfo.quota - storageInfo.usage);
  });

Service Workers

Service Workers的主要接口

  • navigator.serviceWorker.register(url, options)

    两种情况下会失败：

    1. URL和当前页面不同源；
    2. 这不是一个https请求；

  • Lifecycle:

    • download, install, activate...(fetch,waitUntil)
  • Cache API: add, match, delete, clear

一些帮助理解SW的材料

谢谢 & 欢迎提问

以上分享仅代表个人解读

Slides supported by reveal.js