Service Worker 离线时不调用缓存文件答案

【问题标题】：The service worker does not call cached files when offlineService Worker 离线时不调用缓存文件
【发布时间】：2023-01-19 17:24:04
【问题描述】：

我使用 service worker 缓存了 offline.html 和图像文件。导航到 offline.html 工作正常。但它无法从 offline.html 加载图像。在 offline.html 中，它尝试直接获取 service worker 缓存的图像而不是获取它，但由于网络断开而失败。

我尝试将 cache.match('/offline.html') 部分更改为 cache.match(event.request)，但这不会移动到 offline.html。离线时如何配置缓存文件在offline.html中使用？

// service-worker.js
const OFFLINE_VERSION = 1;
const CACHE_NAME = "offline";

const ASSETS = ["offline.html", "image/icon_replay_b_15pt.png"];

self.addEventListener("install", (event) => {
    event.waitUntil(
        (async () => {
            const cache = await caches.open(CACHE_NAME);
            cache.addAll(ASSETS);
        })()
    );
    self.skipWaiting();
});

self.addEventListener("activate", (event) => {
    event.waitUntil(
        (async () => {
            if ("navigationPreload" in self.registration) {
                await self.registration.navigationPreload.enable();
            }
        })()
    );

    self.clients.claim();
});

self.addEventListener("fetch", (event) => {
    if (event.request.mode === "navigate") {
        console.log(event.request.url);
        event.respondWith(
            (async () => {
                try {
                    const preloadResponse = await event.preloadResponse;
                    if (preloadResponse) {
                        return preloadResponse;
                    }

                    const networkResponse = await fetch(event.request);
                    return networkResponse;
                } catch (error) {
                    console.log("Fetch failed; returning offline page instead.", error);

                    const cache = await caches.open(CACHE_NAME);
                    return cache.match("/offline.html");
                }
            })()
        );
    }
});

<!-- offline.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OFFLINE</title>
    <style>


        body { font-family:'NanumSquare'; }
        body, html {width:100%; height:100%; margin:0; }
        * {
            box-sizing: border-box;
        }
 
        .btn-outline-01 {
            border:1px solid #C9CACA;
        }
        .btn {
            height:44px;
            background:transparent;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 700;
        }
        .icon-wrap {
            width:24px;
            height:24px;
        }
        .icon-wrap img {
            width:100%;
            height:100%;
        }
       
        * { margin:0; }
        .internet-err-wrap {
            
            width:100%;
            height:100%;
            overflow: hidden;
        }
        .internet-err {
            width:800px;
            
            margin:0 auto;
            position:relative;

            
        }
        .internet-err .err-text {
            position:absolute;
            left:5%;
            top:35%;
        }
        .internet-err .err-text h2 {
            font-weight:900;
            font-size: 26px;
            color:#333333;
        }
        .internet-err .err-text > p {
            color:#9FA0A0;
            margin-top:10px;
        }
        .internet-err .err-text button {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top:40px;
            font-family:'NanumSquare';
            padding:0 20px;
            
        }
        .internet-err .err-text button .icon-wrap {
            margin-right:5px;
        }
        .internet-err svg {
            width:160%;
        }
    </style>
</head>
<body>
    <div class="internet-err-wrap">
        <div class="internet-err">
            <div class="err-text">
       
                <button class="btn btn-outline-01" onclick="window.location.reload()">
                    <div class="icon-wrap">
                        <img src="/image/icon_replay_b_15pt.png" alt="" />
                    </div>
                    <p>retry</p>
                </button>
            </div>

    </div>
</body>
</html>

【问题讨论】：

标签： html progressive-web-apps service-worker

【解决方案1】：

所以在这里你只写了代码模式导航但是如果你想从缓存中获取图像和 css 那么你应该使用 mode as图片和风格. 这将允许您获取图像和 CSS。

 self.addEventListener("fetch", (event) => {  
      if (event.request.mode === "navigate") {
        // Open the cache
        event.respondWith(
          caches.open(cacheName).then((cache) => {
            // Go to the network first
            return fetch(event.request.url)
              .then((fetchedResponse) => {
                cache.put(event.request, fetchedResponse.clone());
    
                return fetchedResponse;
              })
              .catch(() => {
                // If the network is unavailable, get
                // return cache.match(event.request.url);
    
                return cache.match("offline.html");
              });
          })
        );
      } else if (
        event.request.destination === "image" ||
        event.request.destination === "style"
      ) {
        event.respondWith(
          caches.open(cacheName).then((cache) => {
            return cache.match(event.request);
          })
        );
        // return;
      } else {
        return;
      }
    });

【讨论】：