• 主页
  • 文章
  • App
  • 关于如何将网站转换为渐进式 Web 应用 (PWA) 的指南

关于如何将网站转换为渐进式 Web 应用 (PWA) 的指南

已发表: 2018-07-02

在很短的时间内，PWA 在移动应用行业中取得了非常突出的地位。

谷歌想让你知道的这个概念是对不断提出同样抱怨的行业的喘息机会——

关于网站：加载速度慢，共振率低

关于移动应用程序：应用程序占用大量内存空间，它依赖于网络连接，以及用户从找到应用程序到开始使用它必须采取的漫长步骤。

由于渐进式 Web 应用程序 (PWA) 是直接从网站下载并作为网站运行的，因此用户可以通过三种方式受益 -

  • 他们可以节省首先在商店中找到应用程序、安装应用程序然后输入信息以启动应用程序的时间
  • 由于渐进式 Web 应用程序作为网站工作，它们占用的设备存储空间最少，并且
  • 因为它们主要作为网站工作，所以缓存的概念适用，它使应用程序即使在没有网络连接的情况下也能运行。
在这里找到

将现有网站转换为 PWA 的原因

PWA 的好处

除了为用户带来这些明显的好处外，渐进式 Web 应用程序——网站和移动应用程序的理想组合——也已成为商业成功的成本效益公式。 这就是为什么人们期待将网页转换为应用程序的原因。

在这里找到

PWA 给企业带来的好处是易于发现、占用更少的内存空间、开发成本低、最后离线运行速度快，可以通过观察这些知名品牌的增长数量变化来衡量–

渐进式 Web 应用程序为企业带来的好处

像这样的成功案例以及行业中的许多成功案例足以让每个现代移动企业都在寻找最好的渐进式 Web 应用程序开发公司，并寻找如何将网站转换为 PWA 的方法。

如果您也计划将网站转换为渐进式 Web 应用程序并利用该概念所提供的所有低投资成本优势，那么您来对地方了。

以下是如何将 PHP 网站转换为PWA 或如何将网站变成应用程序的确切步骤，由 Google 分享给我们的渐进式 Web 应用程序开发人员团队（成为 Google 官方开发人员机构之一的好处之一） .

但首先是第一件事。 了解从网站创建 PWA或将网页转换为应用程序所需的元素。

如何将网站变成 PWA

要将网站转换为 PWA ，需要以下三件事 -

  1. 运行 Chrome 52 或更高版本的附加 Android 设备，
  2. 对 Git 和 Chrome DevTools 有基本的了解，
  3. 示例代码，以及
  4. 文本编辑器

准备好这些后，准备将 Web 转换为 PWA 或将网站转换为 Web 应用程序。

第 1 步：加载 URL

将您的网站迁移到 PWA 的第一步是从命令行克隆 GitHub 存储库： 

 $ git clone https://github.com/googlecodelabs/migrate-to-progressive-web-apps.git

这样做将有助于开发一个Migrate to PWA目录，其中包含每个步骤的完整代码。 对于这个特定的 codelab，上传工作文件，然后在那里进行更改。

签出代码后，使用“简单 HTTP 服务器应用程序”在端口 8887 上提供工作文件。

在此之后，您将能够加载 URL 以将站点转换为 PWA。

第 2 步：在您的手机上查看网站

这是将网站转变为渐进式网络应用程序的第二步。 如果您的桌面插入了 Android 设备，请在您的 URL 中输入 - chrome://inspect。 这将允许您在之前编写的端口的帮助下将端口转发到设备上的同一端口。

按Enter保存。

现在，您将能够在连接的 Android 手机上访问您网站的基本版本 - http://localhost:8887/ 。

第 3 步：添加 Modern Head 标签

要将网站转换为移动应用程序，您必须做的第一件事是使网站对移动设备友好，其次您必须添加 Web 应用程序清单。 清单将描述网站的元信息，它会出现在用户的主屏幕上。

如果您没有适当的模板系统，请添加这些行 - 

 <头部>

<元名称=“视口”内容=“宽度=设备宽度，用户可缩放=否” />

<link rel="manifest" href="manifest.json" />

</head>
  • Viewport – 第一行包含一个指定视口的元标记。 此元素将帮助您提高响应能力。 重新加载站点后编写代码行后，您会发现该站点恰好适合您的设备。
  • 清单– 在您的代码的第二行中，您引用了该文件 – 控制如何将站点添加到主屏幕所需的动作。

完成后，打开文本编辑器。 是时候编写 JSON 了。 在 short_name 部分中，指定将在主屏幕上显示的内容并尽量将其保持在15 个字符以内。

接下来，将您的文件保存为 manifest.json 命名法并在 Android 设备上重新加载页面，然后转到右上角的菜单并选择“添加到主屏幕”。 现在您将能够在主屏幕上看到您的图标！

第 4 步：添加 Service Worker

Service Worker 是用户不在页面上时浏览器可以运行的后台脚本。 它是提供离线支持并在推送通知时激活的元素。

创建一个服务工作者

将此代码复制到一个新文件中，然后将其另存为 sw.js。 

 /** 一个空的服务工作者！ */

self.addEventListener ('fetch', function(event)

{

/** 一个空的 fetch 处理程序！ */

});

就是这样。

注册 Service Worker

您必须在您的网站代码中注册代码才能将网页变成应用程序，为此，打开您的 site.js 文件并粘贴 - 

 navigator.serviceWorker && navigator.serviceWorker.register('./sw.js').then(function(registration) { console.log('优秀，注册范围：'，registration.scope);});

现在，代码将在每个页面加载时执行。 通过重新加载页面然后检查 - chrome://serviceworker-internals/检查其是否正常工作

现在，您的网站将能够提示用户将其安装在他们的主屏幕上，其次，您将能够使您的网站能够支持推送通知，甚至可以离线工作。

第 5 步：使网站脱机工作

第一步是打开 sw.js 脚本并获取缓存对象。 完成后，更新代码并将整个网站应用到缓存。

试试它现在是如何工作的。 卸载当前的应用程序并将其加载到 Chrome 上。 接下来，刷新页面并在右上角的菜单中选择“添加到主屏幕”。

要遵守当 Service Worker 更改时，页面应该重新加载并重新安装它的规则，您所要做的就是添加一个具有 Service Worker 的“版本”的组件。 当这种情况发生变化时，安装动作会再次发生，缓存本来会发生变化的资源。

恭喜，您现在知道如何将 Web应用程序转换为 PWA，如果您并排执行这些步骤，您现在甚至已经将您的网站迁移到了渐进式 Web 应用程序！

Read more

*免责声明*：这些步骤将使您（开发人员）清楚地了解您将如何填补空白并从流程中的 A 点转移到 C 点。如果您是作为一名热情的企业家阅读本文并希望将 wordpress 转换为渐进式网络应用程序或想从网站制作应用程序，我想说，如果没有经验丰富的渐进式应用程序开发服务提供商的支持，请不要这样做。

虽然这些步骤解释了如何将网站制作为应用程序或将 Web 应用程序转换为渐进式 Web 应用程序，但当您坐在实际开发过程中时，会出现许多元素作为该过程的一部分。 因此，与其尝试使用从网站制作应用程序的步骤并因为不确定线元素之间的关系而找到不同的结果，不如将工作交给在该领域具有专业知识的PWA 开发公司。 专家将回答有关如何将网站转换为应用程序、如何将网站变为应用程序的所有问题。