如何在没有联网的情况下创建一个默认显示的页面？

最新推荐文章于 2024-09-10 09:55:59 发布

大隐-于市

最新推荐文章于 2024-09-10 09:55:59 发布

阅读量165

点赞数

文章标签：前端 javascript chrome

原文链接：https://www.rerror.com/question/1256665/%e5%a6%82%e4%bd%95%e5%9c%a8%e6%b2%a1%e6%9c%89%e4%ba%92%e8%81%94%e7%bd%91%e7%9a%84%e6%83%85%e5%86%b5%e4%b8%8b%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e9%bb%98%e8%ae%a4%e6%98%be%e7%a4%ba%e7%9a%84%e9%a1%b5%e9%9d%a2/

版权

如果您关闭互联网并通过 Chrome 访问 YouTube，您可以看到此页面（前提是该站点之前已在此浏览器中至少加载过一次）：

为此，您需要使用ServiceWorker。您还需要通过 HTTPS 公开您的站点 - Service Worker 出于安全原因需要这样做。

const CACHE_NAME = 'app_serviceworker_v_1',
    cacheUrls = [
        '/ru',
        '/en',
        '/css/style.css',
        '/js/script.js'
    ]

// период обновления кэша - минута
const MAX_AGE = 60

self.addEventListener('install', (event) => {

    event.waitUntil(
        caches.open(CACHE_NAME).then((cache) => {
            return cache.addAll(cacheUrls)
        })
    )
})
self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request).then((cachedResponse) => {
            let
                lastModified,
                fetchRequest
            // если ресурс есть в кэше
            if (cachedResponse) {

                lastModified = new Date(cachedResponse.headers.get('last-modified'))

                if (lastModified && (Date.now() - lastModified.getTime()) > MAX_AGE) {
                    fetchRequest = event.request.clone()

                    return fetch(fetchRequest).then((response) => {
                        const responseClone = response.clone()
                        // при неудаче всегда можно выдать ресурс из кэша
                        if (!response || response.status !== 200) {
                            return cachedResponse
                        } else {
                            // обновляем кэш
                            caches.open(CACHE_NAME).then((cache) => {
                                cache.put(event.request, responseClone)
                            })
                            // возвращаем свежий ресурс
                            return response
                        }
                    }).catch(() => cachedResponse)
                }
                return cachedResponse
            }

            return fetch(event.request)
        })
    )
})

如何在没有互联网的情况下创建一个默认显示的页面https://www.rerror.com/question/1256665/%e5%a6%82%e4%bd%95%e5%9c%a8%e6%b2%a1%e6%9c%89%e4%ba%92%e8%81%94%e7%bd%91%e7%9a%84%e6%83%85%e5%86%b5%e4%b8%8b%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e9%bb%98%e8%ae%a4%e6%98%be%e7%a4%ba%e7%9a%84%e9%a1%b5%e9%9d%a2/