Blazor PWA离线时无法获取已缓存的API响应数据

核心结论 #

Blazor默认的Service Worker仅针对构建时确定的静态资源设计，不会自动缓存运行时发起的API请求响应，这是默认行为，并非你遗漏了配置。

原因分析 #

1. 默认安装逻辑限制：默认的onInstall方法只缓存service-worker-assets.js清单中列出的静态资源（如.html、.js、.css等），这些是项目构建时生成的固定资源，而API请求是运行时动态发起的，不在这个清单内，因此不会被预缓存。
2. 默认Fetch逻辑无API缓存处理：虽然默认onFetch会尝试匹配缓存，但由于API响应从未被存入缓存，cache.match(request)必然返回undefined，最终触发离线时的"Failed to fetch"错误。

解决方案：自定义Service Worker缓存API响应 #

要让API响应在离线时可用，需要修改service-worker.js的onFetch事件，添加针对API请求的缓存逻辑。以下是具体实现步骤：

1. 区分API请求与静态资源 #

首先明确哪些请求是API请求，比如通过域名、路径前缀来匹配（以你的天气API为例）。

2. 选择缓存策略 #

根据需求选择合适的缓存策略：

• 网络优先：优先尝试网络请求，成功后更新缓存；网络失败时返回缓存（适合需要最新数据的场景，比如天气）
• 缓存优先：先返回缓存数据，同时后台更新缓存（适合对实时性要求不高的场景）

3. 修改onFetch代码示例 #

以下是基于网络优先策略的修改：

async function onFetch(event) {
    let cachedResponse = null;
    const request = event.request;

    // 处理天气API请求（匹配目标域名）
    if (request.url.startsWith('https://api.openweathermap.org/')) {
        const apiCache = await caches.open('weather-api-cache'); // 单独使用API缓存，避免与静态资源混淆
        try {
            // 先尝试网络请求
            const networkResponse = await fetch(request);
            // 请求成功后，将响应存入缓存（注意clone，因为响应只能被读取一次）
            await apiCache.put(request, networkResponse.clone());
            return networkResponse;
        } catch (error) {
            // 网络失败，返回缓存的响应
            cachedResponse = await apiCache.match(request);
            return cachedResponse || new Response('离线状态下无缓存数据', { status: 503 });
        }
    }

    // 保留原有静态资源的缓存逻辑
    if (request.method === 'GET') {
        const staticCache = await caches.open(cacheName);
        cachedResponse = await staticCache.match(request);
        
        if (cachedResponse) {
            return cachedResponse;
        }

        try {
            const networkResponse = await fetch(request);
            return networkResponse;
        } catch (error) {
            return new Response('离线状态下无法获取静态资源', { status: 503 });
        }
    }

    // 非GET请求直接走网络（如需缓存可自行扩展）
    return fetch(request);
}

4. 注意事项 #

• 缓存隔离：建议为API响应单独创建缓存名称，避免与静态资源缓存互相干扰，方便后续清理或更新缓存。
• 缓存有效期：可以通过在缓存时记录响应时间，或者定期清理过期缓存，避免返回过时的API数据。
• Service Worker更新：修改service-worker.js后，需要确保浏览器更新生效：可以在开发者工具的Application标签下勾选"Update on reload"，或者手动触发Service Worker更新。

内容的提问来源于stack exchange，提问作者atconway