<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello PWA</title> <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link href="https://www.jb51.net/main.css" > <link href="https://www.jb51.net/manifest.json" > </head> <body> <h3>Hello PWA</h3> </body> <script> // 检测浏览器是否支持SW if(navigator.serviceWorker != null){ navigator.serviceWorker.register('sw.js') .then(function(registartion){ console.log('支持sw:',registartion.scope) }) } </script> </html>
main.css
h3{ color: #f00; }
manifest.json
short_name: “ " 用户主屏幕上的应用名字
display : “standalone" 设置启动样式，让您的网络应用隐藏浏览器的 URL 地址栏
start_url : “/“ 设置启动网址，如果不提供的话，默认是使用当前页面
theme_color : “ “ 用来告知浏览器用什么颜色来为地址栏等 UI 元素着色
background_color: “ ” 设置启动页面的背景颜色
icons：”” 就是添加到主屏幕之后的图标
{ "name": "一个PWA示例", "short_name": "PWA示例", "start_url": "/index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#3eaf7c", "icons": [ { "src": "/youhun.jpg", "sizes": "120x120", "type": "image/png" } ], }
sw.js
看网上很多人都安装的hs和ngrokk去调试，在这里为了照顾新手我是直接引用的sw
处理静态缓存，首先定义需要缓存的路径，以及需要缓存的静态文件的列表。
借助 SW 注册完成安装 SW 时，抓取资源写入缓存中。使用了一个方法那就是 self.skipWaiting( ) ，为了在页面更新的过程当中，新的 SW 脚本能够立刻激活和生效。
importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js"); var cacheStorageKey = 'minimal-pwa-1' var cacheList=[ 'https://www.jb51.net/', 'index.html', 'https://www.jb51.net/main.css', 'youhun.jpg' ] self.addEventListener('install',e =>{ e.waitUntil( caches.open(cacheStorageKey) .then(cache => cache.addAll(cacheList)) .then(() => self.skipWaiting()) ) })
处理动态缓存，我们监听 fetch 事件，在 caches 中去 match 事件的 request ，如果 response 不为空的话就返回 response ，最后返回 fetch 请求，在 fetch 事件中我们可以手动生成 response 返回给页面。
更新静态资源，缓存的资源会跟随着版本的更新会过期的，所以会根据缓存的字符串名称清除旧缓存。在新安装的 SW 中通过调用 self.clients.claim( ) 取得页面的控制权，这样之后打开页面都会使用版本更新的缓存。旧的 SW 脚本不在控制着页面之后会被停止，也就是会进入 Redundant 期。
self.addEventListener('fetch',function(e){ e.respondWith( caches.match(e.request).then(function(response){ if(response != null){ return response } return fetch(e.request.url) }) ) }) self.addEventListener('activate',function(e){ e.waitUntil( //获取所有cache名称 caches.keys().then(cacheNames => { return Promise.all( // 获取所有不同于当前版本名称cache下的内容 cacheNames.filter(cacheNames => { return cacheNames !== cacheStorageKey }).map(cacheNames => { return caches.delete(cacheNames) }) ) }).then(() => { return self.clients.claim() }) ) })
部署
我们可以把当前pwa目录的所有内容都扔进服务器中，或者coding Pages和gitHub Pages也是可以的，当然，记得开启https。在上变介绍过SW的权利比较大，为了安全性，我们使用https协议来访问。
试着访问一下，我们这里用的coding Pages并且绑定了自己的域名
打开 chrom 的调试工具，打开 application ，点击 service workers 之后我们会发现 sw.js 脚本已经存到了 SW 中 。
