引进进步的网络应用程序：他们可能意味着你的网站和搜索引擎优化

进步的Web应用程序是下一个大的东西，当它涉及到提供一个爆炸性的移动体验。但是究竟是什么使一个PWA？你应该有一个吗？如果你创造了一个，你会如何确定它的排名？

他们可以不必要的应用程序开发。你的移动网站成为你的应用。我的一些同事在builtvisible来说，这似乎有点有趣的讨论：做品牌需要一个应用程序和网站，或一个PWA？
充实了这一点，这意味着我们希望像推送通知，后台同步，网站/应用程序脱机工作，有觉得自己像一个本地应用一定看/设计，能够对设备进行设置主屏幕。
这些都是我们传统上没有在网络上提供给我们的东西。但由于新的浏览器支持更多的HTML5规范和先进的JavaScript，我们可以开始创建一些这样的功能。在整体上，进步的网络应用程序是：

深圳网站设计哪家好

华丽的婚礼网站设计

进步
为每一个用户工作，无论浏览器的选择，因为他们是建立以渐进式增强为核心的宗旨。
反应敏捷的
适合任何形式的因素：桌面，移动，平板电脑，或什么是下一步。
连接独立
加强与服务工人的工作离线或低质量的网络。
像APP
感觉像一个应用程序到用户与应用程序风格的相互作用和导航，因为他们是建立在应用程序外壳模型。
新鲜的
总是最新的感谢服务工人的更新过程。
保险柜
服务通过HTTPS来防止窥探，确保内容没有被篡改。
发现
被识别为“应用程序”由于W3C的体现和服务人员登记范围，让搜索引擎找到他们。
重新接合
通过像推通知这样的功能重新进行重新接触。
安装
让用户“保持”的应用程序，他们发现最有用的在他们的主页屏幕上没有麻烦的一个应用程序商店。
链接
通过网址轻松共享，不需要复杂的安装。
来源：你的第一个进步的网络应用程序（谷歌）

值得我们花点时间来打开“应用程序”的一部分。从根本上说，有一个PWA两部分：服务人员（我们会在一分钟内），和应用程序体系结构。谷歌将此定义为：
…最小的HTML，CSS和JavaScript驱动的用户界面。应用程序外壳应：
负荷快速
被缓存
动态显示内容

一个应用程序外壳是可靠的良好性能的秘密。想想你的应用程序的外壳像捆绑的代码，你会发布到一个应用程序存储，如果你正在建立一个本地应用程序。它的负载需要离开地面，但可能不是整个故事。它保持您的用户界面本地和通过一个接口动态地拉动内容。
即时加载Web应用程序的应用程序外壳架构

加载内容的这种方法允许令人难以置信的快速感知的速度。我们能够得到的东西，看起来像我们的网站在用户面前几乎瞬间，只是没有任何内容。然后该页面将去获取内容和所有的好。显然，如果我们真的在现实世界中这样做的事情，我们会很快地运行到搜索引擎优化问题，但我们也会解决这一问题。

如果当时，在他们的核心，一个渐进的网络应用程序只是一个在一个聪明的方式为加载的东西额外的功能，为什么我们要一个网站？

使用案例
让我在我进入这是明确的：对于大多数人来说，一个PWA是你不需要的东西。这是很重要的，它不停的重复，所以我再重复一遍：
你可能不需要一个PWA。

这的原因是，大多数网站不需要能够表现得像一个应用程序。这并不是说没有好处，PWA功能所能带来的东西，但在不少地方，效益不大于它需要实现的功能在此刻的时间。
当你看着一个PWA的呢？好吧，让我们看看一个清单的东西，可能表明你确实需要一个…
标志一个PWA可能是适当的

你有：
定期更新的内容，如股票行情，迅速变化的价格和库存水平，或其他实时数据
一个聊天或通讯平台，实时的更新和推送通知的新项目来
一个观众可能会拉数据，然后离线浏览，比如一个新闻应用程序或一个博客每天发布许多文章

一个定期更新的内容的网站，用户可以检查在一天几次
大多是使用支持的浏览器的用户
总之，你有东西超出了一个正常的网站，与互动或时间敏感的组件，或迅速发布或更新的内容。一个很好的例子就是谷歌天气PWA：

他们是如何工作的
所以，你有一些东西会从这种功能中受益，但需要知道这些事情是如何工作的。欢迎来到奇迹是服务工人。

服务人员可以被认为是一个代理，坐在你的网站和浏览器之间。它要求截取你要浏览器来做的事情，并劫持返回的回应。这意味着我们可以做的事情，例如，保持一个请求的数据副本，所以当它的要求再次，我们可以直接服务于它（这被称为缓存）。这意味着我们可以获取数据一次，然后重播它一千次，而不必再去获取它。它像一个音乐家，录制一张专辑-这意味着他们不必每次你想听他们的音乐播放一场音乐会。同样的事情，但与网络数据。

