[每周一译]CSS和PWA：关于PWA的一些建议

近年来，由于移动设备的激增，我们的在线体验的有了一些重大转变。Web的发展使我们从网站的网页版，到桌面版和移动版，到根据屏幕大小自动调整页面的响应式网站，再到native mobile app，这些native mobile app可以将桌面体验做的像原生app一样，或者像响应式网站一样。

所有这一切迭代变化的最新成果，就是是渐进式网络应用程序——PWA（ progressive web app）。PWA是一个软件平台，旨在为网站或app用户提供Web和本机体验的最佳组合。

在关于CSS和PWA的这篇文章中，我们将讨论在创建PWA开发所需的CSS时可以使用的一些技术。

PWA是什么？

PWA主要有三个特征。如你所见，通过采用原生app用于解决问题的一些技术，去修复一些与原生app相关的问题，这就是PWA的优越所在。

1. 可靠：PWA可以像原生app一样可靠地加载（无论网络状态如何）。不像普通网页，在网络不好时体验甚差。

2. 快速：PWA可以不依赖地理，网络速度，负载或其他不受最终用户控制的因素而优雅地显示。

3. 引入入胜：PWA可以模仿原生应用程序的沉浸式全屏体验，而不需要应用程序商店，甚至支持推送通知等功能。

当然，PWA还有其他特性，不过我们目前先讨论上面提到的三个最重要的特性。

谷歌一直处于推动这类app的最前沿，同时PWA技术的应用已经得到了供应商和网络上许多其他公司的支持，这有助于使人们采用和接受PWA的概念。

出席 Cloudfest 2018的 Duda公司CEO Itai Sadan说道：

“PWA代表了网页设计和在线状态管理发展的下一个重大飞跃…他们充分利用原生app的优点，例如功能丰富的体验和离线访问的能力，并将它们合并到响应式网站。无需将任何内容下载到用户的设备上，这为他们创造了极好的Web体验。”

开发PWA需要什么？

开发PWA与开发标准Web app没有什么不同，并且可以升级现有的代码库。不过需要注意的是，虽然您可以在localhost上进行测试，但是对于部署上线，HTTPS是必需的。下面将讨论一个普通app怎样变成PWA。

1. 新建一个Manifest文件
PWA可以通过访问过的网站直接安装，这意味着不需要第三方应用商店来安装应用程序。

要达到这个目的，web app需要提供一个JSON文件：manifest.json，允许开发人员控制PWA的显示方式，需要启动的内容以及其他参数。

manifest.json的可配置项如下。我们可以看到，这些属性设置了许多外观设置，这些设置将在将安装app的设备的主屏幕上使用。

PWA的样式从manifest.json开始，但这部分没有涉及真正的CSS。它只是直接属性，定义app的名称，图标，主题颜色等。

2. 使用Service Worker
Service Worker本质上是一种特定类型的Web Worker，作为独立于浏览器运行的JavaScript文件执行 —— 这样它就能够拦截网络请求，缓存文件或从缓存中检索资源，并在必要时进行消息推送。

Service Worker使PWA真正脱机（译者：因为可以离线缓存文件嘛）。

3. 缓存静态资源
第一次注册Service worker时，会触发安装事件。这是安装（可以理解为缓存）所有站点资源的地方，包括应用程序所需的任何CSS，JS和其他媒体和资源文件：

self.addEventListener('install', function(e) {
e.waitUntil(
  caches.open('airhorner').then(function(cache)
  {
    return cache.addAll([
    '/',
    '/index.html',
    '/index.html?homescreen=1',
    '/?homescreen=1',
    '/styles/main.css',
    '/scripts/main.min.js',
    '/sounds/airhorn.mp3'
    ]);
  })
);
});

只要满足基本要求，开发PWA与开发Web应用程序没有太大区别。

这里开始涉及CSS，定义的文件将用于PWA设置样式。

CSS和PWA：一些考虑

在考虑CSS和PWA时，我们需要记住下面几点。这些都是在开发PWA之前需要决定下来的。

