Progressive Web Applications(PWA)学习简记

来源：互联网发布：美股数据下载编辑：程序博客网时间：2024/06/15 22:13

一、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教学源站

阅读全文

0 0