• 主页
  • 文章
  • SEO
  • 关于渐进式 Web 应用程序及其在 Drupal 9 中的实现

关于渐进式 Web 应用程序及其在 Drupal 9 中的实现

已发表: 2020-10-20

互联网最初建立的目的是在 1960 年代为军队和科学家提供更好的交流。 很快，网络在 1990 年代变成了一种革命性的现象，并且从那时起就势不可挡。 尽管网络的目的不断变化，但保持不变的一个目的是方便。

对便利性的需求带来了许多创新的互联网接入方式。 本机移动应用程序和 Web 应用程序是使互联网浏览变得轻松方便的两种此类技术。 在本文中，我们将讨论 Progressive Web Apps 以及如何使用 Drupal Progressive Web App 模块通过 Drupal 实现它。 但在我们深入探讨所有这些之前，让我们看看原生和网络应用程序的功能以及渐进式网络应用程序如何填补空白。

PWA-drupal-9

原生移动应用的特点

  • 它们是特定于平台的应用程序。 这也意味着需要为每个新平台（iOS、Android）重新构建它们。
  • 需要下载。
  • 通常超级快。
  • 丰富的特性和功能。
  • 可以无缝融入任何设备并感觉像是其中的一部分。
  • 可以离线工作。
  • 他们可以轻松访问设备数据、设备硬件和本地文件系统。
  • 开发、维护和升级的成本更高。
  • 已预先获得安全批准，可在 App 商店下载。
  • 搜索引擎很难抓取。

网络应用程序的特点

  • 不依赖于平台。 您只需要一个浏览器即可访问它们。 支持大多数现代浏览器。 不需要下载。
  • 没有用于开发它们的特定 SDK。 前端是使用 HTML、CSS、JavaScript 和后端的 LAMP 或 MEAN 堆栈开发的。
  • 无需升级。 更少的开发和维护成本。
  • 虽然它需要身份验证，但安全性是一个问题，因为它容易受到未经授权的访问。
  • 它们不能离线工作，并且可能比本地移动应用程序慢。
  • 它们未在 App 商店中列出，因此发现它们可能更难。

什么是渐进式 Web 应用程序，它们如何填补空白？

因此，简而言之，原生 Web 应用程序功能强大，但在其覆盖范围方面却有所欠缺。 而网络应用程序具有更广泛的覆盖范围，但缺乏功能。 这就是渐进式 Web 应用程序的用武之地。

渐进式 Web 应用程序是本机应用程序和 Web 应用程序优势的理想组合。 使用现代 Web 功能，渐进式 Web 应用程序 (PWA) 可以为用户提供类似应用程序的体验。 它结合了大多数现代浏览器提供的功能和移动体验的好处。 您可以构建类似于本机应用程序、极其复杂且可安装的应用程序。 现在大多数浏览器都支持 WebAssembly，PWA 可以用开发人员选择的语言构建，从而大大增加了它可以提供的功能的范围和灵活性。

渐进式网络应用程序的特点

  • 它们独立于平台和设备。 在任何浏览器上都能完美运行。
  • 它们加载速度快且非常可靠（即使互联网速度较低）。 滚动非常流畅。
  • 也可以离线工作。
  • 可以启用类似本机应用程序的推送通知。
  • 可以像本机应用程序一样访问设备硬件和数据。
  • 可以在用户的​​主屏幕上添加快捷方式（而不是下载它们）
  • 无需复杂的安装。 可以轻松分享网址。
  • 响应所有设备。
  • 它们更容易、更快地开发。 维护也很容易。

在谈论 Drupal 中的 PWA 模块之前，我们先来看看构建 PWA 的最低要求——

  • 应该通过 HTTPS 运行。
  • 应该包括一个 Service Worker – Service Worker 是一个脚本 (javascript)，它在浏览器上通过 https 运行并提供浏览器访问。 它提供类似于原生应用程序的功能，例如离线内容交付、推送通知等。
  • 应该有一个 Web 应用程序清单——这是一个 JSON 文件，其中包含有关 Web 应用程序的信息（如名称、描述、作者等）的元数据。 这对于搜索引擎优化也很有用。

PWA Drupal 模块——如何使用 Drupal 9（和 8）制作渐进式 Web 应用程序

Drupal PWA 模块很容易安装，带有 Service Worker（用于缓存和其他类似离线应用程序的功能）和您可以配置的 Manifest.js。 但是，在开始 PWA 安装过程之前，您需要确保已安装 SSL。 如果您的需求非常具体，需要进行大量自定义，您可以使用 Angular 或 React 等前端框架开发 PWA 并自定义您自己的 Service Worker。

安装 PWA Drupal 9 模块

使用 Drupal 7，安装 Progressive Web App Drupal 模块就像下载和启用该模块一样简单。 您可以通过配置表单生成 manifest.js 文件并对其进行验证。 但是，在 Drupal 9 中，我们无法仅通过启用 PWA 模块直接集成此功能。 原因是它没有为您提供配置 manfest.js 文件的选项。

  1. 通过下载并启用 PWA Drupal 模块来安装该模块。 安装 PWA 模块

  2. 对于 Drupal 9，应用这个补丁

  3. 完成后，导航至配置 -> PROGRESSIVE WEB APP -> PWA 设置并添加所需信息。

PWA-配置

PWA-配置

服务工作者

要缓存的 URL - 您可以在此处指定即使在离线时也需要访问的页面。 此处提到的 URL 将被缓存 - 请确保在此处进行任何更新时刷新缓存。
要排除的 URL – 如果您有绝对需要仅在 Internet 上工作的页面，请在此处提及它们。
离线页面– 在用户离线且页面未缓存时向他们显示个性化页面。

清单文件.json

Drupal manifest.json 文件允许用户将 PWA 添加到他们的主屏幕。 它包含您可以修改以更改 PWA 行为方式的配置——例如名称、显示名称、背景颜色、方向等。

清单-json

该文件将被添加到您的索引页面的 head 标签中。
<link rel="manifest" href = "/manifest.json">

清单文件.json
清单文件.json

下图显示了“添加到主屏幕”选项。 当您选择该选项时，将在主屏幕上创建一个图标。

渐进式网络应用程序