Question

我正在处理PWA端项目，因此当我预缓存脚本类型模块时，浏览器无法以脱机模式获取脚本，但是当我使用另一种策略进行缓存时。 “在网络上响应；如果找到匹配项，则从缓存返回或添加到缓存”在离线模式下可以正常工作。

self.addEventListener('fetch', e => {
    e.respondWith(
        caches.open(cacheVersion)
            .then(cache => cache.match(e.request)
                .then(res => res || fetch(e.request)
                    .then(res => {
                        cache.put(e.request, res.clone());
                        return res;
                    }).catch(err => {
                        console.log('Fetch failed');
                    })
                )
            )
    );
});

当我使用以下提取策略时，浏览器无法提取脚本

e.respondWith(
        fetch(e.request)
            .catch(() => caches.match(e.request))
    );

这是我在使用此策略时要预备资产的方式

cache.addAll([
    '/',
    '/style.css',
    '/src/app.js',
    '/src/router/index.js',
    '/src/router/Route.js',
    '/src/router/Router.js',
    '/src/views/home.js',
    '/src/views/offline.js',
    '/src/views/post.js'
]);

所有这些都是javascript模块文件，其中app.js是主条目文件

<script src="src/app.js" type="module"></script>

如果您需要查看完整的源代码，可以在下面的链接中找到它 https://github.com/vijitail/headless-wordpress-pwa

预缓存脚本类型模块有什么问题吗？

0 个答案: