iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
2

Fetch 事件

self.addEventListener('fetch', function(event){
    console.log('[SW] 抓資料(Fetch)!',event);
});

首先新增fetch事件程式,再這個事件中,能抓取的資源有很多像imagecssjs等,都是我們能抓取的資源,當我們註冊Service Worker後,第一次執行install之後並不會觸發fetch,因此必須重新整理頁面。

https://ithelp.ithome.com.tw/upload/images/20171223/20103808hFCzwXXu9K.jpg
這時候會發現,所有資源都經過了Service Worker,這時候我們能做的事情就多了。

一開始有介紹過,Service Worker就像一個用戶端的proxy,當現在請求都經過Service Worker,我們是不是能對這些請求做一些事情呢?

event.respondWith

這個方法可以將頁面發出的請求,respondWith裡面的參數做替換。

self.addEventListener('fetch', function(event){
    console.log('[SW] 抓資料(Fetch)!',event);
    event.respondWith(null);
});

來一個有趣的小實驗,現在用null代替,頁面發出的請求會發生什麼事呢?
https://ithelp.ithome.com.tw/upload/images/20171223/20103808ZQRqIIwthg.jpg
結果頁面發出的請求全部換成null網站竟然掛掉了。

    event.respondWith(fetch(event.request));

所以我們先將null改成fetch(event.request),也就是原本發出的請求讓他保持目前一樣的內容。

既然fetch可以抓到網頁上發出的資源,還記得昨天實作fetch的練習嗎?
那麼我們Service Worker是否也能抓到,透過fetch向其他網站發出的請求呢?
https://ithelp.ithome.com.tw/upload/images/20171224/201038081jDcxUDM2n.jpg
沒錯!在一堆Service Worker 的fetch資源中,我們也能找到從fetch發出的請求。

總結

Fetch事件中,我們可以抓到頁面上發出的資源後,接著讓我們學習怎麼cache資源,再一起發揮fetch的魅力吧。/images/emoticon/emoticon34.gif


上一篇
Day8-Fetch API與Promise 使用方式介紹
下一篇
Day10-Cache API -PreCache基礎
系列文
30天走訪Progressive Web Apps(PWAs)30

尚未有邦友留言

立即登入留言