[PWA] 4. Hijacking Request

最新推荐文章于 2020-08-30 01:46:08 发布

weixin_34292402

最新推荐文章于 2020-08-30 01:46:08 发布

阅读量96

点赞数

本文介绍如何使用Service Worker拦截浏览器请求并返回自定义缓存数据，实现离线优先策略。通过示例展示了如何设置响应头以发送HTML内容。

We want to do offline first, the first thing we need to do is we should able to catch the browser request and return our cache data from serice worker. So user won't go to the real server to fetch data. So let's see how to do that:

self.addEventListener('fetch', function(event) {
    event.respondWith(
        new Response('Hello world');
    )
});

We use 'respondWith() and Response()' to provdie a custom cache response.

After you reopen the browser, you will see 'Hello World'.

What if we want to show html instead of pain text? The 'Response()' take a second param which can set header.

self.addEventListener('fetch', function(event) {
    event.respondWith(
        new Response('Hello <b class="a-winner-is-me">world</b>', {
            headers: {'Content-Type': 'text/html'}
        });
    )
});