如何让 Service Worker 离线工作？

Question

我无法让我的服务人员离线工作。不管我用什么教程。

我在 index.html 文件中注册了 Service Worker，例如：

<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

您的 service worker 仅包含用于创建缓存并将 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);
  })
});

如何让 Service Worker 离线工作？

How to make a service worker work offline?

javascript

service-worker

progressive-web-apps