渐进式 web 应用

PWA应用是指那些使用指定技术和标准模式来开发的web应用，这将同时赋予它们web应用和原生应用的特性。例如，web应用更加易于发现——相比于安装应用，访问一个网站显然更加容易和迅速，并且你可以通过一个链接来分享web应用。在另一方面，原生应用与操作系统可以更加完美的整合，也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行，并且相较于使用浏览器访问，用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。PWA赋予了我们创建同时拥有以上两种优势的应用的能力。这并不是一个新概念——这样的想法在过去已经在web平台上通过许多方法出现了多次。渐进式增强和响应式设计已经可以让我们构建对移动端友好的网站。在多年以前的Firefox OS的生态系统中离线运行和安装web应用已经成为了可能。PWAs, 不但如此，更是提供了所有的甚至是更多的特性，来让web更加优秀。正如前文所述，PWA不是使用一种技术创建的。它们代表了构建Web应用程序的新理念，涉及一些特定的模式，API和其他功能。如果一个Web App从一开始就是PWA，那就不那么明显了。当应用程序满足某些要求时，可以将其视为PWA，或者实现一组给定的功能：离线工作，可安装，易于同步，可以发送推送通知等。
我们已经知道了 PWAs 背后的原理， 让我们来看一个推荐的 PWA 结构，这来自一个真实的应用 。渲染网站主要有两种方法 - 在服务器上或在客户端上。它们都有其优点和缺点，你可以适当地混合使用这两种方法.服务器端渲染（SSR）意味着网站在服务器上渲染，因此它提供了更快的首次加载，但是在页面之间导航需要每次都下载所有内容。 它在浏览器中运行良好，并且有许多工具可用于帮助开发过程，但它加载速度不行，通常能看出加载每个页面都需要新的服务器间的往返。客户端渲染（CSR）允许在导航到不同页面时几乎立即在浏览器中更新网站，但在开始时需要更多的初始下载和客户端上的额外渲染。 首次访问时网站速度较慢，但后续访问速度要快得多。
将SSR与CSR混合可以获得最佳结果 - 您可以在服务器上渲染网站，缓存其内容，然后在客户端需要时更新渲染。 由于SSR，第一页加载很快，并且页面之间的导航是平滑的，因为客户端可以仅使用已更改的部分重新渲染页面。PWA可以使用您喜欢的任何方法构建，但有些方法会更适合。最流行的方法是“app shell”概念，它完全按照上述方式混合SSR和CSR，此外还遵循“离线优先”方法，我们将在后续文章中详细解释并在我们的示例应用程序中使用。