PWA（Progressive Web App）是在 Web 应用中加入了一些新的特性，能够让 Web 应用在移动端和 PC 平台上获得与原生应用类似的效果和体验。这些新特性包括离线缓存、桌面图标、消息推送、快速加载等。那么 PWA 应用对传统的 SEO 优化策略会有怎样的影响呢？本文将介绍 PWA 应用对 SEO 的影响，并提供相关的指导内容和示例代码。
PWA 应用的优点
PWA 应用有以下几个方面的优点：
- 更快的加载速度。PWA 应用会对页面进行预缓存，这样用户就可以在离线状态下加载页面，减少了页面重复加载的问题。
- 更好的用户体验。PWA 应用可以提供离线使用和类似原生应用的界面体验，让用户感受更舒适。
- 更少的跳出率。因为 PWA 应用更快、更舒适，所以跳出率会减少。
- 更高的用户参与度。PWA 应用提供桌面图标、消息推送等功能，可以让用户更加频繁地与应用交互。
1. 可访问性影响
如果 PWA 应用不是针对所有用户开放的（例如需要登录后才能使用），那么搜索引擎爬虫将无法访问这些页面。这会影响这些页面的 SEO 并降低这些页面在搜索结果中的排名。为了解决这个问题，在设计 PWA 应用时应该考虑到这个因素，可以考虑提供一个专门的页面，提供必要的信息和提示来告知用户此功能需要登录之类的操作。
2. 内容可访问性
由于 PWA 应用可以在离线状态下使用，因此在设计应用时应该考虑这个点，确保内容可以被爬虫访问。考虑使用一些适合的缓存策略，可以使爬虫能够抓取到 PWA 应用缓存中的页面。同时，为了加速页面加载速度，应该考虑开启 HTTP2.
3. PWA 应用的封装性
PWA 应用一般来讲不易被搜索引擎爬虫访问，因此需要考虑一些特殊的策略来处理。可以使用 meta 标签来提供必要的信息，让搜索引擎了解这个页面是一个 PWA 应用。使用 meta 标签可以提供一些信息，比如 PWA 应用关键字、应用名称、主题色等，可以让搜索引擎更好地了解这个应用。
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="theme-color" content="#0078FF">
4. PWA 应用的 JavaScript 实现
PWA 应用一般来讲需要一定的 Javascript 实现。因此在开发过程中需要考虑到 Javascript 代码的执行效率。 在 PWA 应用中使用 Vue.js，React.js 等 MVVM 框架有助于快速开发，提高代码复用率、可读性以及可维护能力，同时针对 SPA 应用，可以考虑使用服务端渲染实现，在优化 TTFB 时间的同时，可以让爬虫展开渲染。
总结
PWA 应用对 SEO 有着一定的影响，但相对来说对传统的 SEO 优化策略影响不大。 还是需要注意以下几个点来优化 PWA 应用在搜索引擎中的表现。
- 让页面能被搜索引擎爬取
- 考虑合适的缓存策略、开启 HTTP2 等来提高页面加载速度
- 使用 meta 标签提供应用信息
- 在 JavaScript 实现时考虑执行效率
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc65075ad90b6d0427db88
