web pwa_CSS和PWA：构建渐进式Web应用程序的一些技巧

web pwa

In recent years we’ve seen a number of major shifts in the online experience, mostly coming from the proliferation of mobile devices. The evolution of the Web has taken us from single versions of a website, to desktop versus mobile versions, to responsive sites that adapt according to screen size, then to native mobile apps, which either recreate the desktop experience as a native app, or act as a gateway to the responsive version.

近年来，我们看到了在线体验方面的许多重大变化，其中大部分来自移动设备的激增。 Web的发展使我们从单一版本的网站迁移到桌面版和移动版，再到根据屏幕大小进行适应的响应型网站，再到本地移动应用程序，后者将桌面体验重新创建为本地应用程序，或者采取行动作为响应式版本的网关。

The latest iteration of all of this is the progressive web app (PWA). A PWA is a software platform that aims to combine the best of both the Web and the native experience for website/app users.

所有这些的最新迭代是渐进式Web应用程序 (PWA)。 PWA是一个软件平台，旨在将网站和应用程序用户的最佳网络和本地体验相结合。

In this article on CSS and PWAs, we’re going to discuss a number of techniques that can be used when creating the CSS required for the development of PWAs.

在有关CSS和PWA的本文中，我们将讨论创建创建PWA开发所需CSS时可以使用的许多技术。

什么是PWA？ (What are PWAs?)

There are three main features of a PWA. As you’ll see, what makes a web app progressive is the “fixing” of problems typically associated with web apps, by adopting some of the techniques used by native apps to resolve these issues.

PWA具有三个主要功能。 正如您将看到的，使Web应用程序逐步发展的原因是通过采用本机应用程序用来解决这些问题的技术来“解决”通常与Web应用程序相关的问题。

1. Reliable. A PWA should reliably load like a native app (no matter the state of the network). This is contrary to a web page, which typically does not load if the device is disconnected from the network.

   可靠 。 PWA应该像本机应用程序一样可靠地加载(无论网络状态如何)。 这与网页相反，网页通常在设备与网络断开连接时不会加载。

2. Fast. The performance of a PWA should be independent of such things as geography, network speed, load or other factors that are beyond the control of the end user.

   快 。 PWA的性能应独立于地理位置，网络速度，负载或最终用户无法控制的其他因素。

3. Engaging. PWAs should mimic the native app’s immersive, full-screen experience without requiring the need of an app store, even supporting such features as push notifications.

   参与 。 PWA应该模仿本机应用程序的沉浸式全屏体验，而不需要应用程序商店，甚至不支持推送通知等功能。

There are other features PWA features, but for now, we’ll keep to the most important ones described above.

PWA功能还有其他功能 ，但是现在，我们将继续介绍上述最重要的功能。

Google has been at the forefront of pushing these kind of apps, but the adoption of PWAs has been picking up with vendors and plenty of other companies on the Web helping the adoption and embracing the concept of PWAs.

Google在推动这类应用程序方面一直处于最前沿，但是PWA的采用一直在与供应商和Web上的许多其他公司接轨，这有助于PWA的采用和接受。

The following are comments from Itai Sadan, CEO of Duda, who was present at Cloudfest 2018:

以下是Duda首席执行官Itai Sadan的评论，他出席了Cloudfest 2018：

Progressive web apps represent the next great leap in the evolution of web design and online presence management … they take the best aspects of native apps, such as a feature-rich experience and the ability to be accessed offline, and incorporate them into responsive websites. This creates an incredible web experience for users without the need to download anything onto their device.

渐进式Web应用程序代表着Web设计和在线状态管理发展的下一个重大飞跃……它们利用本机应用程序的最佳方面，例如功能丰富的体验和可脱机访问的功能，并将它们整合到响应式网站中。 这为用户创造了令人难以置信的网络体验，而无需将任何内容下载到他们的设备上。

Anyone providing web design services to clients is going to want to offer PWAs because over time, just like with mobile and responsive web design, it will become the industry standard.

任何为客户提供网页设计服务的人都会希望提供PWA，因为随着时间的流逝，就像移动和响应式网页设计一样，它将成为行业标准。

开发PWA需要什么？ (What is Required for Developing PWAs?)

Developing a PWA is not different from developing a standard web application, and it may be possible to upgrade your existing codebase. Note that for deployment, HTTPS is a requirement, although you can do testing on the localhost. The requirements for an app to become a PWA are discussed below.

开发PWA与开发标准Web应用程序没有什么不同，并且可以升级现有代码库。 请注意，尽管可以在本地主机上进行测试，但对于部署，HTTPS是必需的。 下面讨论了应用成为PWA的要求。

1.创建清单文件 (1. Create a Manifest File)

PWAs must be available to install directly via a website which has been visited, meaning there’s no need for a third-party app store to get the app installed.

