渐进式Web应用程序-脱机时在多个缓存页面之间导航
我开始尝试渐进式web应用程序，但当它涉及离线缓存时，我要么误解了什么，要么做错了什么。
我有2个超文本标记语言页面（index.html和index2.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>
下面是获取和安装事件方法，以及缓存内容，据我所知，如果没有网络，应该返回缓存内容，如果操作错误，请更正。
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都能体验到这一点。
共有1个答案
服务工作人员的提取事件处理程序被触发，用于从其控制的客户端发出的导航请求。这绝对是服务人员的预期用例之一。
我注意到您没有在服务工作者的激活事件中调用self.clients.claim（）。这本身不是问题，但这意味着您新安装的服务工作者无法控制当前的客户端选项卡/窗口。直到下次访问Web应用时，服务工作人员才会控制页面，并开始触发提取事件处理程序。因此，如果您在安装新服务人员后立即测试离线导航，在关闭并重新访问网站之前，这将解释您所看到的内容。
有更多关于使用self的信息。客户。索赔（）athttps://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle#clientsclaim
-
我最近用Google节点模块“sw-precache”生成的服务工作者制作了我的第一个渐进式web应用程序（我在演示中使用了Gulp任务）。一切工作良好，我能够导航通过网页应用当我离线使用Chrome在移动或使用Chrome创建的图标使用“添加到主屏幕”选项（我的渐进式网页应用）。 我只有一个奇怪的问题：如果我离线了，我用Chrome刷新页面，它仍然可以工作，但如果我用pwa做同样的事情，它会显示
-
我希望有人能对我一直在研究但没有取得多大进展的一些事情有所帮助。 我想利用 NSURLCache 来返回我在 iOS 应用程序中进行的 API 调用的缓存响应。当设备联机时，如果缓存的响应足够新，我想返回它，否则从远程获取。当设备脱机时，我希望立即返回缓存的响应（如果有），无论其年龄如何。 我正在使用AFNetworking。我正在对我控制的服务器进行API调用。协议是HTTPS。响应头当前为。我
-
因此，我们正在构建一个进步的web应用程序，当然，我们正在使用令人敬畏的服务人员。 每当我们发布新版本的应用程序时，我们都会更新软件中的版本号。js文件。页面加载时，浏览器会检测到sw。js已更改并触发“安装”和“激活”事件，这反过来会缓存适当的资源以供脱机使用。 这工作很棒。但是从我的理解来看，它只会在页面加载时被触发。因此，如果用户将应用程序添加到他们的主屏幕上，并且总是使用此快捷方式访问应用
-
我已经通过谷歌页面上的指南直接创建了一个TWA Progressive Web应用程序： https://developers.google.com/web/updates/2019/02/using-twa 并在应用程序和AssetLink中添加了资产报表。我的两个域名上的json与谷歌网站上的描述完全相同 打开应用程序时，不会显示应用程序URL栏。然而，如果我点击一个链接进入我的第二个域名，就
-
我在Tomcat中部署了多个Web应用程序，并在TOMCAT_HOME/lib/exts中共享service jar。所有的应用程序都使用Spring，在服务罐中我有bean，用Spring 3.1缓存注释注释。我使用Ehache提供商。我想有一个单一的CacheManager使用的所有Web应用程序。如果我在Web应用程序级别定义Spring缓存配置，缓存工作，但为每个应用程序/上下文创建单独的
-
当渐进式web应用程序（带有service worker）显示通知时，通知抽屉中显示的通知具有我提供的图标，看起来很好。 有没有办法让PWA指定状态栏中显示的图标？