渐进式 Web 应用程序 (PWA)：它们是什么以及它们如何工作

joypaulai24

在当今世界，几乎所有能上网的人都主要通过智能手机进行浏览，谷歌在定位我们的网站时已开始优先考虑移动版本 ，加载时间过长或缺乏连接可能会让我们失去潜在用户/client...渐进式 Web 应用程序出现。一种新的网站格式发生了变化，吸收了迄今为止移动世界的绝对女王应用程序的大部分主要优势，使它们成为自己的应用程序，并为用户提供同样原生且令人满意的体验。 索引[显示] 什么是渐进式 Web 应用程序 渐进式 Web 应用程序，更亲切地称为 PWA，是结合了最好的网站和最好的应用程序的网站。稍后我们将看到它在浏览时提供的优势。但最重要的是，对于 Google 来说，PWA 必须始终能够用这三个基本特征来描述。 可靠的 渐进式 Web 应用程序必须可以全部或部分访问，甚至可以离线访问。用户永远不必看到我们又爱又恨的恐龙。这无疑是此类网站的主要优势之一。 快的 它必须很快，几乎立即加载，给人一种即时的感觉。此外，PWA 可以快速、流畅地响应任何用户交互：点击链接、按钮、滚动…… 迷人 它还必须具有原生的感觉，具有应用程序的所谓“外观和感觉” 。当我们浏览它时，我们必须感觉到它是从一开始就为移动设备开发的东西，没有任何使我们脱离这种沉浸感的元素，例如浏览器栏、光标、一侧被切断的网站或太小的字母。 渐进式 Web 应用程序的优点 之前我们说过 PWA 从应用程序中获取概念和功能，这赋予了它一些迄今为止在移动网站上无法实现的“超能力”。 可安装 我们可以在智能手机上安装该网站，将其图标和名称添加到桌面，就像它只是另一个应用程序一样。这将提高未来访问时访问的可见性和即时性。此外，由于它实际上是一个网站，因此不需要占用设备本身的空间，并且几乎可以立即安装。 自动更新 也无需关注未来的更新即可下载它们。 PWA 本身将负责查看您拥有的版本，并在后台自动更新可能存在的任何新元素或修改。

可离线访问 得益于渐进式 Web 应用程序的预缓存功能，无论当时的连接质量如何，浏览始终是可能的（而且速度很快）。进入隧道或互联网出现故障时，不再会出现无法使用网络的情况。 推送通知 最引人注目的功能之一，显然是从应用程序继承的，即使没有打开 PWA，也可以向 电话数据 智能手机发送推送通知。这是吸引用户注意力以便他们再次浏览我们网站的一种方式。 本国的 正如我们已经提到的，桌面上有一个图标，加载闪屏，全屏显示，没有任何类型的浏览器元素......所有这些都给人一种巨大的应用程序的感觉，是为移动设备原生开发的东西。 可链接 相对于应用程序的另一个优势是，因为它是一个网站，所以所有 URL 都可以完美链接并且易于共享。 主要内容 好了，现在我们知道了渐进式 Web 应用程序有哪些主要功能，但是它是如何实现这些功能的呢？好吧，让我们看看在 PWA 中发现的不同参与者。有些是必需的，有些则是可选的。 申请清单 基本的。应用程序清单是一个 .json 格式的文件，我们将在其中定义 PWA 的许多视觉外观和可用性特征。例如，我们可以指定如下内容： PWA 的名称 安装时显示的图标 单击图标后的主页 主要颜色 如果我们希望它垂直或水平显示 如果我们希望在浏览时看到更多或更少的浏览器元素 网站内容的简要描述 主要语言 该文件通常称为manifest.json（尽管您可以给它另一个名称），如果我们希望整个网站成为渐进式Web应用程序，则它必须托管在域的根目录下。如果，另一方面另一方面，我们只希望页面的一部分是 PWA，应用程序清单应托管在所选目录的根目录中。 服务人员 基本的。 PWA 的伟大引擎及其大多数功能的主要原因。Service Worker 是一种特殊的 JavaScript，因为它不仅仅作用于 URL，而是作用于整个 Web。一旦我们进入渐进式网络应用程序，它就会被注册并激活，即使我们关闭网站，它也始终在后台在用户和服务器之间保持活动状态。 它始终处于活动状态，对来自服务器和用户的不同事件做出反应。这些事件主要可以分为三种类型。




Fetch：用户请求从服务器下载元素。 推送：服务器请求向用户发送通知。 同步：数据同步。 根据它是否接收到一个事件或另一个事件的请求，它将激活不同的功能：缓存、后台同步、推送通知、如果用户在发出请求时未连接，则传送网站的缓存版本...... 重要的是要记住，由于 Service Worker 从浏览器和服务器之间的通信中捕获大量高度泄露的信息，因此在渐进式 Web 应用程序中浏览必须始终在 HTTPS 下进行。我们需要加密和安全的浏览以避免出现问题。 响应式设计 基本的。如今，这似乎有些不同寻常，但网站必须能够在任何类型的设备上正确显示，无论其大小和分辨率如何。因此，响应式设计是基础，特别是当我们考虑到 PWA 的移动特性时。 关于这个主题的方式和原因已经说了很多并且很好，所以我们在这里不再多说。 地理定位API 如果我们希望能够请求访问用户的地理位置，则需要 API 。为此，我们还需要有一个安全的 HTTPS 网站。 API媒体 最后，通过其他 API，我们可以访问设备的本机功能，例如相机或麦克风。 如何在手机上安装 PWA？ 要在我们的智能手机屏幕上安装渐进式网络应用程序，用户有两种方法可以实现。 通过浏览器将向您显示的按钮 最直接的方式将使您的用户更轻松地安装网站，尽管浏览器要显示此安装提示，PWA 必须满足某些最低要求： 至少包含名称、短名称、主页和 192x192 图标的 manifest.json。 在网络上注册的 Service Worker。 通过 HTTPS 安全浏览。 接受至少两次拜访，两次拜访之间至少间隔 5 分钟。 如果我们满足这些要求，我们将看到如下内容： 通过浏览器菜单 另一方面，如果我们没有满足这些最低要求，或者当浏览器向用户显示通知时用户不同意安装 PWA，那么我们剩下的选项就是从浏览器菜单本身进行安装。单击三个点图标，然后单击“添加到主屏幕”。