如何通过Array.map()仅筛选展示缓存中的HTML文件

你只需要在生成列表前对缓存键数组做过滤即可，不需要改动原有渲染逻辑，有两种常用实现：

• 后缀判断法：实现简单性能高，适合绝大多数路由规则清晰的站点
• 响应头判断法：匹配最精准，适合缓存资源类型复杂、文件后缀不统一的场景

后缀判断实现 #

直接通过URL路径判断是否为HTML资源，可以兼容.html后缀的文件和无后缀的页面路由（比如/home、/docs/intro这类路由形式的HTML页面），修改后的完整代码如下：

<div data-offline></div>
<script>
    if (navigator && navigator.serviceWorker) {
        caches.open('pages').then(function (cache) {
            cache.keys().then(function (keys) {
                var offline = document.querySelector('[data-offline]');
                var listHtml = keys
                    .filter(function(key) {
                        var path = new URL(key.url).pathname;
                        // 匹配.html后缀，或路径中无.的页面路由
                        return path.endsWith('.html') || path.lastIndexOf('.') < path.lastIndexOf('/');
                    })
                    .map(function(key) {
                        return '<li><a href="' + key.url + '">' + key.url + '</a></li>';
                    })
                    .join('');
                offline.innerHTML = '<ul>' + listHtml + '</ul>';
            });
        });
    }
</script>

响应头判断实现 #

如果你的缓存里存在后缀不规范的HTML文件，可以读取缓存响应的Content-Type头，通过MIME类型精准判断是否为HTML资源，代码如下：

<div data-offline></div>
<script>
    if (navigator && navigator.serviceWorker) {
        caches.open('pages').then(function (cache) {
            cache.keys().then(function (keys) {
                // 遍历所有键匹配响应类型
                Promise.all(keys.map(function(key) {
                    return cache.match(key).then(function(res) {
                        if (res.headers.get('Content-Type').indexOf('text/html') !== -1) {
                            return '<li><a href="' + key.url + '">' + key.url + '</a></li>';
                        }
                        return '';
                    });
                })).then(function(items) {
                    var offline = document.querySelector('[data-offline]');
                    offline.innerHTML = '<ul>' + items.filter(Boolean).join('') + '</ul>';
                });
            });
        });
    }
</script>

注意：如果你的站点有其他无后缀的静态资源（比如无后缀的图片、接口响应），建议用第二种方案，避免误筛选。

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