html - 短信 : and mailto: failure on iPhone Safari Mobile Browser

Question

问题:

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

Safari cannot open the page because it cannot redirect to locations starting with "sms:"

或

Safari cannot open the page because it cannot redirect to locations starting with "mailto:"

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

背景:

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

典型代码:

<li>
    <div class="userName">Jane Doe</div>
    <div class="phoneNumber"><a href="tel:+1321-555-1234">321-555-1234</a></div>
    <div class="sms"><a href="sms:+1321-555-1234"><img src="../images/crosstxt-icon.jpg"></a></div>
    <div class="email"><a href="mailto:jane.doe@yahoo.com"><img src="../images/email-icon.png"></a></div>
</li>

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

<a href="sms:+1321-555-1234">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>

显然这是一个失败。您甚至看不到我的移动设备上的运行代码段按钮。

Answer 1

测试，更多测试...

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

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

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

还在测试中... 我试图建立一个简单的例子来说明这个问题。我完全无法让示例因上述错误消息而失败。作为引用，测试站点是here.测试源码为here.

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

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

在我的测试过程中，我还注意到每当 manifest.json 文件包含 // 时Safari 忽略文件的任何地方的注释标记。通常 // .json 文件中不允许注释，但根据 MSN source,它们在 manifest.json 文件中很好。

选择是

• 有点丑但实用，或者
• 漂亮但没有功能

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