必须可以通过已访问的网站直接安装PWA，这意味着无需第三方应用商店即可安装该应用。

To enable this, the app needs to provide a manifest.json file — a JSON file that allows the developer to control how the PWA appears, what needs to be launched and other parameters.

为此，应用程序需要提供一个manifest.json文件 -一个JSON文件，开发人员可以通过它控制PWA的显示方式，需要启动的内容以及其他参数。

A typical manifest file appears below. As we can see, the properties are setting a number of look-and-feel settings that will be used on the home screen of the device where the app will be installed.

典型的清单文件出现在下面。 如我们所见，这些属性正在设置许多外观设置，这些设置将在将安装该应用程序的设备的主屏幕上使用。

The styling of the PWA starts from the manifest file, but there’s no real CSS involved in this part. It’s just straight up properties, which define the application’s name, icons, primary colors, etc.

PWA的样式从清单文件开始，但是这部分没有涉及到真正CSS。 它只是属性 ，它们定义应用程序的名称，图标，原色等。

2.使用服务人员 (2. Using a Service Worker)

A service worker is essentially a specific type of web worker, implemented as a JavaScript file that runs independently of the browser — such that it’s able to intercept network requests, caching or retrieving resources from the cache, and delivering push messages as necessary.

服务工作者本质上是一种特定类型的网络工作者，实现为独立于浏览器运行JavaScript文件-这样，它便能够拦截网络请求，从缓存中缓存或检索资源，并根据需要传递推送消息。

The service worker is what makes the PWA truly offline capable.

服务工作者使PWA真正具有脱机能力。

3.安装站点资产，包括CSS (3. Install the Site Assets, Including CSS)

The first time the Service worker is registered, an install event is triggered. This is where all of the site assets are installed, including any CSS, JS and other media and resource files required by the application:

首次注册服务工作者时，将触发安装事件。 这是安装所有站点资产的位置，包括应用程序所需的所有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'
    ]);
  })
);
});

Developing PWAs is not very different from developing web apps, as long as the fundamental requirements have been met.

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

This is where the CSS starts to get involved, with the files defined that will be used to style the progressive web app.

这是CSS开始涉足的地方，其中定义了用于样式化渐进式Web应用程序的文件。

CSS和PWA：一些注意事项 (CSS and PWAs: Some Considerations)

When considering CSS and PWAs, there are things we need to keep in mind. All of these are decisions that need to be taken before the development of a progressive web app starts.

在考虑CSS和PWA时，我们需要牢记一些事情。 所有这些都是在开始开发渐进式Web应用程序之前需要做出的决定。

应用程序应遵循平台特定的UI吗？ (Should the App Follow Platform-specific UIs?)

If we opt for one platform in favor of another (let’s say Android in favor of iOS) we risk alienating or putting at a disadvantage that part of the audience we didn’t consider.

如果我们选择一个平台来支持另一个平台(比如说Android来支持iOS)，那么我们就有可能疏远或处于部分我们未考虑的受众的不利地位。

We’re also tying our fortunes to that platform — whether good fortunes or bad ones. It’s also quite likely that platform designs change as they evolve between different versions.

我们还将自己的命运与该平台联系在一起-无论是好运还是坏运。 平台设计也很可能在不同版本之间演变时发生变化。

My opinion is that vendor tie-in should be avoided as much as possible.

我的观点是，应尽可能避免与供应商搭配。

与平台无关的设计 (Platform-agnostic Design)

Based on our previous consideration, the ideal is to opt for a mostly platform-neutral design.

基于我们先前的考虑，理想的选择是选择与平台无关的设计。

If this path is chosen, we should ensure that the result doesn’t stray too much in form and function from the UI that the native platform exposes.

如果选择了此路径，我们应该确保结果不会在本机平台公开的UI的形式和功能上偏离太多。

One needs to use standard behaviors and perform-extensive user testing to ensure no UX problems have been introduced on specific platforms. As an example, it’s highly recommended to avoid custom-written components and opt for standard HTML5 controls, which the browser can optimize for the UI and best experience.

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

设备功能 (Device Capabilities)

The way forward for PWAs — even if at this point they’re mostly focused on devices — is to become a holistic solution for all platforms, including desktops. As of May 2018, Chrome supports PWAs on desktops, and other vendors will soon be supporting this too.

PWA的前进之路(即使此时它们主要集中在设备上)将成为所有平台(包括台式机)的整体解决方案。 截至2018年5月， Chrome浏览器在台式机上支持PWA ，其他供应商也将很快对此提供支持。

Your CSS and styling considerations need to factor all of this and design for this from the get-go.

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

The beauty of working with a PWA, though, is that you can use a combination of CSS and the Service Worker implementation to enhance or limit the functionality based on the resources available.

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

优雅降级和逐步增强 (Graceful Degradation and Progressive Enhancement)

