作者｜Maximiliano Firtman

译者｜无明

编辑｜覃云

渐进式 Web 应用程序（PWA）是响应式网页设计的一个新领域，而且越来越流行。PWA 最开始出现在 Android 的 Chrome 上，现在也被用于其他大多数 Android 浏览器，如 Opera、Firefox、Samsung Internet 和 UCWeb，以及 iOS 11.3 之后的 iPhone 和 iPad、桌面操作系统上的 Windows Edge 和 Chrome。

为了帮助读者创建良好的用户体验，我们将分享一些重要的技巧和想法。

WebAPK 与 Android 快捷方式

2017 年，Chrome 为 Android 用户推出了一项新功能：WebAPK。现在，用户在安装 PWA（只要它符合要求）时，Google Play 服务器会创建一个 APK（Android 包，原生的应用程序容器），并将其安装在设备中，就好像它是来自 Play Store 的一样。用户不需要启用不安全来源或做出任何其他设置。

安装 PWA 后，它将出现在主屏幕、应用程序启动器、设置面板当中，与其他原生应用程序一样，也带有电池使用信息和空间使用信息。

如果你的 PWA 不满足所有要求，Play 服务就停止运行，出现连接问题，或使用其他 Android 浏览器（如 Firefox 或 Samsung Internet），然后在主屏幕创建一个标准的快捷方式。

WebAPK 还支持一个特性，这个特性很好，但也很危险，所以使用的时候要注意：PWA 将拥有 Android OS 的域和路径。根据 Web App Manifest 所描述的范围，用户收到该范围内的每个链接都将被转发到全屏应用程序而不是浏览器，所以你必须注意你所使用的 URL。

我们假设你的 PWA 为移动用户提供服务，并且位于域的根目录。如果应用程序是通过 WebAPK 安装的，那么 PWA 将拥有整个域。如果你通过 Facebook 分享调查内容（路径为 /survey），或者通过电子邮件给用户发送包含条款的 PDF 文件（路径为 /terms.pdf），那么用户在单击这些链接时，操作系统将打开 PWA，而不是浏览器。所以，请确保 PWA 路由系统是否知道这些 URL 以及知道如何处理它们，否则的话，只会在浏览器打开它们。

创建自定义的 Web App 安装条幅

我们无法自定义浏览器的 Web App 安装条幅（banner），但可以在向用户展示更多信息后显示它们。

如果满足某些特定条件，一些浏览器会邀请用户安装 PWA。目前，条幅中并没有包含足够的信息来说明用户为什么应该安装这个 PWA。不过，我们可以使用事件来避开条幅，并将其变成用户更有可能接受的东西，例如安装图标。

第一步是取消显示条幅，并保存事件对象以备后用。

// global variable for the event object
var installPromptEvent;
window.addEventListener('beforeinstallprompt', function(event) {
      event.preventDefault();
      installPromptEvent = event;
});

下一步是提供用于说明安装情况的用户界面或安装按钮，用户界面将调用我们的下一个函数：

function callInstallPrompt() {
          // We can't fire the dialog before preventing default browser dialog
    if (installPromptEvent !== undefined) {
          installPromptEvent.prompt();
    }
}

从 PWA 中分享内容

在兼容的浏览器上，Web Share API 将触发操作系统的共享对话框。

当 PWA 处于全屏模式时，用户无法通过浏览器的 URL 栏或共享操作与社交网络共享内容。我们可以利用 Web Share API 来打开原生社交应用程序。

function share() {
    var text = 'Add text to share with the URL';
    if ('share' in navigator) {
        navigator.share({
            title: document.title,
            text: text,
            url: location.href,
        })
    } else {
        // Here we use the WhatsApp API as fallback; remember to encode your text for URI
        location.href = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(text + ' - ') + location.href
    }
}

跟踪事件

如果你有一个 PWA，你会希望跟踪尽可能多的事件，所以接下来让我们来看看目前可以捕捉到哪些事件。我们可以在稍后使用 Google Analytics API 或任何其他分析工具来跟踪这些事件。

window.addEventListener('appinstalled', function(event) {
     // Track event: The app was installed (banner or manual installation)
});
window.addEventListener('beforeinstallprompt', function(event) {
     // Track event: The web app banner has appeared
     event.userChoice.then(function(result) {
           if (result.outcome === 'accepted') {
                // Track event: The web app banner was accepted
           } else {
                // Track event: The web app banner was dismissed
           }
     });
});

用户从主屏幕打开应用程序是一个非常重要的事件，这意味着用户点击了应用程序的图标，或者在具有 WebAPK 支持的 Android 设备上单击了指向 PWA 的链接。

最简单的方法是在 Manifest 的 start_url 属性中添加一个跟踪事件，该 URL 可以自动被当成是来自 Analytics 脚本的 origin，例如：

start_url: '/?utm_source=standalone&utm_medium=pwa'

另外，下面的脚本为我们提供了一个布尔值，表明用户当前是在浏览器中（true）还是在独立应用程序模式（false）中：

然后，如果你使用了推送通知，就可以跟踪多个来自 ServiceWorker 的事件，例如：

self.addEventListener('push', function(e) {
    // Track event: Push Message Received
});
self.addEventListener('notificationclick', function(e) {
    // Track event: Push Message Clicked, you can read e.action.id to track actions
});
self.addEventListener('notificationclose', function(e) {
    // Track event: Push Message Dismissed
});

创建兼容的 iOS PWA

在 iOS 上运行 PWA 时，请务必检查你的状态栏定义，这将创建不同的状态栏体验。