应用程序应该遵循特定于平台的UI吗？
如果我们选择一个支持另一个平台的平台（假设Android支持iOS），我们就有可能处于“忽略部分用户”的劣势。

如果这样的话，其实我们已经和这个平台坐在同一条船上——一荣俱荣，一损俱损。平台的设计很可能随着它们版本迭代发生变化。

我的意见是应该尽可能避免与平台供应商的联系（译者：也就是建议进行平台无关的设计）。

平台无关设计
基于我们之前的考虑，理想的选择是大多数平台中立的设计。

如果选择了这个方法，我们应该确保结果不会在本机平台公开的UI中过多地偏离样式和功能。

需要使用标准行为并执行广泛的用户测试，以确保在特定平台上没有引入UX问题​​。例如，强烈建议避免使用自定义编写的组件并选择标准HTML5控件，因为浏览器会针对UI和最佳体验进行优化。

设备性能
虽然现在PWA的主要目光集中在移动设备上，但在未来PWA也有可能成为包括台式机在内的所有平台的整体解决方案。截至2018年5月，Chrome支持台式机上的PWA，其他供应商也将很快支持这一点。

您的CSS和样式注意事项需要考虑所有这些并从一开始就为此设计。

使用PWA的好处在于，您可以结合使用CSS和Service Worker实现来根据可用资源增强或限制功能。

优雅降级和渐进增强
一般来说，CSS可以优雅降级。任何不受支持的属性都会被忽略。

话虽如此，还需要确保关键元素具有正确的后备，或者不缺少任何基本样式。

优雅降级的另一种方法是渐进增强。这是我们在使用PWA时应始终牢记的概念。例如，我们应该在尝试使用它之前首先测试Service Worker API的支持，使用类似于下面的代码：

if (!('serviceWorker' in navigator)) {  
  console.log('Service Worker not supported');
  return;
}

此逻辑的变体可用于处理不同的用例，例如特定平台的样式，以及我们稍后将提到的其他用例。

一些建议

虽然PWA在用户体验方面具有许多优势，但在处理不同技术的细微差别时，还是需要技术人员多加注意。

作为一名理解用户需求与开发资源有限的可用性之间的微妙平衡的开发人员/产品经理，我总是建议找到一个涵盖尽可能多的用例的中间地带，避免在开发和测试团队上花费太多开销。

诸如Material Design之类的设计标准以及诸如Bootstrap之类的框架的出现有助于建立与平台无关的设计。

所使用的实际框架通常能够解决具有不同功能的设备，而设计学院提供跨平台的同类外观，允许开发人员专注于应用程序的特性和功能。

另一方面，如果您更倾向于整个外观，您将能够使用您的service worker来做到这一点。

JavaScript提供了许多功能，可以帮助您根据可用的平台和功能做出决策。因此，您可以使用代码测试平台，然后相应地应用样式表。

例如，navigator.platform方法返回运行应用程序的平台，而navigator.userAgent返回正在使用的浏览器。

在检测浏览器时，浏览器代理(userAgent)是不可靠的，因此下面的代码更多地是对概念的演示，而不是应该在实时环境中使用的代码。

navigator.platform是一种更可靠的方法，但是可用的平台数量使得在我们的示例中使用起来很麻烦。

/**
* Determine the mobile operating system.
* This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
*
* @returns {String}
*/

function getMobileOperatingSystem()
{
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  // Windows Phone must come first because its UA also contains "Android"
  if (/windows phone/i.test(userAgent))
  {
    return  "Windows Phone";
  }

  if (/android/i.test(userAgent))
  {
    return  "Android";
  }

  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream)
  {
    return  "iOS";
  }

  return  "unknown";
  // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android
}

使用getMobileOperatingSystem()方法的返回值，您可以相应地注册特定的CSS文件。

从上面的代码中，我们可以看到这样的逻辑可能变得非常复杂且难以维护，因此我只建议在不适合平台的设计中使用它。