如果你想让服务人员更深入的解释，看看Jake Archibald从谷歌给出适度的技术讨论。
服务人员可以做什么
服务人员从根本上存在提供额外的功能，这是没有提供给浏览器，直到现在。这些包括类似的东西：

推通知，用于告诉用户发生了什么事情，如收到一个新消息，或者他们正在查看的页面已被更新
背景同步，用于更新数据，而用户不使用该页面/站点
离线缓存，允许一个用户在离线状态下仍然可以访问某个站点的一些功能的经验
处理地理位置或其他硬件设备的查询数据（如设备gyrpscope数据）
预取数据一个用户将很快需要，如图像进一步下一页
它的计划，在未来，他们将能够做的比他们目前所能做的更多。然而，现在，这些是各种功能，你将能够利用。显然，这些大多是通过Ajax加载数据，一旦应用程序已经加载。

什么是搜索引擎优化的影响？
所以你在网上销售的应用程序。但如果你创造了一个，你会如何确定它的排名？和任何新的前端技术一样，总是会影响你的搜索引擎的知名度。但不要惊慌；你会与一个PWA遇到潜在的问题得到解决之前曾对JavaScript网站SEO。一个引物，以本文对JS SEO一看。
有几个问题，你可能会遇到，如果你要有一个网站，使使用应用程序的外壳架构。首先，这是非常必要的，你要使用某种形式的js框架或视角下的图书馆，像角或反应。如果是这样的话，你会想看一看一些angular.js或反应SEO建议。如果你使用的是其他的东西，短版本是你需要在服务器上的预渲染网页，然后拿起你的应用程序时，它的加载。这使你有所有的好东西，这些工具给你，同时也为谷歌等服务的东西可以理解。尽管他们最近的建议，他们在渲染这种应用越来越好，我们仍然可以看到很多的例子，在野外它们挥舞着可怕的当他们爬重JS的东西。

假设你在聪明的JS前端技术的世界，让你做事情的PWA的方式，您还需要提供所需的网页工作随着HTML CSS和JS。不只是包括脚本标签<代码> src属性，但整个文件，内联。
很明显，这意味着你要增加你发送的页面的大小，但它有一大好处，即网页将立即加载。更重要的是，虽然所有的JS（需要拾取）和CSS（要求作出的设计感）立即交货，浏览器将能够使你的内容和提供的东西，看起来是正确的，通俗易懂。

再次，当我们要使用服务人员缓存内容一旦它的到来，这不应该有太多的影响。我们也可以缓存所有的css和js外部文件需要单独和负载从缓存存储而不是取他们的每一次。这也使它很可能略多，PWA在用户试图请求你的网站第一次失败了，但你仍然可以优雅地处理这种情况的错误信息或默认的内容，并重新尝试在下一页查看。

还有其他潜在的问题，人们可以运行在，以及。华盛顿邮报，例如，建立一个自己的网站的版本，但它只适用于移动设备。显然，这意味着该网站可以爬好的谷歌的移动机器人，但不是桌面的。重要的是要尊重的P部分的缩写-网站应该启用用户可以使用的功能，但仍然正常工作的人使用的浏览器，不支持他们的工作。它是关于加强功能，而不是要求人们升级他们的浏览器。

与所有这一切的唯一一个稍微复杂的事情是，它需要，最好的经验，你设计你的应用程序离线的第一次经验。这是如何做的是在卫国明的演讲中引用。唯一的问题是，沿着这条路线：你只服务内容一旦有人到达你的网站，等了足够长的时间来加载一切。显然，在谷歌的情况下，这是不好的工作。所以这是我建议的…

而不是仅仅发送您的应用程序，然后使用Ajax请求的内容加载，然后拿起，使用此工作流代替：

用户到达现场
网站发送回应用程序（最小的HTML和CSS，JS，立即使一切工作），随着…
…内容Ajax响应，预加载应用程序状态

应用程序立即加载，然后拿起前端。
添加所需的数据意味着，在负荷，我们不可能使一个Ajax调用获得初始数据要求。相反，我们可以捆绑，在太，所以我们得到的东西，可以立即渲染内容以及。

作为一个例子，让我们想想一个天气应用。现在，基本的模式将是，我们发送用户的所有内容显示我们的应用程序的基本版本，但不是数据说什么天气是。在这个修改后的版本，我们也将在今天的天气是什么样的，但任何后续的数据请求，然后我们去一个Ajax调用服务器。
这意味着我们还提供内容，谷歌等指标，没有从我们的AJAX可能问题调用失败。从谷歌和用户的角度来看，我们只是提供了一个非常高性能的初始负载，然后注册服务人员提供更快的经验，为每一个后续页面，并可能额外的功能。