很多人认为 PWA 是首次登陆 iOS 11.3，但实际情况是，在十多年前的 WWDC 07 上，Steve Jobs 已经提出了这个概念。这就是为什么 iOS 在使用传统技术支持主屏幕和离线应用程序一段时间之后，从 iOS 11.3 开始支持与 Android 相同的功能。

如果你仍然想在 iOS 11.3 之前提供 PWA 安装体验，则需要添加元标记，或使用 PWA 作者在 https://github.com/firtman/iWAM 提供的填充代码。

以下是 PWA 在 iOS 上可能会影响用户体验的一些差异：

iOS 上的图标必须是不透明的方形，以避免 UI 问题。不要使用 Android 上的图标，在 iPhone 上要使用 120x120 和 180x180 大小的图标。
如果你有 SPA 或链接到了其他页面，那么请小心你的导航设置，因为如果你不在用户界面中提供导航链接，iOS 用户就无法前进或后退。滑动手势不适用于全屏 PWA。
从 iOS 11.3 的第一个版本开始，操作系统在每次访问应用程序时都会重新加载 PWA，因此，如果用户需要退出应用程序并在稍后再回来（例如，在进行双向认证时），请记住，你的应用程序默认是从头开始的。

在后台同步数据

ServiceWorker 与 PWA 窗口或浏览器选项卡有不同的生命周期。这就是为什么我们可以在后台进行网络操作，即使是在用户关闭 PWA 后。如果有被挂起操作，并且当时没有可用的网络，等到稍后检测到有网络连接，引擎会让我们在后台进行处理。

Background Sync API 目前仅在某些浏览器上可用，因此你必须同时提供后备方案。其原理是，你的 PWA 将设置一个带有字符串标签的标记，表明它需要进行后台同步操作。

navigator.serviceWorker.ready.then(function(reg) { 
   reg.sync.register('myTag')
});

然后，我们在 ServiceWorker 上监听事件，如果它是那个标签，就返回一个 promise。如果 promise 得到满足，则该操作被标记为已完成。如果不是，它会在后台继续尝试。

self.addEventListener('sync', function(event) {
    if (event.tag === 'myTag') {
        event.waitUntil(doAsyncOperationForMyTag());
    }
});

社交网络和伪浏览器

如果你的用户在社交网络上共享你的 PWA 内容，或者他们使用了伪浏览器（使用 WebView 作为内核引擎的浏览器），那么你就需要注意一些问题。

例如，Facebook 在 Android 和 iOS 应用程序中使用了 WebView，当用户点击链接时，就可以在应用内进行浏览。在 Android 上，大多数 WebView 不支持 ServiceWorker，也无法安装你的 PWA，所以当用户从 Facebook 打开你的内容时，你的 PWA 就像是没有任何缓存文件或会话的不兼容浏览器。

从 iOS 11.3 开始，WebView 将支持 ServiceWorker，但它也只是 PWA 的克隆，也就是那些用户已经在 Safari 或其他伪浏览器（例如 iOS 上的 Chrome 或 Firefox）上使用的 PWA。

因此，如果你正在渲染安装条幅或安装提示对话框，用以说明安装应用程序的好处，那么请检查它们是否位于 WebView 中，因为用户无法按照你所提示的步骤操作。可以考虑隐藏该信息或让用户在默认浏览器中打开 URL。这适用于 Android 和 iOS 上的 Facebook、iOS 上的 Chrome、iOS 上的 Firefox 以及其他应用程序。实时检查是否处于 WebView 中是一件麻烦事，不过可以借助辅助工具（https://www.npmjs.com/package/is-webview）来完成。

在 Android 设备和模拟器上执行测试

测试 ServiceWorker 和 Web App Manifest 需要使用 https，但 localhost 是个例外。虽然在桌面上进行测试没有什么问题，但我们也希望看到 PWA 是否能够在 Android 设备上正常运行。那该怎么办？从手机或 Android 模拟器访问开发服务器是不行的，因为连接不是基于 https 的，而且从 Android 角度来看，它也不是 localhost。

Chrome Developer Tools 为我们带来了解决方案。如果我们访问 chrome://inspect 并打开模拟器或通过 USB 连接进行调试的真实设备，我们就可以启用端口转发。然后，Android 设备上的 http://localhost 将被转发到宿主主机的 localhost 或其他主机上。Android 因此将通过非安全连接正确渲染 PWA。但请记住，尽管 WebAPK 将创建一个软件包并进行安装，但它可能无法在独立模式下运行。

发布到应用商店

PWA Builder 是微软提供的一款在线工具，用于为 Windows 10 和其他操作系统创建可兼容应用商店的 PWA 软件包。

虽然 PWA 在一开始并没有考虑到应用商店，但某些产品（包括 Twitter Lite 和 Play Store 中的 Google Maps Go）开始在应用商店中提供 PWA。如果这是你感兴趣的内容，为了在发布 PWA 时不再使用 Cordova 来包装它，那么你可以选择：

Microsoft Store：你可以使用由 pwabuilder.com 提供的官方工具为 Windows 10 创建 PWA。
Google Play Store：在撰写本文时，Canary Channel 上提供的 Trusted Web Activities 可让你创建一个只打开你的 PWA 的 Android 应用程序，并将其发布到应用商店中，这是一个与 WebAPK 类似的解决方案。你可以在这里（https://developers.google.com/web/updates/2017/10/using-twa）了解更多相关信息。
Apple App Store：目前没有官方的发布 PWA 的解决方案，不过从 iOS 11.3 开始，WKWebView 将支持 ServiceWorker，因此为 PWA 创建简单的包装并不困难。问题是，苹果是否会批准？苹果公司不欢迎只是带有包装器的网页。

原文链接

https://www.creativebloq.com/features/9-amazing-pwa-secrets