您应该了解的渐进式Web应用程序的一切@慕课网原创_慕课网

一个渐进式Web应用程序是一个Web应用程序，它利用了现代浏览器的功能，可以添加到您的主屏幕，表现就像一个本地应用程序。

在本教程中，我们将向您展示需要了解PWAs的所有内容，一步一步，使用实例和演示程序。不要从头开始，我们将使用我们最近制作的自拍应用程序，并使其渐进。

什么是Progressive Web App

在其核心，一个渐进的网络应用程序与普通网站没有任何区别 - 它由HTML，CSS和JavaScript组成，并且生活在浏览器中。将PWA与常规网站分开的是需要实现的10个关键概念的列表。这些是直接从Google Developers网站获取的。

安全 - 通过HTTPS服务，以防止窥探，并确保内容未被篡改。
进步 - 为每个用户工作，无论浏览器的选择，因为它们以渐进增强为核心原则。
响应 - 适合任何形式：桌面，移动，平板电脑或下一个任何。
与连接无关 - 增强了服务人员离线工作或低质量网络工作。
App-like - 感觉像应用程式风格的互动和导览一样的应用程式，因为它们是建立在应用程式外壳模型上的。
新鲜 - 由于服务工作者更新过程，始终保持最新。
可发现 - 由于W3C清单和服务工作者注册范围允许搜索引擎找到它们，可识别为“应用程序”。
可重新启用 - 通过推送通知等功能，简化重新订阅。
可安装 - 允许用户在主屏幕上“保持”他们发现最有用的应用程序，而不会造成应用商店的麻烦。
可链接 - 通过URL轻松共享，不需要复杂的安装。
遵循这些准则将确保您的应用程序不仅在浏览器中查看时工作良好，而且还可以通过主屏幕快捷方式单独启动。您可能会发现Google已经选择了令人困惑的措辞，但不用担心，我们将在本教程后面逐一解释规则。

什么进步的Web应用程序不应该

PWAs的概念不应该与：

基于Cordova的混合应用程序
反应本地
NativeScript
电子和NW
所有上述技术都会包装HTML应用程序，并将其打包成可执行文件，无论是.apk，.exe还是其他任何内容，然后必须从相应的应用商店下载并安装在用户的设备上。

PWAs不需要安装，在Google Play或iTunes App Store中也不可用。要下载PWA，您只需访问它的网站，然后将其保存到主屏幕作为快捷方式。开发和维护单独的iOS和Android版本不再是一个问题，但是需要考虑浏览器支持。

安全

大多数渐进的Web应用程序与本机API和服务工作人员合作，处理敏感数据的技术需要谨慎处理。这就是为什么每个PWA必须通过HTTPS连接提供服务。

如果您无法访问具有SSL证书的服务器，则在安全环境中运行项目的最简单方法是通过GitHub Pages或类似的服务。任何GitHub存储库都可以通过HTTPS直接托管，GitHub和GitHub Pages都可以免费获得公开的资料。

