iOS PWA-打开地图返回空白屏幕

Question

我创建了一个我保存到iPhone主屏幕的PWA。PWA具有一个Google Maps链接，可以在全屏和浏览器模式下正确打开，但是在从iOS上的全屏模式打开时，链接打开，然后切换到Google Map App(如果已安装(。

。

当我关闭地图应用程序并返回到PWA时，它显示了一个空白屏幕，并且不会返回到包含链接的上一个视图。

function openMap(lat, lng) {
    var win = window.open("https://maps.google.com/?q=" + lat + "," + lng + "", '_blank');
    win.focus();
}

是否有一种方法可以防止PWA在Popover Safari查看器中打开地图链接，并在完整的Safari应用程序中启动链接或任何其他方法来解决/预防此问题？

谢谢

Answer 1

下面的此代码修复了在浏览器中打开新选项卡中的地图的问题，但在iOS上以PWA的运行时不进行。

function openMap(lat, lng) {
        if (('standalone' in window.navigator) && window.navigator.standalone) {
            var win = window.open("https://maps.google.com/?q=" + lat + "," + lng + "", '_top');
            win.focus();
        } else {
            var win = window.open("https://maps.google.com/?q=" + lat + "," + lng + "", '_blank');
            win.focus();
        }
    }

Answer 2

我可以在iOS 12.3.1上运行的PWA中确认Tom Coomer的代码工作，即，用户的本机映射应用程序将正确打开。关闭本机地图应用程序并返回PWA后将显示正确的视图，而不是白色屏幕。

我想将地图调用到用户的本机映射应用程序中，因此我添加了一个平台检查：

const mapsSelector = (lat, lng) => {
  if (['iPhone', 'iPad', 'iPod'].includes(navigator.platform)) {
    const win = window.open(`maps://maps.google.com/maps?daddr=${lat},${lng}&ll=`, '_top');
    return win.focus();
  }
  /* default to Google */
  const win = window.open(`https://maps.google.com/maps?daddr=${lat},${lng}&ll=`, '_top');
  return win.focus();
};