用Service Worker实现离线应用

2json 发布于2019-08-01 17:56 / 1251人阅读

摘要：同时抓取一个请求及其响应，并将其添加到给定的。返回一个对象，的结果是对象值组成的数组。代码以下是一个实现离线应用的这个是一个简陋的离线应用，会缓存所有静态资源请求，即使你修改了和文件，刷新页面还是没有变化。

开始有兴趣了解Service Worker，是因为学习react时使用create-react-app创建的应用，src下面会有一个registerServiceWorker.js文件。后来在了解PWA时也看到了它的身影。于是就打算写一篇笔记详细了解一下。

什么是Service Worker

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.

— from MDN

翻译过来就是：Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。

service worker运行在非主线程的其他线程上，所以不会阻塞主线。，有自己独立的上下文，不能访问DOM。只能使用异步api。并且为了安全，service worker只能运行在https之上。部分浏览器的隐私模式也无法使用。

由于service workers是由chrome提出推广的技术，所以chrome支持最好。其他浏览器的支持情况就参考Can I Use了:

生命周期

盗用MDN的一张图。

离线应用相关接口

CacheStorage 在浏览器上的引用名叫 caches，CacheStorage 是多个 Cache 的集合，而每个 Cache 可以存储多个 Response 对象。虽然它是被定义在 ServiceWorker 的规范中，但可以在其他worker和window中使用。

在caches上调用 open 方法就可以异步地得到一个Cache对象的引用。

Cache.match(request, options)

返回一个Promise对象，resolve的结果是跟Cache对象匹配的第一个已经缓存的请求。

Cache.matchAll(request, options)

返回一个Promise 对象，resolve的结果是跟Cache对象匹配的所有请求组成的数组。

Cache.add(request)

抓取这个URL, 检索并把返回的response对象添加到给定的Cache对象.这在功能上等同于调用 fetch(), 然后使用 Cache.put() 将response添加到cache中.

Cache.addAll(requests)

抓取一个URL数组，检索并把返回的response对象添加到给定的Cache对象。

Cache.put(request, response)

同时抓取一个请求及其响应，并将其添加到给定的cache。

Cache.delete(request, options)

搜索key值为request的Cache条目。如果找到，则删除该Cache条目，并且返回一个resolve为true的Promise对象；如果未找到，则返回一个resolve为false的Promise对象。

Cache.keys(request, options)

返回一个Promise对象，resolve的结果是Cache对象key值组成的数组。

代码

以下是一个实现离线应用的demo - ServiceWorkerDemo

这个demo是一个简陋的离线应用，会缓存所有静态资源请求，即使你修改了index.js和index.css文件，刷新页面还是没有变化。要想看到新的变化，必须更改CACHE_KEY或者修改fetch事件的处理逻辑。

const CACHE_KEY = "demo";
const CACHE_FILES = [
    "/",
    "bg.jpg",
    "index.js",
    "index.css"
];


self.addEventListener("install", function(event) { // 监听worker的install事件
    event.waitUntil( // 延迟install事件直至缓存初始化完成
        caches.open(CACHE_KEY)
            .then(function(cache) {
                console.log("Cache created");
                return cache.addAll(CACHE_FILES);
            })
    );
});

self.addEventListener("activate", function(event) { // 监听worker的activate事件
    event.waitUntil( // 延迟activate事件直到cache初始化完成
        caches.keys().then(function(keys) {
            return Promise.all(keys.map(function(key, i) { // 清除旧版本缓存
                if (key !== CACHE_KEY) {
                    return caches.delete(keys[i]);
                }
            }))
        })
    )
});

self.addEventListener("fetch", function(event) { // 拦截资源请求
    event.respondWith( // 返回资源请求
        caches.match(event.request).then(function(res) { // 判断是否命中缓存
            if (res) {  // 返回缓存的资源
                return res;
            }
            fallback(event); // 执行请求备份操作
        })
    )
});

function fallback(event) {  // 恢复原始请求
    const url = event.request.clone();
    return fetch(url).then(function(res) { // 请求资源
        //if not a valid response send the error
        if (!res || res.status !== 200 || res.type !== "basic") {
            return res;
        }

        const response = res.clone();

        caches.open(CACHE_KEY).then(function(cache) { // 缓存从刚刚下载的资源
            cache.put(event.request, response);
        });

        return res;
    })
}

其他用途

消息推送

后台消息传递

网络代理，转发请求，伪造响应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51469.html

【PWA学习与实践】(3) 让你的WebApp离线可用

摘要：学习与实践系列文章已整理至学习手册，文字内容已同步至。本文是学习与实践系列的第三篇文章。引言其中一个令人着迷的能力就是离线可用。但是，如果你注意到文章开头的图片就会发现，离线时我们不仅可以访问，还可以使用搜索功能。《PWA学习与实践》系列文章已整理至gitbook - PWA学习手册，文字内容已同步至learning-pwa-ebook。转载请注明作者与出处。本文是《PWA学习与实...

since1986 2019-08-23 12:46 评论0 收藏0
用Service Worker实现离线应用

摘要：同时抓取一个请求及其响应，并将其添加到给定的。返回一个对象，的结果是对象值组成的数组。代码以下是一个实现离线应用的这个是一个简陋的离线应用，会缓存所有静态资源请求，即使你修改了和文件，刷新页面还是没有变化。开始有兴趣了解Service Worker，是因为学习react时使用create-react-app创建的应用，src下面会有一个registerServiceWorker.js...

jindong 2019-08-21 17:28 评论0 收藏0
构建离线web应用（一）

摘要：我喜欢移动，而且也是那些坚持使用技术构建移动应用程序的人之一。我们准备做这样的一个渐进式应用是典型的旨在提高用户离线体验的应用。当我们开始构建应用时，你就能理解上面的场景了。的作用范围是针对相对路径的。最佳的做法是在应用的入口。我喜欢移动app，而且也是那些坚持使用Web技术构建移动应用程序的人之一。经过技术的不断迭代（可能还有一些其它的东西），移动体验设计愈来愈平易近人，给予用户...

Sanchi 2019-08-21 17:31 评论0 收藏0
前端应该知晓的PWA

摘要：对来说主要两个事件。是当前的变量，执行该方法表示强制当前处在状态的进入状态。页面关闭之后，老的会被干掉，新的接管页面新的生效后会触发事件。一、传统web 应用当前web应用在移动时代并没有达到其在桌面设备上流行的程度，下面有张图来对比与原生应用之间的差别。 showImg(https://segmentfault.com/img/bVbaD44?w=1920&h=1080)...

GT 2019-08-22 17:11 评论0 收藏0
[翻译]Service workers：PWA背后的英雄

摘要：如果返回的被拒，另一个同步事件被自动地开始重试操作，直到返回一个成功状态的。推送机制使得服务器能够向发送信息，然后将信息展示给用户才是消息通知。然后它们可以发送消息通知，或者是更新的状态。原文地址：https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-...

snifes 2019-08-22 14:48 评论0 收藏0