Использование защищенного содержимого в Progressive Web App в автономном режиме - PullRequest
Новая
       57

Использование защищенного содержимого в Progressive Web App в автономном режиме

0 голосов
/ 14 декабря 2018

Я много работал над прогрессивными веб-приложениями.Я могу создать приложение, хранить статическое содержимое в кеше с помощью сервисного работника.Я использую сервер узла / Express с хостингом https.Сайт представляет собой одностраничное приложение, предназначенное для использования частным предприятием в качестве справочного руководства для пользователей, с защищенным контентом, хранящимся на мобильных телефонах.Из-за характера бизнеса, некоторый доступ будет необходим, пока пользователи находятся в автономном режиме (нет доступа к мобильному телефону и нет доступа к Wi-Fi).Телефоны пользователей защищены с помощью собственного логина (смахивания, кода доступа, отпечатка пальца и т. Д.)

Я могу предоставить защищенное содержимое сайта с помощью вызова Ajax с использованием oAuth2 JSON Web Tokens (JWT), когдапользователи имеют доступ к сетевому сервису.При вызове 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 в автономном режиме.Они просто получают пустой экран.
  • Упс.У большинства пользователей есть айфоны, вздох.

Захват и вставка снимка document.documentElement.outerHTML в кеш отлично работает в браузере Chrome в Android (в основном это необходимо, если вы хотите сохранить значок PWA на главном экране)

К сожалению, это полный сбой на телефонах iOS.Чтобы сохранить значок PWA на главном экране, Safari в значительной степени требуется.Из того, что я могу сказать, Safari не совсем подходит для спецификации caches инструментов (или я просто ошибаюсь ...)

Кто-нибудь нашел обходной путь для предоставления защищенного контента для Progressive Web?Приложение в автономном режиме?Я подумал о том, чтобы изменить маршруты моего сервера для предоставления другой веб-страницы с токеном в строке запроса, но у этого есть другие проблемы.

Есть ли здесь альтернативы?

Кстати, кто-нибудь знает, как посмотреть на кеш-память в браузере Safari на MacOS с помощью инструментов разработчика?Я мог бы лучше создать хак, если бы видел, что происходит за кулисами ...

...