Service Worker的基本使用

环境准备

安装http-server

npm install -g http-server

准备index.html

<head>
<title>Minimal PWA</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="/e.png" type="image/png" />
</head>

<body>
<div class="revision">Revision 8</div>
<img src="pwa-fonts.png">
<div class="main-text">
Minimal PWA, open Console for more!
</div>
<div class="network-message">
Network:
<span id="network-status" class="">Good</span>
</div>
<script type="text/javascript">
if (navigator.serviceWorker != null) {
navigator.serviceWorker.register('sw.js')
.then(function(registration) {
console.log('Registered events at scope: ', registration.scope);
});
}

fetch('./data.json')

var statusEl = document.querySelector('#network-status')
if (!navigator.onLine) {
statusEl.classList = ['is-offline']
statusEl.innerText = 'Offline'
}
</script>
</body>

准备css文件main.css

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Helvetica Neue;
font-weight: 200;
font-size: 20px;
background-color: #313131;
background-image: radial-gradient(ellipse farthest-corner at 45px 45px ,
hsla(0,80%,100%,0.32) 0%,
hsla(0,80%,80%,0.16) 60%,
hsla(0,80%,80%,0) 95%);
color: #ccc;
}

.main-text {
white-space: nowrap;
}

img {
width: auto;
max-width: 80%;
}

.revision {
font-weight: 200;
position: fixed;
top: 32px;
left: 32px;
}

.network-message {
font-weight: 200;
position: fixed;
bottom: 32px;
right: 32px;
}

准备manifest.json，用于生成桌面快捷方式

{
"name": "Minimal PWA",
"short_name": "PWA Demo",
"display": "standalone",
"start_url": "/",
"theme_color": "#313131",
"background_color": "#313131",
"icons": [
{
"src": "e.png",
"sizes": "256x256",
"type": "image/png"
}
]
}

准备service worker文件sw.js

console.log('Script loaded!')

//缓存仓库名字
var cacheStorageKey = 'minimal-pwa-8'

//需要缓存的文件
var cacheList = [
'/',
"index.html",
"main.css",
"e.png",
"pwa-fonts.png"
]

//处理安装事件
self.addEventListener('install', function(e) {
console.log('Cache event!')
e.waitUntil(
caches.open(cacheStorageKey).then(function(cache) {
console.log('Adding to Cache:', cacheList)
return cache.addAll(cacheList)
}).then(function() {
console.log('Skip waiting!')
return self.skipWaiting()
})
)
})

//处理activate事件
self.addEventListener('activate', function(e) {
console.log('Activate event')
e.waitUntil(
Promise.all(
caches.keys().then(cacheNames => {
return cacheNames.map(name => {
if (name !== cacheStorageKey) {
return caches.delete(name)
}
})
})
).then(() => {
console.log('Clients claims.')
return self.clients.claim()
})
)
})

//处理fetch事件
self.addEventListener('fetch', function(e) {
// console.log('Fetch event:', e.request.url)
e.respondWith(
caches.match(e.request).then(function(response) {
if (response != null) {
console.log('Using cache for:', e.request.url)
return response
}
console.log('Fallback to fetch:', e.request.url)
return fetch(e.request.url)
})
)
})

运行http-server

http-server -p 8000 -c-1

首次访问从网络下载页面

停掉http-server，一样可以正常访问

通过chrome dev tools查看service workers

查看Cache Storage

移动端访问，可以通过ngrok工具来完成

加上AppShell就是一个完整的PWA应用。

参考资料

https://zhuanlan.zhihu.com/p/25459319

https://kymjs.com/code/2017/02/15/01/

https://kymjs.com/code/2017/02/18/01/

https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker

https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/?hl=zh-cn#progressive_web_app

Service Worker的基本使用相关推荐

Service Worker
Service Worker 随着前端快速发展,应用的性能已经变得至关重要,关于这一点大佬做了很多统计.你可以去看看. 如何降低一个页面的网络请求成本从而缩短页面加载资源的时间并降低用户可感知的延时是 ...
初识Service Worker
当下PWA比较火,而Service Worker是实现PWA的一项关键技术,今天我们一起了解下关于Service Worker的一些基础知识和适用场景. 什么是Server Worker 我们先来看一 ...
Service Worker 图片加载失败处理
Service Worker 图片加载失败处理参考文档 git clone https://gitee.com/wjj0720/Service-Worker.git 运行 npm i npm sta ...
Service Worker 离线无法缓存Post请求的问题解决
Service Worker 离线无法缓存Post请求的问题解决参考文章: (1)Service Worker 离线无法缓存Post请求的问题解决 (2)https://www.cnblogs.co ...
[PWA] Show Notifications when a Service Worker is Installed or Updated
Service Workers get installed and activated in the background, but until we reload the page they don ...
Web API之service worker
一.参考链接 https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API http://www.alloyteam.com/ ...
Service Worker ——这应该是一个挺全面的整理
我在之前有空的时候粗略学习了一下 Service Worker :最近有空,所以花时间再去学习了下.我在这里整理了下,希望对大家有帮助. 同时,如果文章中有错误或者描述不当的地方,欢迎大家能够帮我指正 ...
service worker之cache实践--sw-precache
Progressive web application是谷歌推出的一种渐进式应用,我觉得其实PWA是一种非常具有发展前景的技术.首先,PWA是由谷歌推出的,而且跨平台,PWA可以给你类似于原生APP的 ...
Service Worker 概念简介
原文丰富的离线体验.定期后台同步.推送通知--通常需要原生应用程序的功能--正在网络上出现. Service Worker 提供了所有这些功能所依赖的技术基础. What is a service ...

Service Worker的基本使用

Service Worker的基本使用相关推荐

最新文章

热门文章