Question

我一直在努力开发渐进式Web应用程序。我能够创建一个应用程序，通过服务工作者将静态内容存储在缓存中。我正在使用带有https托管的节点/ Express服务器。该网站是一个单页应用程序，供私人企业用作用户参考指南，其中受保护的内容存储在手机。由于业务性质，用户离线时需要进行某些访问（没有手机访问权限，也没有wifi访问权限）。通过本地登录（刷卡代码，密码，指纹等）来保护用户电话

当用户具有可用的网络服务时，我可以使用oAuth2 JSON Web令牌（JWT）通过Ajax调用来提供站点的受保护内容。在Ajax调用中，令牌通过

提交到服务器API。

 $.ajax({
     url: '/fb', //route in my node server
     data: {
         data: 'testData'
     }, 
     dataType: "json",
     beforeSend: function (xhr) { //Include the bearer token in header
         xhr.setRequestHeader("Authorization", 'Bearer ' + jwt);
     }
 }).then(function (response) {
     $('#protected_content').html(response.protected_content);

  // and total hack starts here... 
  if ('caches' in window) {
      var formatted_date_time = DateFormat.format.date(new Date().getTime(), "MM/dd/yyyy, h:mm:ss a");
      console.log("date-time: ", formatted_date_time);
      const options = {
          headers: {
              'Content-Type': 'text/html; charset=UTF-8',
              'Last-Modified': formatted_date_time
          }
      }
      const html_content = '<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML;
      const htmlResponse = new Response(html_content, options);  
      caches.open('my_cache_v1').then((cache) => {
          cache.put('/', htmlResponse)
              .then(
                  function (result) {
                      console.log("cache.put() Success");
                  },
                  function (error) {
                      console.log("oops, cache.put() error");
                  }
              )
      });        
  } else {
        console.log("Ouch, this browser does NOT support <br/>Progressive Web Apps Caches API...");
    };
 }).fail(function (err) {
     //Error during request
     console.log("AuthUserReq Error: ", err);
 });

对于未经授权的用户，该网站实际上是空白的。有一个oauth登录名，其他几乎看不到。当我与清单和服务工作者一起启动站点时，内容存储在缓存中。 '/`index.html本质上是空白的。在客户端中进行身份验证确认后，我进行了Ajax调用，并完成了我的缓存操作。

当用户在线时，该站点非常有用。
该网站在离线时非常适合Android用户。
iOS用户脱机时总计失败。他们只是得到一个空白屏幕。
糟糕。叹息，大多数用户都拥有iPhone。

document.documentElement.outerHTML快照抓取和粘贴到缓存在Android的Chrome浏览器上非常有效（如果要将PWA图标保存到主屏幕，则必不可少）

不幸的是，这是iOS手机上的全部失败。为了将PWA图标保存到主屏幕，非常需要Safari。据我所知，Safari并不完全符合caches工具的规范（或者我做错了这种方式...）

有人能找到一种解决方法，以离线模式向Progressive Web App提供受保护的内容吗？我已经考虑过重新设计服务器路由，以在查询字符串中提供带有令牌的其他网页，但这还有其他麻烦。

这里还有其他选择吗？

对了，有人知道如何通过开发人员工具在MacOS的Safari浏览器中查看缓存存储吗？如果我可以看到幕后发生的事情，我可能会更好地创建一个hack

脱机时在渐进式Web应用程序中使用受保护的内容

0 个答案: