在现代 web 开发中，PWA（渐进式 Web 应用）已经成为一个重要的技术选型。PWA 可以让网页应用具备原生应用的很多特性，使得用户可以在离线状态下使用应用，同时也可以给用户带来更好的体验。但是，在很多场景下，我们需要从 PWA 应用中快速调出原生应用来完成某些特定的任务。本文将会介绍如何在 PWA 应用中快速完成这一目标。
为什么需要在 PWA 应用中调出原生应用？
虽然 PWA 可以模拟出原生应用的体验，但是在某些场景下，我们仍然需要使用原生应用来完成一些任务。比如说，在一个在线商城中，用户需要用到手机的摄像头来拍摄商品照片。虽然现代浏览器已经支持使用摄像头 API 来访问摄像头，但是原生应用中对于拍照的控制是更加直接和简便的。
同时，在一些国家和地区，原生应用还具有一些法律和规定方面的优势，比如说通过原生应用来进行在线支付。
综上，我们需要从 PWA 应用中调出原生应用，以便用户快速地完成特定任务，增强用户体验以及确保应用符合法规要求。
要从 PWA 应用中调出原生应用，我们可以使用 navigator.userAgent 全局变量来检测当前设备上的浏览器信息，并根据不同设备上的浏览器信息，调用不同的原生应用。以下是 CodePen 上的样例代码：
-- -------------------- ---- ------- ----- ----- - -- -- - ----- --------- - ---------------------------------- ------ ----------------------------------- -- ----- --------- - -- -- - ----- --------- - ---------------------------------- ------ -------------------------- -- ----- ----------- - -- -- - ----- --------- - ---------------------------------- ------ ---------------------------------- -- --------------------------------- -- ----- ---------- - -- -- - ----- --------- - ---------------------------------- ------ ---------------------------------- -- ------------------------ -- ----- ---------- - -- -- - -- --------- - -- -------------- -- ------------- - -------------------- - ------------------------------------------------------------- - ---- - -------------------- - --------------------- - - ---- -- ------------- - -------------------- - ------------------------------------------------------------------------------ - --展开代码
以上代码中，我们首先写了四个判断当前设备浏览器信息的函数，它们分别是：isiOS、isAndroid、isIOSWechat 和 isIOSWeibo。其中，isiOS 和 isAndroid 函数用于判断设备的操作系统类型，isIOSWechat 和 isIOSWeibo 函数用于判断 iOS 设备上是否运行了微信或微博客户端。
接着，我们写了一个 openCamera 函数，它会根据设备类型、操作系统类型、当前运行的客户端类型等信息，自动调用不同的原生应用来打开摄像头功能。
假设我们想要在 PWA 应用的某个按钮上调用 openCamera 函数，我们可以将代码写成以下样子：
<button onclick="openCamera()">打开摄像头</button>
这样一来，用户点击这个按钮时，就会跳转到对应的原生应用中的摄像头功能。
当然，以上代码只是一个简单的样例，实际使用时需要根据具体场景进行修改。
结语
通过以上代码示例，我们可以看到如何从 PWA 应用中调出原生应用，从而增强用户体验和应用功能。实际上，我们还可以使用类似的方式来调用其他的原生应用功能，比如说地图导航、短信发送、电话拨打等。这样一来，我们就可以在 PWA 应用中快速调用原生应用功能，为用户提供更加完整和便捷的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c43cd26e1fc40e36d21c94
