gpt4 book ai didi

javascript - 渐进式 Web 应用程序 - 离线时在多个缓存页面之间导航

转载 作者:行者123 更新时间:2023-11-27 23:20:12 25 4
gpt4 key购买 nike

我开始尝试使用渐进式网络应用程序,但当它涉及离线缓存时,我要么误解了什么,要么做错了什么。

我有 2 个相同的 HTML 页面(index.htmlindex2.html),代码如下:

<!DOCTYPE html>
<html>
<head>
<title>Test PWA</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/assets/app_styles.css" />
<link rel="manifest" href="/manifest.json" />
<link rel="shortcut icon" href="/assets/icon1.png" />
</head>
<body>
<header class="header">
<h1>Test web app</h1>
</header>
<nav>
<a href="/index.html">Page 1</a>
<a href="/index2.html">Page 2</a>
</nav>
<script type="text/javascript" src="/assets/app_scripts.js"></script>
</body>
</html>

然后下面是fetch和install事件方法,以及缓存内容,据我理解,如果没有网络,应该返回缓存内容,如果做错了,请指正。

var CacheName = 'TestPWA_Cache';
var CacheContents = [
'/',
'/index.html',
'/index2.html',
'/assets/app_scripts.js',
'/assets/app_styles.css',
'/assets/icon1.png',
'/assets/icon2.png',
'/assets/icon3.png'
];

self.addEventListener('install', function (event) {
event.waitUntil(caches.open(CacheName).then(function (cache) {
console.log("Service worker install sucess.");
return cache.addAll(CacheContents).then(function () {self.skipWaiting(); });
}).catch(function (err) {
console.log("Service worker install failed! "+err);
}));
});

self.addEventListener('fetch', function (event) {
event.respondWith(caches.match(event.request).then(function (response) {
if (response) return response;
return fetch(event.request);
}));
});

我的问题是,当我离线时,它会打开 index.html 页面,但是当我尝试在两个页面之间导航时,它会提示我处于离线状态,这当然是正确的,但是离线缓存背后的想法是否不应该以允许我在离线时在多个缓存页面之间导航的方式缓存文件?

如果是这样,我哪里出错了?

如果不是,那么我看不出 PWA 如何很快取代原生应用,直到它们提供了一种在离线时在缓存页面之间切换的方法。

附言。我在 Windows 和 Android 上使用 Google Chrome 时遇到了这个问题。

最佳答案

Service Worker 的 fetch 事件处理程序会针对其控制的客户端发出的导航请求而触发。这绝对是服务 worker 的预期用例之一。

我注意到您没有在 Service Worker 的 activate 事件中调用 self.clients.claim()。这本身并不是问题,但这意味着您新安装的 service worker 将无法控制当前的客户端选项卡/窗口。直到您下一次访问您的 Web 应用程序时,Service Worker 才会控制该页面,并开始触发 fetch 事件处理程序。因此,如果您在安装新的 Service Worker 后立即测试离线导航,然后关闭并重新访问该站点,这将解释您所看到的内容。

https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle#clientsclaim 上有关于使用 self.clients.claim() 的更多信息

关于javascript - 渐进式 Web 应用程序 - 离线时在多个缓存页面之间导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41504421/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com