[译] 将网站转换为渐进式 Web 应用程序之简易教程

原文地址：The easy way to turn a website into a Progressive Web App

原文做者：Alexandre Plennevaux

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：bambooom

校对者：MechanicianW tvChan

什么是渐进式 Web 应用程序？

基本上来讲，PWA 是一个网站，当用手机访问时，网站能够保存在手机，而且体验就像一个原生应用程序同样。它会有一个加载显示，你能够删除 Chrome 的界面，若是网络链接断开，它仍然能够正常显示内容。最重要的是它提升了用户的参与度：在 Android 上的 Chrome 浏览器（不肯定其余移动端浏览器上行为是否一致）若是检测到网站是 PWA，它会提示用户使用你选择的图标将其保存在设备的主屏幕上。javascript

为什么它如此重要？

PWA 对客户端上的业务有好处。 中国的亚马逊，阿里巴巴注意到因为浏览器“安装”网站的提示，用户的参与度提升了 48%（来源）。css

这说明 PWA 彻底值得为之努力奋斗！html

这极大可能要归功于一种叫 Service Workers 的技术，它容许你在用户系统中保存静态资源（html、css、javascript、json…），同时还有一个 manifest.json 文件，指定网站如何像一个已安装的应用同样运行。前端

例子

这些都是我用本教程里描述的相同的方法作的网站：java

plancomptablebelge.be （一个单页网站）
didiermotte.be （一个基于 WordPress 的网站）

更多例子能够在这里看到：pwa.rocksandroid

设置

将网站变成 PWA 可能听上去很复杂（Service workers？是什么？），但其实并不难。ios

1. 要求：https 而不是 http

最困难的部分就是 PWA 只能在安全域的网站上运行（也就是在 https:// 后，而不是 http://）。git

一般这些很难手动设置，可是若是你有本身的服务器，你可使用 letsencrypt 很简单并自动化的完成这个步骤，而且彻底免费。github

2. 工具

2.1 lighthouse 测试

lighthouse 测试是由 Google 建立并维护的自动化测试工具，它经过三个标准来测试网站：渐进性、性能、可访问性。它会对每一项给出一个百分比分数，并提出优化建议，是个很是好用的学习工具。
realfavicongenerator.net
UpUp.js 库

2.2 realfavicongenerator.net

realfavicongenerator.net 注重你的 PWA 的视觉层。它会生成上面提到的 manifest.json 文件，以及网站保存到任意移动设备上时所须要的各个版本的图标文件，以及添加到页面 <head> 标签的一段 html 代码。web

建议：虽然 RFG 将你的资源放在子文件夹中，但这会使得启用 PWA 更困难。因此为了简单方便，将全部图片等资源所有放在根目录下便可。

2.3 经过 upup.js 使用 service workers

Service workers 是一项 JavaScript 技术，对我疲倦而急躁的大脑来讲很难理解。但幸运的是，一位聪明的德国女孩告诉我 Tal Atler，她但愿推动“离线优先”的理念，因此她建立了一个 JavaScript 库可以让你的网站在掉线的时候依然轻松保持正常运做。谢谢你，Ola Gasidlo！

只须要快速浏览一下 UpUp 的教程就够了。

2.4 Manifest 文件

编辑 RFG 生成的 manifest.json 文件，它至少应包含这些条目："scope"、"start_url"、"short_name"、"display"。如下是一个示例：

{
    "name": "My PWA Sample App",
    "short_name" : "PWA",
    "start_url": "index.html?utm_source=homescreen",
    "scope" : "./",
    "icons": [
        {
            "src": "./android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffee00",
    "background_color": "#ffee00",
    "display": "standalone"
}
复制代码

更多相关信息见此处：developers.google.com 。

3. 步骤

使用 Realfavicongenerator 生成须要的 html 和图片，将代码添加到你的网站代码中。
在你的 https 域上发布网站。
作 lighthouse 测试。
分析结果。
解决每一个问题。
回到第 3 步重复。
重复直到你在几乎全部地方拿到接近 100 的分数，而且在“Progress”一项拿到 100。
在你的手机上测试看看。有必定机会，你会看到底部弹出窗口，邀请你将网站保存都手机主屏幕上。

若是你想深刻了解...

这是一个我用 Github Pages 作的 PWA 的例子，我在 BeCode 时给个人后辈现场编写的，你能够用你的手机来访问并测试，点击这里，它的代码在这里。

你能够在下面这本书中找到全部有关 PWA 的信息：

Building Progressive Web Apps

以上就是全部内容，PWA 快乐！

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。