Progressive Web Apps，简称 PWA，是一种新兴的移动应用开发技术。它利用 Web 技术来让网站在移动平台上的体验更加接近原生应用，具备了离线访问、推送通知等使用体验的巨大提升。
在 PWA 中，我们通常通过 Service Worker 来完成离线访问、推送通知等功能的实现。但是当我们在 PWA 中打开外部链接时，会遇到许多问题。比如说我们无法在 PWA 中打开一个外部网址，因为现代浏览器都默认阻止了跨域请求。
本文将介绍如何在 PWA 应用中打开外部链接，并分享一些有用的技巧和指导意义，帮助你更好地理解和应用 PWA 技术。
在 PWA 应用中打开外部链接，需要遵守以下的最佳实践：
- 使用 Web Share API
Web Share API 是一种用于在 Web 应用中打开分享对话框的 API。使用它可以方便地向社交媒体、邮件等发送内容。在 PWA 应用中打开一个外部网址时，我们可以利用它来弹出分享对话框，以达到跳出应用的效果。
使用 Web Share API 的示例代码如下：
navigator.share({
title: 'Web Share API',
text: 'Sample text',
url: 'http://example.com'
})- 使用 iframe 实现跨域
如果你必须在 PWA 应用中打开一个外部网址，那么可以通过 iframe 来创建一个带有外部网址的框架。通常浏览器会自动阻止外部网址的加载。为了解决这一问题，我们只需要在设置 iframe 的属性时设置 allow="encrypted-media" 或 allow="clipboard-read"。这样就能轻松地解决 PWA 应用中打开外部链接的问题。
使用 iframe 的示例代码如下：
<iframe src="http://example.com" allow="encrypted-media"></iframe>
- 自定义 a 标签来处理链接
在 PWA 应用中，打开外部链接的最佳实践是通过自定义 a 标签来处理链接。这样可以让链接在 PWA 应用内部打开，而不必跳出应用。我们只需要把 a 标签的 href 属性设置为外部链接的地址，在点击时通过 JavaScript 阻止默认事件的发生。
使用自定义 a 标签的示例代码如下：
-- -------------------- ---- -------
-- ------------------------- ---------------------------------- --------
--------
----------------------------------------------------------------------------------- -
--------------------------------- --------------- -
-----------------------
----------------------------------------- ----------
---
---
---------注意事项
在应用上面的技巧中，需要注意以下几点：
- 使用 iframe 的方式时，要注意 iframe 高度的设置。使用 JavaScript 可以自适应 iframe 的高度，以便更好地显示内容。
<iframe id="iframe" src="http://example.com" allow="encrypted-media"></iframe>
<script>
iframe.onload = function() {
this.style.height = this.contentDocument.body.offsetHeight + 'px';
};
</script>- 使用自定义 a 标签的方式时，要确保在应用的路由或事件上正确地处理事件。否则可能会导致应用崩溃或者其他问题。
结论
在 PWA 应用中打开外部链接是一件有挑战性的事情。本文分享了三种最佳实践，希望可以帮助你更好地理解和应用 PWA 技术。在实际开发中，我们还需要根据实际情况选择最合适的方法来解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671f05192e7021665efb30e3