瀏覽器的 Service Worker API 允許 Web 設計者為訪問者提供他們以前從未有過的東西：即使在離線狀態下（無論是短時間還是長時間）也可以訪問網站或 Web 應用程序。愛掏網 - it200.com

p>

無論您是想確保訪問者在穿過火車隧道時仍然可以閱讀您的網站，還是想創建不需要互聯網連接的應用，服務工作人員都能提供完美的解決方案。愛掏網 - it200.com

盡管 Service Worker 非常出色，但當您第一次開始對其進行編碼時，會有一些障礙可能會減慢您的進度 - 除非您預先意識到這些障礙是什么。愛掏網 - it200.com本教程將為您提供 Service Worker 開發的五個基本技巧，我們希望它們能夠幫助您避免這些問題，并讓您免于相關的故障排除麻煩。愛掏網 - it200.com

開始之前

如果您是 Service Worker 新手，請查看我們的初學者課程《離線網站的簡單 Service Workers》和 Jeremy Keith 的書《Going Offline》，這兩本書都可以在 Envato Elements 上找到。愛掏網 - it200.com

當您編寫第一個服務時可能會遇到的最早問題 工人，你可能會做你一直做的事情并把你的腳本 進入名為 js 或 scripts 的子目錄。愛掏網 - it200.com然而，對于服務人員來說，這種普通的操作可能會出現問題。愛掏網 - it200.com

原因是，默認情況下，Service Worker 的范圍是由其位置定義的。愛掏網 - it200.com這意味著什么？這意味著如果您將腳本放在 /js 目錄中，其范圍現在僅限于該 /js 目錄。愛掏網 - it200.com因此，它只能處理來自 www.yoursite.com/js/ 的頁面請求，并完全忽略其他請求，例如來自 www 的請求例如，.yoursite.com 或 www.yoursite.com/news/。愛掏網 - it200.com

這種有限的范圍反過來意味著您將無法為網站的大部分內容提供離線后備。愛掏網 - it200.com為了使您的 Service Worker 能夠處理來自站點任何部分的任何請求，其范圍必須是包羅萬象的。愛掏網 - it200.com

注意：您實際上可以在注冊時覆蓋 Service Worker 的默認范圍，例如

navigator.serviceWorker.register('/sw.js', {
  scope: '/'
});

登錄后復制

通過這種方法，如果這樣做對您的項目非常重要，您仍然可以將所有腳本存放在子目錄中。愛掏網 - it200.com

但一般來說，最簡單的方法是將您的 Service Worker 放在根目錄中，從而自動將其范圍設置為覆蓋整個站點。愛掏網 - it200.com

雖然所有主要瀏覽器都支持 Service Worker，但目前 Chrome 或 Chromium 可以說是開發它們的最佳瀏覽器。愛掏網 - it200.com這要歸功于開發人員工具中非常有用的應用程序面板。愛掏網 - it200.com當您經歷開發過程時，您幾乎將生活在這個選項卡中：

在此選項卡中有一個服務工作人員專用部分，您可以在其中驗證您的腳本是否已注冊、活動并正在運行。愛掏網 - it200.com您還可以使用此選項卡模擬離線狀態，暫時繞過服務工作線程，并手動注銷以前不再需要的腳本。愛掏網 - it200.com

除了不將腳本放在子目錄中之外，在組合 Service Worker 時必須打破的另一個開發習慣是使用“硬重新加載”或“清空緩存和硬重新加載”。愛掏網 - it200.com在測試站點時，您可能已經這樣做了數千次，使用該功能清除緩存并確保您看到開發更改的準確反映。愛掏網 - it200.com但對于 Service Worker，這不會達到預期的效果。愛掏網 - it200.com

何時 您有一名注冊并活躍的服務人員，任何使用“硬 Reload”將完全繞過它。愛掏網 - it200.com您可能會硬重新加載您的網站，請參閱 你的代碼沒有按照你期望的方式執行，并認為你犯了一個錯誤，后來才意識到腳本從未在第一次運行過 地點。愛掏網 - it200.com

因此，壞消息是“硬重載”和“清空緩存并硬重載”在 Service Worker 開發過程中超出了范圍，這讓我們想到了下一個問題：

如何 您可以正確刷新頁面并測試您的 Service Worker 代碼嗎 如果您不能使用“硬重新加載”或“清空緩存并硬重新加載”，會發生變化嗎？

這個問題的答案在于以下兩個技巧：

默認情況下，當您刷新正在測試 Service Worker 的頁面時，您實際上不會看到任何代碼更改的結果。愛掏網 - it200.com這是因為您最初注冊的腳本版本在瀏覽器中保持活動狀態，即使在頁面重新加載后也是如此，除非您采取明確的操作來更新它。愛掏網 - it200.com

因此，我們再次遇到這樣的情況，您可能正在刷新您的 頁面并想知道為什么您的代碼更改沒有生效，除非 您了解服務人員的怪癖。愛掏網 - it200.com

要確保始終加載最新版本的腳本，請進入應用程序 選項卡并選中重新加載時更新框。愛掏網 - it200.com這可以確保每次重新加載頁面時（請記住，僅使用正常重新加載，而不是硬重新加載），瀏覽器會自動為您更新 Service Worker。愛掏網 - it200.com

注意：還有一個附加選項可以單擊注冊的 Service Worker 旁邊顯示的更新鏈接，但使用自動重新加載方法通常更容易。愛掏網 - it200.com

我們要接觸的應用程序選項卡的最后一個非常方便的功能是能夠查看緩存中存儲的對象，并根據需要手動刪除它們。愛掏網 - it200.com鑒于我們不想使用清空緩存和硬重載，此功能將成為 Service Worker 開發過程的重要組成部分。愛掏網 - it200.com

在應用程序標簽的左欄中，您會看到一個區域 標記為緩存存儲。愛掏網 - it200.com如果你擴大這個區域，你將能夠看到 存儲中保存的與當前 URL 相關的任何緩存對象。愛掏網 - it200.com

點擊其中任意項目，您可以檢查其 內容，這對于驗證您想要的資源非常有幫助 離線服務正在由您的服務工作人員正確添加到緩存中。愛掏網 - it200.com

要刪除不再需要的緩存對象，只需右鍵單擊對象并選擇刪除。愛掏網 - it200.com

在此緩存對象刪除功能和重新加載時更新復選框之間，您就可以了設置為堅持使用正常的頁面重新加載，同時仍然確保您正確測試對工作的最新更改。愛掏網 - it200.com

• 一般來說，將服務工作線程腳本放在項目的根目錄中，以便整個網站都在其范圍內。愛掏網 - it200.com

• 開發時使用 Chrome/Chromium 的“應用程序”選項卡。愛掏網 - it200.com
• 請勿使用硬重新加載或清空緩存并硬重新加載。愛掏網 - it200.com

• 選中應用程序標簽中的重新加載時更新框，以確保注冊的 Service Worker 是最新的。愛掏網 - it200.com

• 根據需要，通過應用程序選項卡的緩存存儲部分手動刪除緩存對象，您還可以在其中檢查緩存對象內容。愛掏網 - it200.com

有關 Service Worker 的更多信息，請查看我們的新課程《離線網站的簡單 Service Workers》以及 Jeremy Keith 的書《Going Offline》（現已在 Envato Elements 上提供）。愛掏網 - it200.com

以上就是培養 Service Worker：不容錯過的 5 個重要技巧的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！