Flask应用Service Worker离线页面无法显示的问题修复求助

问题根源 #

你的代码存在三个核心问题：

1. Service Worker注册路径错误：HTML里注册的是/static/sw.js，但实际文件是static/service-worker.js，导致Service Worker无法正确注册。
2. Fetch事件无离线降级逻辑：当前仅优先使用缓存，缓存未命中时直接发起请求，请求失败时没有 fallback到缓存的离线页面。
3. 静态资源路径不匹配：index.html里的样式表路径是css/styles.css，但缓存列表里写的是/static/styles.css，导致样式缓存失败。

修复步骤 #

1. 修正Service Worker注册路径 #

修改index.html中的注册代码，把路径改成实际的/static/service-worker.js：

<script>
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/static/service-worker.js')
        .then(function(registration) {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        })
        .catch(function(error) {
            console.log('ServiceWorker registration failed: ', error);
        });
}
</script>

2. 修改Service Worker的Fetch事件逻辑 #

更新static/service-worker.js中的fetch事件处理，当请求失败（包括离线、服务器宕机）时，返回缓存的/offline页面：

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                // 缓存命中则直接返回
                if (response) {
                    return response;
                }
                // 缓存未命中则发起网络请求
                return fetch(event.request)
                    .catch(() => {
                        // 请求失败时返回离线页面
                        return caches.match('/offline');
                    });
            })
    );
});

3. 统一静态资源路径 #

• 修改index.html中的样式表路径，和缓存列表保持一致：

<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">

• 确保static/styles.css文件确实存在（如果之前放在css子目录，需要移动文件或者更新缓存列表路径）。

4. 清除旧缓存并重新注册Service Worker #

Chrome浏览器中：

• 打开开发者工具（F12）→ 应用（Application）→ 服务工作者（Service Workers）→ 勾选"更新时重新加载"（Update on reload）
• 同时清除缓存：应用→ 存储（Storage）→ 清除站点数据（Clear site data）
• 重启Flask应用，刷新页面，确保Service Worker成功注册。

额外注意事项 #

• Flask的debug=True模式下，静态文件可能会被频繁刷新，建议测试离线功能时关闭debug模式，或者使用生产环境的静态文件配置。
• 确保所有需要缓存的资源（包括离线页面）在首次加载时被成功缓存，可以通过开发者工具的"缓存存储"（Cache Storage）查看缓存内容。

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