How to enable javascript alert and confirm boxes in Microsoft Edge when a website installed as PWA?

Question

I'm testing the installation of a Progressive Web App with the new Windows 10 support ( https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/#La19KKkTBKLj90k8.97 ).

I generated an AppX package then I installed it locally on my PC. The PWA starts in an interface-less Edge window.

Everything works fine, except to javascript confirm and alert boxes that are totally ignored.

The exact same webapp works fine installed as PWA in Android, with working alert and confirm boxes.

How can enable these boxes?

Answer 1

Finally I had to resign not to use alert() and confirm() anymore.

I just made two simple functions that replace the standard ones:

  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);
  }

You should adjust your styles achieving that .alert-box div covers view-port entirey and .alert-surface div becomes a centered rectangle containing informations. Eg:

  .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;
  }

You can use async_alert() just as the original alert() function, but keep in mind that this newly defined function is just asynchronous while the other is synchronous (so it doesn't stop your runtime javascript execution waiting your click).

You can also replace the standard browser alert function:

window.alert = async_alert;

To use async_confirm() function you should slightly change your code from:

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

to:

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

Once again, pay attention that async_confirm() il an asynchronous function compared to the standard confirm().