我想问一下，即使 Angular 应用程序由于网络或没有互联网而关闭，我是否仍然可以使用 ngrx 检索数据。 这个想法就像.. 如果没有互联网，则提取到目前为止已保存在商店中的默认数据。
【问题讨论】：
标签： angular progressive-web-apps ngrx
对于简约的 PWA，您需要执行以下操作：
首先你注册服务工作者：
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/serviceworker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
首先您检查它是否在您的浏览器中可用。如果是，那么您需要将路径传递给您的服务人员。在这个例子中是/serviceworker.js。
记住：如果您使用 HTTP 或文件系统 C://，则注册将不起作用，您需要使用 HTTPS 或 localhost，它也应该可以工作。
现在是服务工作者部分。使用此示例，您将缓存您访问的每个页面，并且如果您关闭网络，它仍然可以工作。
//serviceworker.js
var CACHE_NAME = "my_cache_v1";
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request).then(
function(response) {
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have two streams.
var responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
您可以使用 PWA 做更多事情。您可以要求用户安装您的应用程序，也可以为用户订阅推送通知。实际上，我在一个小型库上工作，应该为您简化它，您可以在这里查看它：（仍在开发中）
https://github.com/ilijanovic/serviceHelper
https://www.npmjs.com/package/servicehelper
要使其可安装，您需要在您的站点中包含一个具有基本属性的清单。
【讨论】：