瞭解ServiceWorker註冊

我正在閱讀ServiceWorker入門文檔https://developers.google.com/web/fundamentals/getting-started/primers/service-workers。瞭解ServiceWorker註冊

所以首先我們註冊我們的ServiceWorker的範圍。所以我做了如下

<!DOCTYPE html> 
<html> 
<head> 
    <title>Getting started with Service Worker</title> 
</head> 
<body> 

<script type="text/javascript"> 

if ('serviceWorker' in navigator) { 
    window.addEventListener('load', function() { 
    navigator.serviceWorker.register('/sw.js').then(function(registration) { 
     // Registration was successful 
     console.log('ServiceWorker registration successful with scope: ', registration.scope); 
    }, function(err) { 
     // registration failed :(
     console.log('ServiceWorker registration failed: ', err); 
    }); 
    }); 
}  

</script> 

</body> 
</html>

，並創建了一個sw.js文件，並寫了一個內部的console.log sw.js

console.log("This is sw.js")

所以，當我訪問index.html文件中的第一次，該console.log被執行並且ServiceWorker註冊成功消息被打印。但是，當我第二次刷新頁面時，它僅打印成功的ServiceWorker註冊消息。那麼爲什麼它沒有第二次在sw.js中執行console.log。我期待它第二次執行console.log。我在這裏錯過了點嗎？

來源

2017-06-05 Mahtab Alam

只是FWIW，有時人們得到[在職職工（https://www.w3.org/ TR/service-workers-1 /）和通用[web工作者]（https://www.w3.org/TR/workers/）混淆。你確定你想要一個服務工作者爲你做什麼？服務工作者是一種特殊的網絡工作者，用於管理頁面資源（例如離線應用程序）。 –

服務人員是在註冊時基本執行一次（在後臺）的腳本。如果您需要執行一些經常性的代碼，你需要使用service worker API：

服務工作者是對原點和路徑註冊的事件驅動的工人。

安裝事件被稱爲異步你叫navigator.serviceWorker.register('/sw.js')後;這就是爲什麼它返回Promise，你通過callback函數（內容爲console.log('ServiceWorker registration successful ...');）。

來源

2017-06-05 08:19:08 Wikiti

那麼，什麼時候安裝事件實際上被解僱呢？我知道我們正在捕獲頁面和其他資源，但是什麼時候這個安裝事件實際上被解僱了。 –

因此，一旦服務人員登記正確，安裝事件只會觸發一次？ @Wikiti –

MDN鏈接回答我的問題https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API –

服務人員被設計爲坐在您的網站和網絡之間。因此，當您最初加載頁面時，如果您添加了一個事件來偵聽安裝，它會運行一次腳本並安裝服務工作者。

一旦完成，您需要將偵聽器附加到「獲取」事件以捕獲您網頁中的所有請求。所以基本上，如果你想CONSOLE.LOG每次提出要求時，你可以做到以下幾點：

self.addEventListener('fetch', event => { 
    console.log(event); 
})

來源

2017-06-05 08:21:18

瞭解ServiceWorker註冊

回答

相關問題