Question

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

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

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

有没有一种方法可以防止PWA在弹出的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

请参阅：

Progressive Web App Progress in iOS 12.2 Beta 1 (Build 16E5181f)

Answer 3

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

我想将地图调用保持在用户本地地图应用程序的本地，因此我添加了平台检查：

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

iOS PWA-“打开地图”返回黑屏

3 个答案: