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

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

看到：

• iOS 12.2 Beta 1（内部版本16E5181f）中的渐进式Web App进度

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