个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
通常每当我阅读有关 PWA 的博客文章时，该教程似乎只是预缓存每一个 Assets 。但这似乎有点违背应用程序外壳模式，据我了解，它是:缓存最基本的必需品(仅应用程序外壳)，并在运行时缓存运行时。 (如果理解有误请指正)
假设我有这个单页应用程序，它是一个简单的 index.html 和一个网络组件:<my-app> .那<my-app>组件设置了一些看起来有点像这样的路由，我使用的是 Vaadin 路由器和 Web 组件，但我想问题会与使用 React 和 React Router 或类似的东西一样。
router.setRoutes([
{
path: '/',
component: 'app-main', // statically loaded
},
{
path: '/posts',
component: 'app-posts',
action: () => { import('./app-posts.js');} // dynamically loaded
},
/* many, many, many more routes */
{
path: '/offline', // redirect here when a resource is not cached and failed to get from network
component: 'app-offline', // also statically loaded
}
]);
我的应用程序可能有很多路由，并且可能会变得非常大。我不想立即预缓存所有这些资源，而是只缓存我绝对需要的东西，所以在这种情况下:我的 index.html , my-app.js , app-main.js , 和 app-offline.js .我想缓存 app-posts.js在运行时，当它被请求时。
设置运行时缓存非常简单，但是当我的用户访问尚未缓存的潜在许多路由之一时，我的问题就出现了(因为可能用户之前没有访问过该路由，所以 js 文件可能还没有加载/缓存)，并且用户没有互联网连接。
在那种情况下(当路由尚未缓存且没有网络时)，我想要发生的是将用户重定向到 /offline路由，由我的客户端路由器处理。我可以轻松地做类似的事情:import('./app-posts.js').catch(() => /* redirect user to /offline */) ，但我想知道是否有办法从工作箱本身实现这一目标。
简而言之:当 js文件还没有被缓存，用户没有网络，所以文件请求失败:让workbox将页面重定向到/offline路线。
最佳答案
选项 1(并非总是有用):据我所知并根据this answer ，您无法在服务 worker 中打开新窗口或更改浏览器的 URL。但是，如果 clients.openWindow() 函数从 notificationclick 中调用，您仅可以打开一个新窗口事件。
Option 2 (最难):您可以在 service worker 的 activate 事件中使用 WindowClient.navigate 方法，但是有点棘手，因为您仍然需要检查请求的文件是否存在于缓存中或不是。
选项 3(最简单且最黑客):否则，您可以使用新的 Request 对象响应离线页面:
const cacheOnly = new workbox.strategies.CacheOnly();
const networkFirst = new workbox.strategies.NetworkFirst();
workbox.routing.registerRoute(
/\/posts.|\/articles/,
async args => {
const offlineRequest = new Request('/offline.html');
try {
const response = await networkFirst.handle(args);
return response || await cacheOnly.handle({request: offlineRequest});
} catch (error) {
return await cacheOnly.handle({request: offlineRequest})
}
}
);
然后在您的 offline.html 文件中重写浏览器的 URL:
<head>
<script>
window.history.replaceState({}, 'You are offline', '/offline');
</script>
</head>
上述选项3中的逻辑将首先使用网络响应请求的URL。如果网络不可用，将回退到缓存，即使在缓存中找不到请求，也会取而代之的是获取 offline.html 文件。一旦 offline.html 文件被解析，浏览器 URL 将被替换为 /offline。
关于service-worker - 当资源未缓存且离线时，Workbox 重定向客户端页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58276661/
26
4
0
我正在尝试为一个小型静态站点设置一个简单的 Service Worker，但出现 Service Worker 控制台错误:sw.js:59 Uncaught TypeError: workbox.e
我正在开发一个 pwa(带有类星体的 vue 应用程序)，我真的很困惑，因为按照指示包含选项会导致我的服务 worker workbox.core.skipWaiting() 中的指令导致Servic
有人可以帮忙告诉我如何使用 workbox-build 缓存谷歌字体吗？我想在文件中包含要预缓存的 url，但这对我来说是不可能的。与普通的 service worker 不同，我所要做的就是在安装事
我正在玩工作箱，但出现以下错误: Skipping file 'app.js' due to size. [Max size supported is 2097152, this file is 47
我在 Wokbox 中遇到了一个似乎是 Sitecore 错误的问题。当“每页项目”下拉菜单设置为“全部”以外的任何内容时，我可以展开工作流程中的“草稿”和“等待批准”列表。 但是当“每页项目数”设置
我是服务人员的新手，并且正在使用Workbox来预缓存我的应用程序 shell 并缓存我的api数据。 Assets 的预缓存工作正常，正在创建和填充缓存。 在我第二次重新加载页面之前，运行时缓存不会
默认情况下 Sitecore 工作框显示项目名称，我想显示“标题”字段(自定义字段)。我怎样才能做到这一点？ 最佳答案 我有一个类似的要求，客户需要 Workbox 来显示项目的“路径”而不是它的名称
在某些操作的 sitecore 工作箱中，我们可以通过关闭“禁止消息”属性来允许用户输入一些评论。是否有可能使它们成为必需？ 最佳答案 我写了一篇关于为 发表评论的博客文章拒绝 命令是强制性的。您应该
我有一个 Sitecore 工作流程。当我使用项目旁边的“批准”按钮批准项目时，它会要求发表评论。当我使用“批准”(选定)或“批准”(全部)按钮批准多个项目时，它不会要求发表评论。这是为什么？我可以让
我正在使用 create-react-app 和 react-app-rewired-workbox 构建一个 React 应用程序使用工作箱。 我想使用 workbox 的 networkOnly
我想要一个数组来配置部分路径(当响应与请求的 URL 匹配时缓存响应)和过期时间(在 X 秒后使缓存过期)，但我无法创建“处理程序” ' 才能正常工作。 这是配置路径和过期时间的数组: const P
我一直在使用 Google 的 workbox library现在有一段时间，在非常基本的水平上。大部分效果很好，但由于某些原因，我的 manifest.json 中的 start_url 未在初始页
我正在使用 Nuxt.js 框架，我的 WorkBox 配置如下所示 workbox: { workboxURL: 'https://cdn.jsdelivr.net/npm/workbox-
我希望使用 Workbox 缓存本地和远程图像 Assets 。目前是否支持，如果支持，如何支持？ 基本上我想有以下功能: workboxBuild.injectManifest({ swSr
我已经实现了 Workbox 来使用 webpack 生成我的服务 worker 。 这很好用 - 我可以确认 revision运行时在生成的服务 worker 中更新 yarn run genera
我正在处理我的 PWA 应用程序。 所以我有一个问题，我找不到任何如何解决的信息。 我将工作箱与 webpack InjectManifest 一起使用(但也尝试过 webpack offline-p
如何在 WorkboxSW 中使用以下代码来注册所有每个缓存 URL 的路由。这个每个缓存的 url 包含 ajax，也会发送到服务器! $.ajax({ url : '/MyAPI/Recor
我正在尝试使用 Workbox 缓存整个页面，但它无法按照我的要求工作我只想缓存而不是 html 我想使用 Image、Js、Css 缓存整个页面目前它仅缓存 html workbox.routing
在 javascript webapp 的服务 worker 中使用 Workbox。想要清除所有内容的整个工作箱/应用程序缓存...基本上回到与第一次将应用程序加载到浏览器之前的状态尽可能相似的状态
通常每当我阅读有关 PWA 的博客文章时，该教程似乎只是预缓存每一个 Assets 。但这似乎有点违背应用程序外壳模式，据我了解，它是:缓存最基本的必需品(仅应用程序外壳)，并在运行时缓存运行时。 (
我是一名优秀的程序员,十分优秀！