PWA之 Service worker lifecycle and cache management

2022-02-19 08:01:50 阅读：189 来源： 互联网

标签：management Service cache request fetch offline event css

一、register service worker 1. app.js 顶头添加：

if("serviceWorker" in navigator){
navigator.serviceWorker.register("/serviceworker.js")
.then((registration)=>{
console.log(`Service Worker registered with scope ${registration.scope}`);
})
.catch((err)=>{
console.log(`Service worker registration failed with ${err}`);
});
}else{
console.log("service worker not found");
}

2. public文件夹下添加 serviceworker.js 3. npm start 运行后

二、logging request sericeworker.js 中添加

self.addEventListener("fetch", (event)=>{
　　console.log(`fetch event for: ${event.request.url}`);
});

运行后可以自动记录request

三、override request

self.addEventListener("fetch", (event)=>{
    if(event.request.url.includes("bootstrap.min.css") ){
        event.respondWith(
            new Response(
                `.hotel-slogan{background:green !important;}
                nav{display:none;}`,
                {"headers":{
                "Content-Type":"text/css"
                }}
            )
        );
    }
});

重写.css里面的background设置

四、fetch request 失败 => catch

self.addEventListener("fetch", (event)=>{
    console.log(`fetch request for ${event.request.url}`);
    event.respondWith(
        fetch(event.request).catch(()=>{
            return new Response(`
                Welcome to the Gotham imperial hotel<br /.>
                There seems to be a problem with your connection <br />
                We look forward to serving you when you are online
            `, {headers:{
                "Content-Type": "text/html"
            }});
        })
    );
});

手动中止程序后，刷新页面 =>

五、cache

self.addEventListener("install", (event)=>{
    event.waitUntil(caches.open("gih-cache").then((cache) =>{
        return cache.add("/index-offline.html");
        })
    );
});

outcome：

2. 运用cache：

self.addEventListener("install", (event)=>{
    event.waitUntil(caches.open("gih-cache").then((cache) =>{
        return cache.add("/index-offline.html");
        })
    );
});
self.addEventListener("fetch", (event) =>{
    event.respondWith(
        fetch(event.request).catch(()=>{
            return caches.match("/index-offline.html");
        })
    );
});

outcome：

3. add all cache

const cachedPages = [
    "/index-offline.html",
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css",
    "/css/gih-offline.css",
    "/img/jumbo-background-sm.jpg",
    "/img/logo-header.png"
];

self.addEventListener("install", (event)=>{
    event.waitUntil(caches.open("gih-cache")
    .then((cache)=>{
         return cache.addAll(cachedPages);
        }));
});

outcome：

4. To serve from cache: We want to serve the file of the same name if it is there；Otherwise serve the offline content

把页面缓存下来，即使offline，也可以显示

const cachedPages = [
    "/index-offline.html",
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css",
    "/css/gih-offline.css",
    "/img/jumbo-background-sm.jpg",
    "/img/logo-header.png"
];

self.addEventListener("install", (event)=>{
    event.waitUntil(caches.open("gih-cache")
    .then((cache)=>{
         return cache.addAll(cachedPages);
        }));
});

self.addEventListener("fetch", (event)=>{
    event.respondWith(
        fetch(event.request)
        .catch(()=>{
            return caches.match(event.request)
            .then((response)=>{
                if(response){
                    return response;
                }else{
                    return caches.match("/index-offline.html");
                }
            });
        })
    );
});

标签：management,Service,cache,request,fetch,offline,event,css
来源： https://www.cnblogs.com/sabertobih/p/15911831.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

PWA之 Service worker lifecycle and cache management