[学习交流] 【成都校区】离线Web应用入门

说明

所谓的离线应用，不是指一直离线，一直没网的话，那还玩些什么呢？而是指一开始用户是有网络的，但是用户因为走进地铁，或者买了近两年的iPhone，突然就没网了，此时，让页面展示一些缓存的内容。

理清思路、抓住关键实现一个离线Web应用的关键在于：拦截请求和缓存资源。

“拦截请求”通过Service Worker实现。
“缓存资源”通过CacheStorage实现。

在此假设读者了解Service Worker和CacheStorage的基础。
简单来讲，如果不考虑HTTP缓存的话，一个普通Web App获取静态资源是从服务器获取的。但是Service Worker相当于在浏览器的出口加了一层代理，有着拦截并处理请求的能力，这使得我们有机会选择资源是从服务器取还是从CacheStorage中取。
CacheStorage既然作为一种缓存，那大概就要遵从“如果命中缓存则返回缓存中的资源，否则从远处取”的基本策略。
具体到一个Web应用，静态资源可以粗略分为html和其它（js、css、图片等），html作为应用入口，有着它的特殊性。实现离线应用的关键在于缓存入口html，这是实现离线应用的核心思路。设想一下，如果html保存在本地，那在无网络的情况下，浏览器也是可以打开的，至于html引用的其它静态资源，如果缓存过，那也是可以访问的。

代码

首先，初始化一个项目，在此以Vue项目为例，在入口html中注册service worker：

[JavaScript] 纯文本查看 复制代码

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('/demo/service-worker.js').then(function (reg) {
          console.log('service-worker.js注册成功');
        }, function (err) {
          console.log('service-worker.js注册失败');
        });
      });
    }

service-worker.js代码：

[JavaScript] 纯文本查看 复制代码

// 每次更新需要更新版本号
const cacheVersion = 'v1';

// service worker激活时的初始化操作，非关键代码，可以不看
self.addEventListener('activate', function (event) {
    event.waitUntil(
        caches.keys().then(function (cacheNames) {
            return Promise.all(
                cacheNames.map(function (cacheName) {
                    // 如果当前版本和缓存版本不一致，则删除其它版本的cache
                    if (cacheName !== cacheVersion) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

// 核心代码，最好看一看
self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                // 如匹配了cache，则直接返回cache中的资源
                // 否则fetch资源并缓存下来
                return response || fetch(event.request).then(function (r) {
                    caches.open(cacheVersion).then(function (cache) {
                        cache.put(event.request, r);
                    });
                    return r.clone();
                });
            })
    );
});

成果展示

代码部署好后，访问页面，刷新，可以看到：cacheStorage中的静态资源已经缓存成功：

然后我们断网，刷新，可以发现：页面还是可以访问的，静态资源的响应状态码是200，但标注了(from ServiceWorker)：

总结

所以，如此少的代码，就可以实现一个离线Web应用，但是从Demo到实际应用，还有好长的路要走。无论如何，本文所述的是离线Web应用的基本思路和方法。

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【成都校区】离线Web应用入门

0 个回复