javascript - 如何让Service Worker离线工作？

Question

我无法让我的 Service Worker 离线工作。无论我使用什么教程。

我在我的index.html 文件中注册了服务工作线程，如下所示:

<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/serviceworker.js')
                .then((reg) => console.log('success: ', reg.scope))
                .catch((err) => console.log('Failure: ', err))
        })
    }
</script>

serviceworker.js 看起来像:

const CACHE_NAME = "version-1"
const urlsToCache = [ 'index.html' ]

const self = this

// Install Service Worker
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then((cache) => {
                console.log('Opened cache')

                return cache.addAll(urlsToCache)
            })
    )
})
// Activate Service Worker
self.addEventListener('activate', (event) => {
    const cacheWhitelist = []
    cacheWhitelist.push(CACHE_NAME)

    event.waitUntil(
        caches.keys().then((cacheNames) => Promise.all(
            cacheNames.map((cacheName) => {
                if(!cacheWhitelist.includes(cacheName)) {
                    return caches.delete(cacheName)
                }
            })
        ))

    )
})

我不确定我忘记了什么或我犯了什么错误。 serviceworker.js 就在index.html、manifest.json 等旁边。

我有时会收到“获取脚本时发生未知错误”的错误。

亲切的问候

Answer 1

您的服务工作线程仅包含用于创建缓存并将 HTML 文件存储在该本地缓存中的代码。该缓存由您管理，浏览器正常获取网页时不关心它。

当您的浏览器获取该index.html网页时，它不知道该缓存。所以你需要做的就是拦截该获取。为此，您需要为 fetch 事件注册一个事件监听器并使用缓存进行响应。然后浏览器将使用该文件而不是向服务器发送请求。

self.addEventListener('fetch', event => { 
  if (event.request.method != 'GET') return;
  event.respondWith(async function() {
    const cache = await caches.open(CACHE_NAME);
    const cached = await cache.match(event.request);
    // If no cached version, fall back to server fetch
    return cached ? cached : fetch(event.request);
  })
});