Angular PWA 和 NGRX.. 如果离线则获取数据

Question

我想问一下，即使 angular 应用程序由于网络或没有互联网而关闭，我是否仍然可以使用 ngrx 检索数据。这个想法就像.. 如果没有互联网，则提取到目前为止保存在商店中的默认数据。

Answer 1

对于简约的 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 或本地主机，它也应该可以工作。

现在是 service worker 部分。使用这个例子，您将缓存您访问的每个页面，如果您关闭网络，它应该仍然有效。

//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

要使其可安装，您需要在您的站点中包含一个具有基本属性的清单。

Angular PWA 和 NGRX.. 如果离线则获取数据

Angular PWA and NGRX.. fetch data if offline

progressive-web-apps

ngrx

angular