当我脱机时如何在PWA中显示消息？ [英] How do I display a message in a PWA when I'm offline?
本文介绍了当我脱机时如何在PWA中显示消息？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在PWA中显示脱机消息？
我在我的HTML代码中使用Bootstrap 5主题创建了1个帖子。
https://getbootstrap.com/docs/5.0/components/toasts/
我想要的：
- 当用户没有Internet连接时，会显示消息&您正在脱机？
如何操作？以下是我的代码。
index.html
<!doctype html>
<html lang="fr" class="h-100">
<head>
<link rel="manifest" href="/manifest.json">
<link rel="canonical" href="https://www.mathieulebert.fr/">
<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="position-relative d-flex flex-column bg-dark text-white text-center" data-bs-spy="scroll" data-target="#navbar" data-bs-offset="85" tabindex="0">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-wifi-off text-danger" viewBox="0 0 16 16">
<path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/>
</svg>
<strong class="me-auto">Vous êtes hors-ligne</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body text-start text-dark">
Les informations de cette page peuvent être obsolètes.
</div>
</div>
</div>
<script src="bootstrap.bundle.min.js"></script>
<script src="popover.js"></script>
<script src="clipboard.min.js"></script>
<script src="btn-clipboard.js"></script>
<script src="pwa.js"></script>
<script src="feed.js"></script>
</body>
</html>
pwa.js：
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('sw.js')
.then(reg => {
console.log('Service worker registered! 😎', reg);
})
.catch(err => {
console.log('😥 Service worker registration failed: ', err);
});
});
}
sw.js：
const staticCacheName = 'v13';
const filesToCache = [
'/',
'/index.html',
'/style.css',
'/bootstrap.min.css',
'/bootstrap.bundle.min.js',
'/popover.js',
'/clipboard.min.js',
'/btn-clipboard.js',
'/pwa.js',
'/feed.js',
'/icon-32.png',
'/icon-144.png',
'/icon-192.png',
'/icon-512.png',
'/iphone5_splash.png',
'/iphone6_splash.png',
'/iphoneplus_splash.png',
'/iphonex_splash.png',
'/iphonexr_splash.png',
'/iphonexsmax_splash.png',
'/ipad_splash.png',
'/ipadpro1_splash.png',
'/ipadpro3_splash.png',
'/ipadpro2_splash.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(staticCacheName).then(cache => {
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('activate', event => {
event.waitUntil(caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(staticCacheName) {
}).map(function(staticCacheName) {
return caches.delete(staticCacheName);
})
);
}));
});
self.addEventListener('fetch', event => {
event.respondWith(caches.match(event.request).then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}));
});
self.addEventListener('message', event => {
if (event.data.action === 'skipWaiting') {
self.skipWaiting();
}
});
以下是一些示例：
推荐答案
这里有两个不同的问题-一个基于您编写的问题，另一个基于您的屏幕截图。
(尽力而为)连接不足通知
您可以将offline and online events用作显示(或隐藏)脱机指示器的触发器。如果您只想了解当前状态，而无需等待事件，则可以检查navigator.onLine属性。
代码如下所示：
window.addEventListener('offline', () => {
// Show a "You're offline." toast.
});
window.addEventListener('online', () => {
// Clear the "You're offline" toast, if it's open.
});
注意1：这些事件和navigator.onLine属性容易误报，它们报告用户在线，即使他们的连接非常不稳定，或者在强制门户后面的WiFi网络上。它们适用于在您检测到用户脱机时显示UI提示，但不应用于从根本上更改您的Web应用的行为。
注意2：这些事件和属性应在您的Web应用程序的上下文(即window上下文)而不是中使用。在服务工作者的fetch处理程序中，您不应该编写类似if (navigator.onLine) { ... }的逻辑。只需尝试调用fetch()并相应地处理失败。
准备好脱机工作通知
如果您的服务工作器预先准备了您的Web应用程序脱机工作所需的一切，那么当服务工作器第一次takes control时，它应该已经准备好脱机工作-假设您activate处理程序中。第一次检查是否发生这种情况的最简单方法是使用如下逻辑：
// If there isn't already a SW in control....
if (navigator.serviceWorker && !navigator.serviceWorker.controller) {
// As soon as a SW does take control, show the toast.
navigator.serviceWorker.addEventListener('controllerchange', () => {
// Show "Ready to work offline!" toast.
});
}
略有不同的模式显示有新内容可用；请刷新在重新部署您的站点后的初始软件控制后显示的&toast。这其中的逻辑稍微复杂一些，并在其他地方进行了介绍，例如Workbox documentation。
实际显示通知
既然您说您正在使用Bootstrap，these examples应该会有所帮助。
这篇关于当我脱机时如何在PWA中显示消息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