CSS in general is able to fall back gracefully; any unsupported properties are simply ignored.

一般而言，CSS可以正常使用。 任何不受支持的属性都将被忽略。

Having said that, one also needs to make sure that critical elements have the right fallbacks, or are not missing any essential styling.

话虽这么说，还需要确保关键元素具有正确的后备或没有遗漏任何必要的样式。

An alternative approach to graceful degradation is progressive enhancement. This is a concept that we should always keep in mind when working on our PWA. For example, we should test first for the support of a Service Worker API before we attempt to use it, using code similar to this:

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

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

Variations of this logic can be used to handle different use cases, such as the styling for specific platforms, and others that we’ll mention later on.

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

一般建议 (General Suggestions)

Although PWAs have a number of advantages when it comes to the user experience, they shift a lot of responsibility back to the developer when it comes to dealing with the nuances of different technology.

尽管PWA在用户体验方面具有许多优势，但在处理不同技术的细微差别时，它们会将很多责任转移给了开发人员。

Speaking as a developer/Product Manager, who understands the delicate balance between user needs and the limited availability of development resources, I would always recommend finding a middle ground that covers as many use cases as possible, without putting too much overhead on the development and testing teams.

作为开发人员/产品经理，他了解用户需求和有限的开发资源之间的微妙平衡，我总是建议您找到一个涵盖尽可能多的用例的中间立场，而又不会在开发和开发上增加过多的开销。测试团队。

The emergence of design standards such as Material Design, and frameworks such as Bootstrap, helps to establish platform-agnostic designs.

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

The actual framework used is typically able to address devices of different capabilities, while the design school provides a homogeneous look and feel across platforms, allowing the developer to focus on the App’s features and functions.

实际使用的框架通常能够满足不同功能的设备的需求，而设计学院则在各个平台之间提供统一的外观和感觉，从而使开发人员可以专注于App的功能。

If, on the other hand, you’d rather go down the whole separate look and feel, you’ll be able to use your service worker to be able to do this.

另一方面，如果您希望保留整个单独的外观，则可以使用服务人员来执行此操作。

JavaScript provides a number of functions that can help to take decisions based on the platform and capabilities available. You can, therefore, use your code to test for the platform and then apply a stylesheet accordingly.

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

For example, the navigator.platform method returns the platform on which the app is running, while the navigator.userAgent returns the browser being used.

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

The browser agent is unreliable when it comes to detecting the browser, so the code below is more of a demonstration of a concept rather than code that should be used in a live environment.

当涉及到检测浏览器时，浏览器代理是不可靠的，因此下面的代码更多地是概念的演示，而不是实际环境中应使用的代码。

The navigator.platform is a more reliable method, but the sheer number of platforms available makes it cumbersome to use in our example.

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
}

Using the return value of getMobileOperatingSystem() above, you can then register a specific CSS file accordingly.

使用上面的getMobileOperatingSystem()的返回值，然后可以相应地注册特定CSS文件。

From the code above, we can see that such logic can get very convoluted and difficult to maintain, so I would only recommend using it in situations where a platform-agnostic design is not suitable.

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

Another option is to use a simpler color scheme, only CSS applied to the primary styles that matche the underlying OS, though this could still “break” in the case where users have skinned their device.

另一个选择是使用更简单的配色方案，仅将CSS应用于与底层OS相匹配的主要样式，尽管在用户蒙皮后其设备仍然可以“破坏”。

PWA框架 (PWA Frameworks)

When learning how to develop a PWA, it’s great to create everything manually: it’s an excellent way of learning all the fundamentals concepts of building progressive web apps.

学习如何开发PWA时，最好手动创建所有内容：这是学习构建渐进式Web应用程序的所有基本概念的绝佳方法。

Once you’ve become familiar with all the important aspects, you might then start using a few tools to help you out, increasing your development efficiency.

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

As with most development scenarios, frameworks are available to make development of PWAs faster and more efficient.

与大多数开发方案一样，可以使用框架来更快，更有效地开发PWA。

Each of these frameworks uses specific CSS techniques to ensure that the development process is maintainable, scalable and achieves the needs of both the developer and the end user.

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

By using such frameworks, you can ensure that your PWA works nicely on most devices and platforms, because the frameworks usually have cross-platform capabilities, although they may offer limited backward compatibility. This is another of those decisions you’ll need to take when deciding what you’ll be using to develop your progressive web app. By using frameworks, you cede some of the control you’d have if writing everything from scratch.

通过使用这样的框架，可以确保PWA在大多数设备和平台上都能很好地工作，因为这些框架通常具有跨平台功能，尽管它们可能提供有限的向后兼容性。 这是决定开发渐进式Web应用程序将使用的其他决定中的另一个。 通过使用框架，您可以放弃从头开始编写所有内容所拥有的某些控件。

