首页手记您应该了解的渐进式Web应用程序的一切

您应该了解的渐进式Web应用程序的一切

标签：

Html5 JavaScript

一个渐进式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