随着互联网技术的发展，PWA（Progressive Web Apps）已经成为了许多企业选择的开发模型。PWA 的特点是兼容性好、离线可访问、和原生应用接近的用户体验等。在 PWA 开发中，有时候需要打开外部链接。本文将介绍在 PWA 中如何打开外部链接，希望能给读者提供指导意义。
1. 使用原生 a 标签打开外部链接
PWA 本质上是一个基于 Web 技术的应用，因此我们可以使用Web中常用的打开链接方式打开外部链接。在HTML中，我们可以使用 <a> 标签来实现链接。
<a href="https://www.google.com/">Google</a>
在 PWA 开发中，使用 <a> 标签打开外部链接也十分简单：
<a href="https://www.google.com/" target="_blank">Google</a>
以上代码中，href 属性指定链接地址，target 属性指定在新窗口中打开链接。这种方式能够直接打开浏览器，让用户跳转至外部链接。
2. 使用 Web API 打开外部链接
除了使用 <a> 标签，PWA 还可以使用 window.open 方法和 location.href 属性打开外部链接。
window.open 方法
window.open 方法可以在浏览器中打开新窗口并加载指定页面。
window.open('https://www.google.com/');该方法通常用在发送窗口通信、弹出广告、打开辅助功能窗口等方面。需要注意的是，使用该方法打开窗口时，浏览器通常会阻止弹出窗口。如果想要在 PWA 中调用 window.open 方法，需要开启 CSP（Content Security Policy）的 unsafe-inline 属性或把目标的地址加入到白名单中。
location.href 属性
location.href 属性可以直接跳转至指定的地址。
location.href = 'https://www.google.com/';
该方式的缺点在于，无法通过这种方式在新窗口或者新标签页打开链接。同时，该方式也不够灵活，因为只能在当前窗口跳转。
3. 总结
本文介绍了在 PWA 中打开外部链接的两种方法，其中使用原生 a 标签是最常见的方式。与此同时，我们还可以使用 window.open 方法和 location.href 属性来实现打开外部链接的需求。需要注意的是，在使用 window.open 方法时，可能会遇到直接被浏览器拦截的问题，需要开启 CSP 的 unsafe-inline 属性或把目标的地址加入白名单中。
在实际开发中，我们还需要注意 PWA 对性能和体验的影响，例如如何避免出现多次打开重复页面的情况等。同时，也需要注意打开外部链接的安全性，例如如何避免恶意链接带来的问题。
最后，本文也提供了实现方式的示例代码，供读者参考。
<!-- 使用原生 a 标签打开外部链接 -->
<a href="https://www.google.com/" target="_blank">Google</a>
<!-- 使用 window.open 方法打开外部链接 -->
<button onclick="window.open('https://www.google.com/');">Google</button>
<!-- 使用 location.href 属性打开外部链接 -->
<button onclick="location.href = 'https://www.google.com/';">Google</button>来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64561768968c7c53b095cac9