入門服務工作者

>服務工作者：離線Web應用程序和超越

>本文探討了服務工作者，背景腳本通過攔截網絡請求，從而啟用推送通知和離線功能等功能。 我們將介紹註冊，緩存，更新和調試技術。

密鑰概念：

>
• 背景操作：服務工人即使關閉了網站，也獨立於網頁運行。 他們通過。 出於安全原因，postMessage >服務工作者需要https（或
）。 瀏覽器會自動處理多個註冊。 （
• 進行檢查）。 localhost>事件處理：chrome://serviceworker-internals>他們響應
>，
• 和>緩存：install服務工作者緩存網頁組件，在後續訪問中啟用脫機訪問。 activate fetch
>調試：調試是一個實驗功能（在Chrome DevTools中啟用）。 通過
• 。
入門：註冊
• >註冊服務工作者涉及檢查瀏覽器支持並使用chrome://serviceworker-internals/。
參數定義了工人控制的URL路徑。 >

安裝和激活：navigator.serviceWorker.register()scope>

<code class="language-javascript">if (navigator.serviceWorker) {
    navigator.serviceWorker.register('./service-worker.js', {scope: './about'})
        .then(registration => console.log(registration))
        .catch(e => console.error(e));
} else {
    console.log('Service Worker not supported.');
}</code>

事件在第一次遇到時觸發。

>表示工人控制的工人。 請注意，在服務工作者中登錄需要啟用DevTools的調試。 >

攔截網絡請求：

事件允許攔截請求。 我們可以將緩存的內容或轉發請求提供給服務器。 install>加載外部腳本（例如，用於更廣泛兼容性的高速緩存）。 activate

<code class="language-javascript">self.addEventListener('install', event => console.log(event));
self.addEventListener('activate', event => console.log(event));</code>

緩存更新： 更新緩存需要增加

。 新服務工作者等到所有受控頁面都關閉之前，然後清理

>事件中的舊緩存版本。 fetch importScripts()

<code class="language-javascript">importScripts('js/cache-polyfill.js');
const CACHE_VERSION = 'app-v1';
const CACHE_FILES = [ '/', 'images/background.jpeg', 'js/app.js', 'css/styles.css', 'https://fonts.googleapis.com/css?family=Roboto:100' ];

self.addEventListener('install', event => {
    event.waitUntil(caches.open(CACHE_VERSION).then(cache => cache.addAll(CACHE_FILES)));
});

self.addEventListener('fetch', event => {
    event.respondWith(caches.match(event.request).then(res => res || requestBackend(event)));
});

function requestBackend(event) {
    const url = event.request.clone();
    return fetch(url).then(res => {
        if (!res || res.status !== 200 || res.type !== 'basic') return res;
        const response = res.clone();
        caches.open(CACHE_VERSION).then(cache => cache.put(event.request, response));
        return res;
    });
}</code>

>調試：

CACHE_VERSION啟用服務人員在Chrome DevTools中調試（標誌，實驗）。 資源面板顯示註冊工人，允許手動啟動。 activate>

>常見問題：

本節包括有關服務工作者的常見問題的答案，涵蓋了與網絡工人的差異，測試策略，HTTP請求處理，更新機制，實時數據適用性，調試方法，API兼容性，安全方面，瀏覽器支持和未註冊過程。

此修訂後的輸出維護原始圖像位置和格式，同時顯著將文本重新列出以提高清晰度和流動性，避免直接竊。 關鍵信息保持不變。

以上是入門服務工作者的詳細內容。更多資訊請關注PHP中文網其他相關文章！