这是我们选择托管我们的演示的地方：[https : //tutorialzine.github.io/pwa-photobooth/](https : //tutorialzine.github.io/pwa-photobooth/)。

对于本地服务器上的简单测试，您还可以尝试Ngrok。它是一个小工具，允许您将任何当前运行的本地主机隧道传输到安全的公共URL。Ngrok是免费的，适用于Windows，Mac和Linux。

进步

实质上，这意味着，PWA应该使用广泛支持的网络技术，并尽可能多地浏览浏览器。众所周知，在网络发展的世界里，这是不可能的，但是我们仍然可以做一些事情来覆盖更大的用户群。

例如，在我们的PhotoBooth应用程序中，我们使用getUserMedia（） API访问设备上的硬件摄像机。它在不同浏览器中的支持是非常不一致的 - Safari根本不支持它，支持它的浏览器需要前缀，使用不同。

为了确保更多的人可以使用我们的应用程序，我们涵盖了所有的前缀：

navigator.getMedia =（ 
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
）;

如果没有任何前缀可用，我们也会显示错误：

if（！navigator.getMedia）{
    displayErrorMessage（“您的浏览器不支持navigator.getUserMedia界面”）;
}
else {
    //使用Camera API
}

应尽可能提供回收和聚合物填料。同样的原则也适用于CSS和HTML代码。

响应

应用程序应该在所有设备上看起来不错，无论其屏幕尺寸如何。我们的应用程序有一个相当简单的UI，所以我们只用了几个媒体查询来控制字体大小，边距，边距等。

不要害怕使用CSS库和框架，如引导，因为他们使它很容易形成网格，并处理排版和一般的响应速度。

4.连接无关

这是重要的一个。使用服务工作人员，即使没有可用的互联网连接，您的应用也能运行。

某些应用程序只能部分缓存：用户界面被缓存并脱机可用，动态内容仍然需要访问服务器。

其他的，像我们的PhotoBooth演示，可以被缓存的全部。所有源代码和资源都将在本地保存，并且应用程序将脱机和在线工作完全一样。这是使魔术发生的代码：

这是服务工作者的过度简单使用，在商业项目中谨慎使用。
首先我们需要制作一个服务工作者的JavaScript文件，并定义它后面的逻辑。

sw.js

//server worker。
this.addEventListener（'install'，function（event）{
    event.waitUntil（
        caches.open（'v1'）然后（function（cache）{
            //如果无法保存任何这些资源，缓存将失败。
            return cache.addAll（[
                // Path是相对于origin，而不是app目录。
                '/ PWA-大头/'，
                '/pwa-photobooth/index.html'，
                '/pwa-photobooth/assets/css/styles.css'，
                '/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2'，
                '/pwa-photobooth/assets/js/script.js'，
                '/pwa-photobooth/assets/icons/ic-face.png'，
                '/pwa-photobooth/assets/icons/ic-face-large.png'，
                '/pwa-photobooth/manifest.json'
            ]）
            .then（function（）{
                console.log（'Success！App offline offline！'）;
            }）
        }）
    ）;
}）;

//定义当请求资源时会发生什么。
//对于我们的应用程序，我们做一个Cache-first方法。
self.addEventListener（'fetch'，function（event）{
    event.respondWith（
        //尝试缓存。
        caches.match（event.request）
        .then（function（response）{
            //如果资源未存储在缓存中，则返回到网络。
            返回响应|| 取（event.request）;
        }）
    ）;
}）;

然后我们需要将该服务工作者链接到我们的HTML。

的index.html

<SCRIPT>
//注册

if（'serviceWorker'in navigator）{
    // Path是相对于origin，而不是根目录。
    navigator.serviceWorker.register（ '/ PWA-大头/ sw.js'）
    .then（function（reg）{
        console.log（'注册成功，范围是'+ reg.scope）;
    }）
    .catch（function（error）{
        console.error（'注册失败，'+错误）;
    }）;
}
</ SCRIPT>

现在我们项目中的所有文件都将保存在用户的浏览器中。任何JavaScript变量和对象也应尽可能保存在localStorage或IndexDB中。

现在，服务人员都支持在Chrome，Firefox和Opera。Safari和Edge也在努力采用它们，我们希望将来可以在每个浏览器中使用它们。

应用程式

建立PWA时，建议遵循一个名为app-shell架构的设计理念。这听起来很复杂，但基本上归结为：应用程序分为两个主要组件：外壳和内容。

shell包含所有静态UI元素，如标题，菜单，抽屉等。当我们缓存应用程序时，shell应该始终保存在设备上，因为我们希望它始终可用。这样当没有互联网连接的用户打开应用程序时，他们将看不到空白屏幕或运行中的恐龙 - 他们会看到缓存的应用程序界面和一个适当的错误消息。
内容驻留在shell中。它也可以被缓存，但是没有必要这样做，因为内容通常是动态的，频繁变化的，并且可以在每个页面加载上都不同。

新鲜

一旦缓存，我们的PWA将始终从本地存储装载。但是，如果我们以任何方式更改服务工作者sw.js，在下一页加载新版本将被下载并安装。

this.addEventListener（'install'，function（event）{
    event.waitUntil（
        caches.open（'v1.0.1'）然后（function（cache）{
            // ...
        }）
    ）;
}）;

使用服务工作者更新，我们可以重新下载资源，删除旧的缓存或完全更改服务工作者的逻辑。您可以从这个Google Developers文章 - 这里了解有关SW Update进程的更多信息。

可发现

通过在我们的应用程序中添加Web清单，我们可以提供有关它的各种信息，并更改在人员设备上显示的方式。它允许应用程序通过自定义图标保存到主屏幕，以便在单独的浏览器窗口中启动，还有许多其他酷的东西。

Web Manifest采用简单的JSON文件的形式：

的manifest.json

{
  “name”：“Progressive Web App：PhotoBooth”，
  “short_name”：“PhotoBooth”，
  “icons”：[{
      “src”：“assets / icons / ic-face.png”，
      “type”：“image / png”，
      “sizes”：“72x72”
    }，{
      “src”：“assets / icons / ic-face-large.png”，
      “type”：“image / png”，
      “sizes”：“144x144 256x256” 
    }]，
  “start_url”：“index.html”，
  “background_color”：“#fff”，
  “theme_color”：“#fff”，
}

大多数属性都是自我解释的，所以我们只会覆盖更重要的属性。要查看完整的Web清单格式和所有可用的字段，请到这里。

短名称 - 这是我们的应用程序在保存到主屏幕时将具有的名称。
图标 - 具有不同分辨率的图标数组。
显示 - 定义应用程序的打开方式。我们选择了独立的，所以当我们的照片展位启动时，将出现在全屏幕窗口中，无需任何浏览器导航或菜单。它也将被视为多任务中的单独应用程序。
要注册清单，我们必须将其链接到我们的HTML：

<！ - Web清单 - >
<link rel =“manifest”href =“manifest.json”>
Safari不支持Web Manifest标准，但我们可以使用Apple特定的元标记定义类似应用程序的行为：

<！ - iOS中的应用程式行为的元标记 - >
<meta name =“apple-mobile-web-app-capable”content =“yes”>
8_notifications.png

8.重新参与

推送通知不仅限于本机应用程序。由于服务人员和Push API，网络应用程序也可以向Android通知栏发送消息。并不是所有的应用都将受益于这个功能，但是当正确使用通知真的可以帮助用户吸引。

这个主题超出了我们的教程的范围，因为推送通知是相当复杂的，值得拥有一个完整的课程。如果您仍然想实现通知您的网络应用程序，这里有一些最好的学习资源可用：

Google Developers，推送通知：及时，相关和准确 - 在这里。
Google开发人员，在开放Web上推送通知 - 这里。
MDN，使用Push API - 这里。
Push.js，提供更清洁的API来处理推送通知的库 - 这里。
9installable.png

9.可安装

默认情况下，任何网站都可以使用Chrome浏览器菜单中的“ 添加到主屏幕 ”按钮手动保存到主屏幕。不过，让用户以这种方式“安装”我们的应用可能相当困难，因为大多数人根本不了解该功能。

幸运的是，您的应用程序有一种方法可以通过简单的安装弹出窗口提示用户保存它。为了防止开发人员滥用这些弹出窗口，没有办法以编程方式显示它们。相反，当应用程序满足一系列要求时，它们将自己出现：

有一个有效的网络清单。
安装了一个有效的服务工作器。
该应用程序通过HTTPS提供。
我们有上述所有的内容，所以当用户访问我们的应用程序的网站几次，他们会得到这个提示：

添加至主屏幕，prompt.png
添加到主屏幕提示
我们的应用程序的整个安装过程是在这个简单的提示。安装会立即发生，一旦保存，PhotoBooth将可以从主屏幕图标启动，行为完全像本机应用程序。

10.可连接

任何拥有网络浏览器的人都可以访问PWA应用程序，只需通过其URL访问它们即可。没有第三方工具来查找或安装它们。

如果应用程序以独立模式运行，建议添加应用内共享按钮，因为浏览器地址栏和菜单不可见。

结论

我们的PWA现已完成。我们可以使用官方Google制作的“ 灯塔”工具，测试PWA规则遵循的程度。它重新创建可能的场景并彻底测试应用程序。这是它告诉我们关于PhotoBooth：
灯塔报告
我们通过了！

如果您想要找到更多的PWAs玩，请访问pwa.rocks。他们提供了一个很好的游戏集合和有用的工具，展示了Progressive Web Apps的强大功能。

参考链接：https://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps