service worker(一)之离线应用

serviceWork.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./main.css">
    <title>servie worker </title>
</head>
<body>
    <div class="container">
        service worker
    </div>
</body>
<script src="./app.js"></script>
</html>

app.js

if (navigator.serviceWorker) {
    navigator.serviceWorker.register('./service-worker.js', {scope: './'})
        .then((req) => {
            console.log(req)
        })
        .catch(e => {
            console.log(e)
        })
} else {
    alert('not support serviceWorker')
}

service-work.js

self.addEventListener('install', (e) => {
    e.waitUntil(
        caches.open('app-v1')
            .then(cache => {
                console.log('open cache')
                return cache.addAll([
                    './app.js',
                    './main.css',
                    './serviceWork.html'
                ])
            })
    )
})

self.addEventListener('fetch', e => {
    e.respondWith(
        caches.match(e.request).then(res => {
            if (res) {
                return res
            } else {
                // 如果没有缓存，用fetch方法从网络上获取资源
                fetch(url).then(res => {
                    if (res) {
                        //对于新请求的资源缓存到cachestorage中
                    } else {
                        //提示
                    }
                })
            }
        })
    )
})

main.css

.container{
    color: red;
}

流程就是注册serviceWorker，指定它的工作范围。以及在serviceworker文件中监听生命周期事件，在worker安装与激活之间，存储文件到缓存

然后通过监听fetch事件，拦截worker管理的文件下的所有请求，如果匹配到缓存，返回。没有，再向服务器发送请求，再将新请求的资源做缓存

总的来说，serviceWorker就像一个代理服务器，只不过必须在https下进行