另一种选择是使用更简单的颜色方案，只有CSS应用于匹配底层操作系统的主要样式，尽管在用户为其设备设置外观的情况下，这仍然可能出错。

PWA框架

在学习如何开发PWA时，手动创建所有内容非常棒：它是学习构建PWA的所有基础概念的绝佳方式。

一旦熟悉了所有重要方面，您就可以开始使用一些工具来帮助您，提高开发效率。

与大多数开发方案一样，框架可用于更快，更高效地开发PWA。

所有这些框架都使用特定的CSS技术来确保开发过程可维护，可扩展，并满足开发人员和最终用户的需求。

通过使用此类框架，您可以确保您的PWA在大多数设备和平台上运行良好，因为框架通常具有跨平台功能，尽管它们可能提供有限的向后兼容性。这是您在决定开发PWA时将需要采取的另一项决策。相对于从头开始编写所有内容，通过使用框架，您将放弃一些控制权。

下面我们将建议一些可用于帮助开发PWA的框架/工具。

但是请注意：在性能方面，框架会增加很多开销。

我们建议您在开始时仅使用这些框架，最终选择不使用这些框架，并使用与平台无关的设计进行简约的精简样式表。
1 Create React App

通过使用诸如Create React App之类的库，React具有允许开发PWA的所有组件。

这是使用此库创建React PWA的一个很好的示例:https://www.sitepoint.com/progressive-web-apps-a-crash-course/

2 Angular

鉴于Angular是Google的产品以及我们如何看待公司推动PWA，因此Angular对PWA的全面支持并不奇怪。

如果您习惯使用Angular，可以考虑使用它作为您选择的框架。

Angular 2+支持使用以下命令在框架中本地实现PWA功能（例如service workers和manifest文件）：

ng add @angular/pwa --project project_name

这是一篇很棒的文章，它指导您使用Angular创建PWA:https://blog.angulartraining.com/progressive-web-apps-for-angular-6-and-beyond-f7e4b9a2f9fa

3 Ionic

Ionic是PWA的另一个框架。这个框架：

1. 利用Angular，可以使用Web技术创建本机应用程序
2. 使用Cordova在手机等设备上运行应用程序
3. 有一个内置的`service worker`和`manifest`支持。

这是一个高级框架，包括许多面向开发人员和面向团队的功能，如快速原型设计，以加快开发速度。

PWA和性能

PWA的基础之一仍然是快速且引人入胜的用户体验。

因此，在考虑CSS时，需要确保尽可能保持精简和简约。

这是框架开始受到影响的方面之一。它们会添加您未使用的额外CSS资源，这会降低PWA的性能。

您可能需要记住的一些注意事项：

1.在您的服务器上使用HTTP / 2
2. 使用`rel = preload`这样的提示来允许早期获取关键CSS和其他资源
3. 使用NetworkInformationAPI和缓存来访问缓存的资源而不是重新下载它们
4. 直接将关键CSS内嵌到HTML文档中以优化性能
5. 保持资源尽可能精简
6. 缩小所有CSS资源并实施其他优化，例如压缩资源，优化图像以及使用优化的图像和视频格式。

其他详细信息可以参考：Google guidelines on performance

谷歌灯塔(Google Lighthouse)

说到性能，谷歌灯塔是一个性能监控工具，专门围绕提高网站和PWA的性能。

曾经是Chrome插件的Lighthouse今天内置了谷歌开发者工具。它可用于针对PWA运行测试。该测试生成一份报告，其中包含大量详细信息，可帮助您将开发保持在PWA的性能参数范围内。

结语

同时使用CSS和PWA，与使用CSS开发Web app或网站（特别是在性能和​​响应性方面）有一些区别。但是可以适当地采用可用于Web开发的大多数技术来开发PWA。无论您是使用框架还是从头开始构建所有内容，都要权衡利弊，做出明智的决定，然后坚持下去。

原文：2018.08.22|CSS and PWAs: Some Tips for Building Progressive Web Apps——David Attard