Progressive Web Applications(PWA)学习简记

一、Service workes

PWA运行服务的容器。离线服务、通知服务都需要注册在这里面。下简称“服务”。

二、注册服务

写在< body/>后

if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./service-worker.js')//服务js
             .then(function() { console.log('Service Worker Registered'); });
  }

三、服务状态监听

服务安装时 install，安装缓存文件

var cacheName = 'weatherPWA-step-6-1';
//缓存文件数组
var filesToCache = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/styles/inline.css',
  '/images/clear.png',
  '/images/cloudy-scattered-showers.png',
  '/images/cloudy.png',
  '/images/fog.png',
  '/images/ic_add_white_24px.svg',
  '/images/ic_refresh_white_24px.svg',
  '/images/partly-cloudy.png',
  '/images/rain.png',
  '/images/scattered-showers.png',
  '/images/sleet.png',
  '/images/snow.png',
  '/images/thunderstorm.png',
  '/images/wind.png'
];

self.addEventListener('install', function(e) {//install状态，初次载入页面运行，安装缓存文件
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

服务启动时 activate，检测服务和缓存是否更新。

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {//缓存有更改
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);//删除缓存
        }
      }));
    })
  );
  return self.clients.claim();
});

服务请求时fetch，判断是否使用服务缓存。

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

四、manifest.json

位于站点根目录，这个清单文件是很有趣的。配置桌面icon和主题颜色

{
  "name": "Weather",
  "short_name": "Weather",
  "icons": [{
    "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

五、更详细内容

谷歌PWA教学源站