addEventListener('fetch', (e) => { e.respondWith(fetch(e.request.url)); }); このようなスクリプトとページを用意すると、初回のページ訪問時にService Workerが保存され、次回の訪問時にはworker.js経由でレスポンスを取得します。その際に、前回の記事でちらっと紹介したように、worker.jsはmain.htmlとは別のプロセスで動く可能性があります。以下にその状態を図に示してみます。 まずmain.htmlを開くとそのリクエストはブラウザプロセスで処理されます。Service Workerが存在する場合、Service WorkerのあるレンダラプロセスへとFetch Eventが投げられます。 先程の例のように、worker.jsでfetch()を実行すると、Service Workerからリクエス
![ServiceWorkerがちょっとずつスピードアップしてる話 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3d150bb19bac33d740750113eb2f225a59b9fbd7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9U2VydmljZVdvcmtlciVFMyU4MSU4QyVFMyU4MSVBMSVFMyU4MiU4NyVFMyU4MSVBMyVFMyU4MSVBOCVFMyU4MSU5QSVFMyU4MSVBNCVFMyU4MiVCOSVFMyU4MyU5NCVFMyU4MyVCQyVFMyU4MyU4OSVFMyU4MiVBMiVFMyU4MyU4MyVFMyU4MyU5NyVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MiU4QiVFOCVBOSVCMSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDbWlkZGxlJnM9NGViZThjZmM2NDllNmQxNjBhMmMwNTNiYTc4YzcyZWQ%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYW1pcTExJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04OTU1MDI5NDk5MjdlOTBjMTU3MDYwNjA1MTczOWYzMg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D54d99c30538b4c5c1cc37b7397a84508)