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

Posted 2023-02-23

【中文标题】iOS PWA - 打开地图返回空白屏幕

【英文标题】：iOS PWA - Open Maps returns to blank screen

【发布时间】：2019-05-20 12:17:37

【问题描述】：

我创建了一个已保存到 iPhone 主屏幕的 PWA。 PWA 有一个谷歌地图链接，可以在全屏和浏览器模式下正确打开，但是在 ios 上从全屏模式打开时，链接会打开，然后切换到谷歌地图应用（如果已安装）。

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

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

有没有办法阻止 PWA 在弹出的 Safari 查看器中打开地图链接，而只是在完整的 Safari 应用程序中启动该链接，或任何其他方式来修复/防止此问题？

谢谢

【参考方案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();
        
    

【参考方案2】：

我可以确认 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();
;

【讨论】：

效果很好，谢谢！我快疯了，试图了解问题所在

【参考方案3】：

见：

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