使用 ServiceWorker 攔截和重定向請求

Question

我被要求創建一個服務工作者，它能夠攔截請求並將它們重定向到存儲的模擬數據。 我以前從來沒有做過這樣的事情，所以我有點掙扎。 當 testMode=true 被添加到 URL 時，Service Worker 被激活。 我有 2 個文件要處理。 這是我到目前為止所擁有的：

測試模式.ts

class TestMode {
    constructor() {
        if (!this.isEnabled()) {
            return;
        }

        if (!('serviceWorker' in navigator)) {
            console.log('Browser does not support service workers');
            return;
        }

        this.init();
    }

    private init(): void {
        navigator.serviceWorker
            .register('planner-worker/js/worker.min.js')
            .then(this.handleRegistration)
            .catch((error) => { throw new Error('Service Worker registration failed: ' + error.message); });

        navigator.serviceWorker.addEventListener('message', event => {
            // event is a MessageEvent object
            console.log(`The service worker sent me a message: ${event.data}`);
        });

        navigator.serviceWorker.ready.then( registration => {
            if (!registration.active) {
                console.log('failed to communicate')

                return;
            }

            registration.active.postMessage("Hi service worker");
        });
    }

    private handleRegistration(registration: ServiceWorkerRegistration): void {
        registration.update();

        console.log('Registration successful, scope is:', registration.scope);
    }

    private isEnabled(): boolean {
        return locationService.hasParam('testMode');
    }
}

export default new TestMode();

服務工作者.ts

const CACHE_NAME = 'mockData-cache';

const MOCK_DATA: Record<string, string> = {
    '/units/all?availability=Active&roomTypeHandle=kitchens': 'mock-data/unitData.json',
    '/frontal-ranges/kitchens?' : 'mock-data/kitchensData.json',
    '/carcase-ranges/?availability=Active&roomTypeHandle=kitchens' : 'mock-data/carcaseRangesData.json'
};


self.addEventListener('install', event => {
    console.log('Attempting to install service worker and cache static assets');
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                return cache.addAll(Object.values(MOCK_DATA));
            })
    );
});


self.addEventListener('activate', function(event) {
    console.log('Claiming control');
    return self.clients.claim();
});
self.addEventListener( "fetch", event => {
    console.log('WORKER: Fetching', event.request);
});

到目前為止我所做的工作，服務工作者已注冊，並且模擬數據 json 文件存儲在緩存中。

我不確定該怎么做是，當發出某個請求時，服務工作者將使用存儲在緩存中的模擬數據。

例如，我怎樣才能得到它，以便在發出請求時： /units/all?availability=Active&roomTypeHandle=kitchens 服務工作者將重定向到緩存中的 mock-data/unitData.json ？

我希望我說得通，任何幫助都會非常感激，這對我來說都是新的。

Answer 1

處理傳入請求和生成響應（來自緩存、網絡或兩者的某種組合）的邏輯需要在您的fetch事件處理程序中實現。

考慮到您的緩存內容和用例，這是我如何構建您的fetch處理程序：

self.addEventListener('fetch', (event) => {
  // Using a URL object will make routing easier.
  const url = new URL(event.request.url);
  const pathAndQuery = url.pathname + url.search;

  if (pathAndQuery in MOCK_DATA) {
    const cacheKey = MOCK_DATA[pathAndQuery];
    event.respondWith(
      caches.match(cacheKey, {
        cacheName: CACHE_NAME,
      })
    );
  }

  // If pathAndQuery isn't in MOCK_DATA, then respondWith()
  // won't be called, and the default network behavior will
  // be used for this request.
});

您也許可以使用https://mswjs.io/ 之類的庫來替代手動編寫此代碼，但如果您決定自己編寫，這是一般的想法。