sms: 和 mailto: iPhone Safari 移动浏览器失败

Posted 2023-03-25

【中文标题】sms: 和 mailto: iPhone Safari 移动浏览器失败

【英文标题】：sms: and mailto: failure on iPhone Safari Mobile Browser

【发布时间】：2020-03-02 03:59:12

【问题描述】：

问题：

带有 sms: 和 mailto: 链接的网页在 ios 移动 safari 浏览器上失败。单击链接会将您重定向到：

Safari 无法打开页面，因为它无法重定向到位置 以“短信：”开头

或

Safari 无法打开页面，因为它无法重定向到位置 以“mailto:”开头

直到大约两三个月前，这些都可以正常工作。现在这些在使用 Safari 浏览器的 Apple 移动设备上失败了。

背景：

我为基于活动的团队创建响应式网页。我们所做的其中一件事是提供团队名册。该名册包括电话号码、SMS 文本页面和电子邮件的链接。 为简单起见，我们使用简单的网页。 出于安全和隐私考虑，此内容仅在登录后通过 node.js 服务器通过 ajax 调用提供。我们使用单个 node.js Express 服务器来托管网站内容并管理 http/api 调用。 通常，单击链接会将移动设备推送到相应的本地应用程序中，以便拨打电话、SMS 短信或电子邮件。 这几年在所有设备上都运行良好。 最近我们在 iPhone 上看到了这个问题......但是...... 这是真正奇怪的部分。我有三支球队使用这种技术。失败只是三支球队中的两支。短信链接在那里工作得很好。 “电话：”链接在所有设备上都能正常工作。 失败仅发生在三个站点中的两个上，用于 sms: 和 mailto: 在 iphone 上。在 android 设备、Windows 和 MacOS 上一切正常。问题出在 Apple 移动设备上。 出现故障的两个站点是 Progressive Web Apps，带有 manifest.json 文件和 service_worker.js。运行良好的网站都没有。当我删除清单并关闭服务人员时，没有任何改善。 所有三个站点都通过 Google Cloud 上的 App 引擎托管。失败的两个站点仅使用 web_app.appspot.com 寻址。运行良好的网站使用真实的 URL，指向应用引擎的位置。

典型代码：

<li>
    <div class="userName">Jane Doe</div>
    <div class="phoneNumber"><a href="tel:[phone]">321-555-1234</a></div>
    <div class="sms"><a href="sms:[phone]"><img src="../images/crosstxt-icon.jpg"></a></div>
    <div class="email"><a href="mailto:[e-mail]"><img src="../images/email-icon.png"></a></div>
</li>

如果您在 Apple 移动设备的浏览器中打开它，我想知道这是否会显示问题：

<a href="sms:[phone]">Click here to create a SMS message.</a>
<br>
<a href="mailto:jane.doe@not_a_real_email_service.com">Click here to create an email message.</a>

显然这是失败的。你甚至看不到我的移动设备上的运行 sn-p 按钮。

【问题讨论】：

嗯，不确定您的代码或此处的 sn-p 编辑器是怎么回事，但this 适用于 iPad 和 iPhone 上的邮件和短信

哇。我在那个编辑器上尝试了一个简单的href="sms:... 链接，没有添加target="_top"。不去你的 tryit 工具。短信和电子邮件链接在那个网站上都很好用，但只有target="_top" 我尝试将它添加到我现有的在线网站，但失败了。我通过 iphone 上的 Safari Remote Inspector 确认了正确的代码添加。不知道发生了什么。仍然看到cannot open page 错误。感谢分享target=... 的信息。 Reference

看看我在这里尝试过的东西 - 讨厌网络应用模式...***.com/questions/59256976/…

【参考方案1】：

测试，更多测试...

我刚刚发现...如果我将网站保存到我的移动设备主页，以便将图标添加到主屏幕并处于显示模式，您将看不到顶部 URL 地址栏，也看不到 Safari 选项栏在底部然后 SMS: 将失败。如果您只是在 Safari 中打开地址，但不保存文件，那么它会很好用。

同样，当我在Apple Web Application mode 时，SMS 链接失败。

一个 hack... 通过 iphone 上的 Safari 移动浏览器打开该网站。将站点保存到主页。验证图标是否在手机上。转到设置 --> Safari --> 高级 --> 网站数据，然后通过向左滑动内容来删除网站。缓存存储是干净的，但图标仍然在移动屏幕上。使用图标帮助登录，但不要再次保存站点。请注意 URL 行是可见的。短信将起作用。

这里还在测试.​​.. 我试图建立一个简单的例子来说明这个问题。我完全无法让示例因上述错误消息而失败。供参考测试站点为here.测试源代码为here.

我怀疑这个问题是围绕着这两个有问题的站点都位于一个子域站点的事实而发生的。 （mywebapp.appspot.com）当清单包含所有“有效”内容时，该站点确实显示为没有可见 URL 行的 ios Apple Web 应用程序......但每当我处于该模式时，SMS 链接完全失败。

话虽如此，您可以通过 <meta name="apple-mobile-web-app-capable" content="yes"> 控制存储模式。

在我的测试过程中，我还注意到，只要 manifest.json 文件包含 // 注释标记，Safari 就会忽略该文件。通常// cmets 不允许在 .json 文件中，但根据 MSN source, 它们在 manifest.json 文件中很好。

选择是

有点丑和实用，或者 漂亮且没有功能

目前我正在运行<meta name="apple-mobile-web-app-capable" content="no">...我在主屏幕上获得了自定义图标的优势，尽管网络应用程序显然仍位于移动浏览器中，顶部/底部信息行可见，叹息。

【讨论】：

我也看到了同样的问题，可以确认： 1. 当网页应用保存到主屏幕时，sms: 链接不起作用。 2. 使用地址栏在移动 Safari 中打开相同的 Web 应用程序，sms: 链接有效。我将尝试您描述的元标记，看看是否有效