Below we’ll suggest a number of frameworks/tools that can be used to aid development of PWAs.

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

A word of advice, though: frameworks add a lot of overhead when it comes to performance.

不过要提一个建议：框架在性能方面会增加很多开销。

We recommend that you only use these resources when starting out, eventually opting out of using them and going for minimalistic, lean stylesheets, using a platform-agnostic design.

我们建议您仅在开始使用这些资源，最终选择不使用它们，并使用与平台无关的设计来选择简约，精简的样式表。

1. 创建React应用 (1. Create React App)

React has all of the components in place to allow the development of a PWA, by using such libraries as the Create React App.

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

This is a great example of creating a React PWA with this library.

这是使用此库创建React PWA的一个很好的例子 。

2. 角度 (2. Angular)

Given that Angular is a product of Google and how we’ve seen the company pushing for PWAs, it’s no surprise that Angular has full support for PWAs.

鉴于Angular是Google的产品，以及我们如何看待该公司推动PWA的发展，因此Angular全面支持PWA也就不足为奇了。

If you’re used to working with Angular, you could consider using this as your framework of choice.

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

Angular 2+ supports the implementation of PWA features (such as service workers and manifest files) natively through the framework using the following commands:

Angular 2+通过使用以下命令的框架本地支持PWA功能(例如服务工作者和清单文件)的实现：

ng add @angular/pwa --project project_name

This is a great article which guides you through creating a PWA with Angular.

这是一篇很棒的文章，它会指导您通过Angular创建PWA 。

离子性 (Ionic)

Ionic is another framework for PWAs. The framework

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

• leverages Angular to enable the creation of native apps using web technologies
  利用Angular利用Web技术创建本机应用程序
• uses Cordova to run the app on devices such as phones
  使用Cordova在手机等设备上运行该应用程序
• has a built-in service worker and manifest support.
  具有内置的服务程序和清单支持。

This is a premium framework that includes a number of developer-oriented and team-oriented features such as rapid prototyping, to make development faster.

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

PWA和性能 (PWAs and Performance)

One of the fundamentals of progressive web apps remains that of a fast and engaging user experience.

渐进式Web应用程序的基本原理之一仍然是快速且引人入胜的用户体验。

For this reason, when considering the CSS, one needs to ensure to keep things as lean and minimalistic as possible.

出于这个原因，在考虑CSS时，需要确保尽可能保持简洁和简约。

This is one of the aspects where frameworks start to suffer. They add extra CSS resources that you’re not using, which can reduce performance in PWAs.

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

A number of considerations you might want to keep in mind:

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

• use HTTP/2 on your server
  在服务器上使用HTTP / 2

• use such hints as rel=preload to allow early fetching of critical CSS and other resources

  使用诸如rel=preload类的提示以允许及早获取关键CSS和其他资源

• use the NetworkInformationAPI and a caching implementation to access cached resources rather than downloading them

  使用NetworkInformationAPI和缓存实现访问缓存的资源，而不是下载它们

• inline critical CSS directly into the HTML document to optimize performance — which typically should be done for anything above the fold
  直接将关键CSS内联到HTML文档中以优化性能-通常应该对首屏进行任何处理
• keep resources as lean and as small as possible
  保持资源尽量精简
• minify all of your CSS resources and implement other optimizations such as compressing resources, optimizing images and use optimized image and video formats.
  减少所有CSS资源并实施其他优化，例如压缩资源，优化图像以及使用优化的图像和视频格式。

The Google guidelines on performance have other details you should keep in mind.

Google的性能指南还应牢记其他细节。

Google Lighthouse (Google Lighthouse)

Speaking of performance, the Google Lighthouse is a performance monitoring tool centered specifically around increasing performance, both of websites and progressive web apps.

说到性能，Google Lighthouse是一个性能监控工具，专门针对提高网站和渐进式Web应用程序的性能。

Lighthouse, which used to be a plugin for Chrome, is today built-in with the Chrome Developer tools. It can be used to run tests against the progressive web app. The test generates a report which has plenty of detail to help you keep your development within the performance parameters of a PWA.

Lighthouse曾经是Chrome的插件，如今已内置在Chrome Developer工具中。 它可用于针对渐进式Web应用程序运行测试。 测试会生成一份报告，其中包含大量详细信息，可帮助您将开发保持在PWA的性能参数之内。

结语 (Wrapping Up)

Using CSS and PWAs together has a few differences from using CSS to develop your web application or website (particularly in terms of performance and responsiveness). However, most techniques that can be used with web development can be suitably adopted for development of progressive web apps. Whether you use frameworks or build everything from scratch, weigh the benefits against the disadvantages, take an informed decision and then stick with it.

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

翻译自: https://www.sitepoint.com/pwa-css-considerations/

web pwa