PWA 应用如何实现打开外部应用？-JavaScript中文网-JavaScript教程资源分享门户

什么是 PWA 应用？

PWA 全称是 Progressive Web Apps，是一种既可以像 Native 应用一样提供原生级别的用户体验，又可以通过 Web 技术进行开发的应用。PWA 应用可以在多种操作系统和多种设备上运行，不需要用户下载安装即可使用，同时也可以在离线情况下进行部分功能操作。

PWA 应用如何打开外部应用？

在一些场景下，PWA 应用需要与外部应用进行交互，比如调起微信支付或者调起电话号码拨打等。下面介绍两种常见的打开外部应用方式。

1. 使用 a 标签打开链接

在 PWA 应用中，可以使用 a 标签打开链接的方式来启动外部应用。例如，想要调起电话号码拨打，可以在 HTML 中使用如下代码：

<a href="tel:电话号码">拨打电话</a>

这样用户点击链接时，就会打开外部电话应用并自动填入电话号码。

同样地，如果要打开微信支付，可以在 HTML 中使用如下代码：

<a href="weixin://wxpay/bizpayurl?sign=签名&appid=应用ID&mch_id=商户ID&prepay_id=预下单ID">微信支付</a>

注意，这里使用的是 weixin 协议头，而不是 http 或 https。

需要注意的是，使用 a 标签打开链接的方式有一个缺点，那就是无法监听用户是否真正打开了链接。如果用户没有安装对应的应用，会直接跳转至对应的应用商店下载应用，而且这个过程是不可控的。

2. 使用 Web Share API 分享

除了使用 a 标签打开链接的方式，PWA 应用还可以使用 Web Share API 分享的方式来启动外部应用。Web Share API 是浏览器提供的一个 API，用于实现 Web 与原生应用之间的分享功能。PWA 应用可以使用这个 API，将需要分享的内容分享到手机上的各种应用中。

例如，要分享一个网页链接，可以使用如下代码：

// javascriptcn.com 代码示例
if (navigator.share) {
  navigator.share({
    title: '分享标题',
    text: '分享说明',
    url: '分享链接'
  })
    .then(() => console.log('分享成功'))
    .catch(() => console.error('分享失败'));
} else {
  console.error('不支持分享功能');
}

如果用户的设备支持分享功能，则会弹出分享面板，选择对应的分享应用分享即可。

需要注意的是，使用 Web Share API 分享的方式也有一个缺点，那就是不是所有浏览器都支持这个 API，而且目前只有 iOS 和 Android 系统的原生浏览器以及 Chrome 和 Safari 等少数几种浏览器支持。

总结

在 PWA 应用中，要打开外部应用有两种方式：使用 a 标签打开链接和使用 Web Share API 分享。其中，使用 a 标签打开链接的方式适用范围较广，但用户不能知道是否真正成功打开了链接；使用 Web Share API 分享的方式则需要用户设备支持分享功能，但操作过程更安全、简单。在实际开发中，可以根据需求选择合适的方式。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654762f87d4982a6eb1c1bb4