Как включить оповещения javascript и окна подтверждения в Microsoft Edge, если веб-сайт установлен как PWA?

Я тестирую установку Progressive Web App с новой поддержкой Windows 10 (https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/#La19KKkTBKLj90k8.97 ).

Я создал пакет AppX, а затем установил его локально на свой компьютер. PWA запускается в окне Edge без интерфейса.

Все работает нормально, за исключением подтверждения javascript и окон предупреждений, которые полностью игнорируются.

Точно такое же веб-приложение отлично работает при установке PWA на Android с рабочими окнами предупреждений и подтверждения.

Как включить эти ящики?


person Michele DC    schedule 19.03.2018    source источник


Ответы (1)


В конце концов мне пришлось уйти в отставку, чтобы больше не использовать alert() и confirm().

Я просто сделал две простые функции, которые заменяют стандартные:

  function async_alert(message) {
     $("body").append("<div class='alert-box'>\
           <div class='alert-surface'>\
              <h2>Alert</h2></header>\
              <p>" + message + "</p>\
              <button type='button' class='alert-remove'>OK</button>\
           </div>\
           <div class='alert-backdrop'></div>\
        </div>");
     $(".alert-remove").off("click").on("click", function() { $(".alert-box").remove(); });
  }

  function async_confirm(message, onAcceptFunction) {
        $("body").append("<div class='confirm-box'>\
           <div class='confirm-surface'>\
              <h2>Confirm</h2>\
              <p>" + message + "</p>\
              <button type='button' class='confirm-remove'>Cancel</button>\
              <button type='button' class='confirm-accept'>OK</button>\
           </div>\
           <div class='confirm-backdrop'></div>\
        </div>");
     $(".confirm-remove").off("click").on("click", function() { $(".confirm-box").remove(); });
     $(".confirm-accept").off("click").on("click", onAcceptFunction);
  }

Вы должны настроить свои стили так, чтобы div .alert-box полностью закрывал окно просмотра, а div .alert-surface становился центрированным прямоугольником, содержащим информацию. Например.:

  .alert-box, .confirm-box {
     position: fixed;
     top: 0;
     left: 0;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     z-index: 100000;
     display: flex;
     align-items: flex-start;
  }

  .alert-surface, .confirm-surface {
     opacity: 1;
     visibility: visible;
     box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
     background-color: #fff;
     display: inline-flex;
     flex-direction: column;
     width: calc(100% - 30px);
     max-width: 865px;
     transform: translateY(50px) scale(.8);
     border-radius: 2px;
  }

  .alert-backdrop, .confirm-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,.87);
     opacity: .3;
     z-index: -1;
  }

Вы можете использовать async_alert() так же, как исходную функцию alert(), но имейте в виду, что эта вновь определенная функция просто асинхронна, а другая синхронна (поэтому она не останавливает выполнение javascript во время выполнения, ожидая вашего щелчка).

Вы также можете заменить стандартную функцию оповещения браузера:

window.alert = async_alert;

Чтобы использовать функцию async_confirm(), вы должны немного изменить свой код:

if(confirm("Do something?") {
   console.log("I'm doing something");
}

to:

async_confirm("Do something?", function() {
      console.log("I'm doing something");
   });

Еще раз обратите внимание, что async_confirm() является асинхронной функцией по сравнению со стандартной функцией подтверждения().

person Michele DC    schedule 28.03.2018