PWA离线简单示例

PWA（Progressive Web App）是H5页面的一种进阶形式，大家有空可以深入学习了解下，这里主要介绍它的离线功能。
场景是这样的：我们做了一个简单的网页应用，想让它在用户的设备上离线仍可访问，那么我们需要做哪些工作呢？
首先得确保网页通过https访问
我们还需要写一个manifest.json的文件，放在页面文件所在路径下，其内容如下：

{
  "name": "浏览器扫二维码PWA App",
  "short_name": "ScanQR_PWA",
  "start_url": "/ScanQR.html",
"display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

这些参数值你可以自行定义
然后在页面html中引用

  <link rel="manifest" href="manifest.json">

还需要写一个service-worker.js文件，用于定义缓存和监听 fetch 事件

// 监听安装事件
self.addEventListener('install', function(event) {
  // 缓存应用的资源
  event.waitUntil(
    caches.open('pwa-cache-v1')
      .then(function(cache) {
        return cache.addAll([
          '/',
          '/ScanQR.html',
          '/jsQR.js',
          '/ScanQR.js'
        ]);
      })
  );
});

// 监听 fetch 事件
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // 缓存命中返回缓存内容
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

将以下代码放在html的script开头的地方，首先注册service-worker

if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('/service-worker.js')
		.then(function(registration) { console.log('Service Worker 注册成功:', registration.scope); })
		.catch(function(err) { console.log('Service Worker 注册失败:', err); });
	}

这样就齐活了，是不是很简单。
浏览器首次访问会注册service-worker，service-worker就开始工作了，把相关文件缓存到本地，并监听fetch事件。之后再访问，已经有缓存的情况下，就不会再访问目标网站， 而是直接从本地缓存加载页面脚本，渲染执行，目标网站即使离线，也不会影响了。
当然了，如果该网页应用是个单机版应用，那应该没有啥问题，如果还是个网络应用的话，那么仅该网页缓存走本地，其他目标资源还得走网络，它们不可访问也会影响离线效果的。