web pwa_非PWA人群的渐进式Web应用程序说明

web pwa

The world of applications was classified into two categories not too long ago. You were either creating an application for Android devices or for iOS. Enter PWAs, or elongated, Progressive Web Applications. You have probably been hearing all about them for the past couple of years, but besides a nice acronym, you have no idea what a PWA is. As their popularity increases, it might be a good idea to get to know what all the fuss is about.

不久前，应用程序世界被分为两类。 您正在为Android设备或iOS创建应用程序。 输入的PWA，或伸长，P逐渐做到其中W EB 甲 pplications。 在过去的几年中，您可能已经听说了所有有关它们的信息，但是除了一个很好的缩写之外，您还不知道PWA是什么。 随着它们的流行度增加，了解所有这些大惊小怪的想法可能是一个好主意。

In this article, I’ll take you on a tour of what a PWA is, what components it is built from, and show you how you can make one on your own.

在本文中，我将带您了解PWA是什么，PWA的基础组件，并向您展示如何自己制作PWA。

基础 (The Basics)

A progressive web application is a website turned into an application. What this means is, that instead of having to code either in Java or Objective-C (or more recent mobile coding languages), you can write the code for the application, like you would for a website. You have your html files, your stylesheets, and your scripts.

渐进式Web应用程序是将网站转变为应用程序的网站。 这意味着，不必像用Java或Objective-C(或更近期的移动编码语言)那样编写代码，就可以像为网站那样为应用程序编写代码。 您拥有html文件，样式表和脚本。

Why would you build a PWA instead of a native application? For starters, imagine that once you release a PWA, you can change it constantly without having to republish your application. Since all the code is hosted on a server and not part of the APK/IPA, any change you make happens in real time.

为什么要构建PWA而不是本机应用程序？ 首先，请想象一下，一旦发布PWA，就可以不断更改它而不必重新发布应用程序。 由于所有代码都托管在服务器上，而不是APK / IPA的一部分，因此您所做的任何更改都是实时发生的。

If you have ever used an application that relies on a network connection, you are familiar with the frustration of not being able to do anything. With PWAs, you have the ability to offer an offline experience to your users in case of network issues.

如果您曾经使用过依赖于网络连接的应用程序，那么您将对无法执行任何操作感到沮丧。 使用PWA，您可以在网络出现问题时向用户提供脱机体验。

And to add the cherry on top, there is an ability to prompt the user to add your PWA to their home screen. Something that native applications do not possess.

并在顶部添加樱桃，可以提示用户将PWA添加到其主屏幕。 本机应用程序不具备的功能。

组件 (Components)

There is a standard regarding a PWA, and you must adhere to it if you want to publish one. Each PWA is built from the following components:

有一个有关PWA的标准，如果要发布PWA，则必须遵守该标准。 每个PWA由以下组件构建：

• A web app manifest
  网络应用清单
• A service worker
  服务人员
• Install experience
  安装经验
• HTTPS
  HTTPS
• Creating an APK
  创建一个APK
• Lighthouse audit
  灯塔审核

清单 (The Manifest)

This is purely a configuration file (.JSON), enabling you to change various settings of your PWA and how it will appear to the user. Below is an example of one:

这纯粹是一个配置文件( .JSON )，使您可以更改PWA的各种设置以及它对用户的显示方式。 下面是一个示例：

You must set either a name/short name key. When setting both, short name will be used on the home screen and the launcher. The name value will be used in the Add to Home Screen experience (or, application install prompt).

您必须设置一个名称/简称键。 同时设置两者时，将在主屏幕和启动器上使用短名称。 名称值将在“添加到主屏幕”体验(或应用程序安装提示)中使用。

Display can have four different values:

显示可以有四个不同的值：

• fullscreen - this allows your application to take up the whole screen when it is opened

  全屏 -允许您的应用在打开时占据整个屏幕

• standalone - your application looks like a native application, hiding browser elements

  独立 -您的应用程序看起来像本机应用程序，隐藏了浏览器元素

• minimal-ui - provides some browsing controls (only supported for Chrome mobile)

  minimal-ui-提供一些浏览控件(仅Chrome移动版支持)

• browser - like the name says your application’s look will be identical to a browsing experience

  浏览器 -顾名思义，您的应用程序的外观将与浏览体验相同

You can also set the orientation of your application and the scope of the pages considered to be within your application.

您还可以设置应用程序的方向以及应用程序内的页面范围 。

Don’t forget to add the manifest to your main html file by putting the following meta tag inside of your head tag:

不要忘记通过将以下meta标签放在head标签内来将清单添加到主html文件中：

服务人员 (The Service Worker)

A service worker is a component running in the background of your website on the browser. It has a wide set of functionalities including, push notifications, caching assets and providing them for an offline experience and the ability to defer actions until the user has a stable connection to the internet. A service worker can be a whole Medium article on its own, so I won’t delve into the inner details of how it works. But, I will supply a vanilla example of one for you to use in your PWA.

服务工作者是在浏览器中的网站后台运行的组件。 它具有广泛的功能，包括推送通知，缓存资产并为它们提供脱机体验以及将操作推迟到用户与Internet的稳定连接之前的能力。 服务工作者可以独自撰写一篇完整的中型文章，因此我不会深入研究其工作原理的内部细节 。 但是，我将提供一个很好的例子供您在PWA中使用。

It is customary to save the code related to the service worker in a file called sw.js.

通常将与服务工作者相关的代码保存在名为sw.js的文件中。

✋ The location of the service worker is important since it can only access files that are in the same directory or subdirectory as itself.

the服务工作者的位置很重要，因为它只能访问与其本身位于同一目录或子目录中的文件。

A service worker has a lifecycle that can be summed up to the following phases:

服务人员的生命周期可以归纳为以下几个阶段：

• Registration
  注册
• Installation/Activation
  安装/激活
• Responding to various events
  应对各种事件

安装经验 (Install Experience)

One of the unique features of a PWA is its install experience. What this translates to is prompting the user to install your application. To allow us to present this ability to the user, we will need to listen in on an event called beforeinstallprompt. Below is a code sample demonstrating the flow from presenting the user with the option to add the application to activating logic based on their choice.

PWA的独特功能之一就是其安装体验。 这意味着正在提示用户安装您的应用程序。 为了使我们能够向用户展示此功能，我们需要侦听一个名为beforeinstallprompt的事件。 以下是一个代码示例，演示了向用户展示将应用程序添加到基于他们的选择激活逻辑的选项的流程。

HTTPS (HTTPS)

Not too long ago, websites could still use the all too common http protocol. Due to recent changes in security and in Chrome, all websites that do not operate under the https protocol will be marked as not secured. Even if your website does not handle user data or sensitive communication, it is still good practice to switch over to https.

不久之前，网站仍然可以使用所有通用的http协议。 由于安全性和Chrome的最新更改，所有未在https协议下运行的网站都将标记为不安全。 即使您的网站不处理用户数据或敏感通信，仍然是切换到https的良好做法。

And like I mentioned earlier, if you want to be able to release a PWA, it has to use the https protocol. If you don’t want to get into the hassle of acquiring a domain, finding a proper host for it and then enabling SSL, you can go for the easy option of Github. If you have an account, you can open a repository and set up a GitHub Page. This process is fairly simple and straightforward and the bonus is getting the HTTPS built in as part of Github.

就像我之前提到的，如果要发布PWA，则必须使用https协议。 如果您不想麻烦地去获取域名，为它找到合适的主机然后再启用SSL，则可以选择Github的简单选择。 如果您有帐户，则可以打开存储库并设置GitHub Page 。 这个过程非常简单明了，其好处是可以将HTTPS内置在Github中。

创建一个APK (Creating An APK)

In order for our PWA to be available inside the Google Play Store, we need to create an APK. You can use the popular tool, PWA2APK, which will do the hard work for you. But if you prefer to learn how to do it yourself, keep reading.

为了使我们的PWA在Google Play商店中可用，我们需要创建一个APK。 您可以使用流行的工具PWA2APK ，它将为您完成辛苦的工作。 但是，如果您喜欢自己学习如何做，请继续阅读。

Google has introduced a new way to integrate your PWA into the Play store using what is called a Trusted Web Activity, or TWA. With just a few simple steps you will learn how to create a TWA, which you can then upload to the Play store.

谷歌已经推出到您的PWA集成到使用所谓生锈其中W EB 一个 ctivity，或TWA一件T Play商店的新途径。 仅需几个简单的步骤，您将学习如何创建TWA，然后将其上传到Play商店。

1. Open Android Studio and create an empty activity
   打开Android Studio并创建一个空活动
2. Go to the project’s build.gradle file and add the jitpack repository
   转到项目的build.gradle文件并添加jitpack存储库

3. Go to the module level build.gradle file and add the following lines to enable Java8 compatibility

3.转到模块级别的 build.gradle文件并添加以下行以启用Java8兼容性

4. Add the TWA support library as a dependency

4.添加TWA支持库作为依赖项

5. Add the activity XML inside your AndroidManifest file between the application tags

5.在应用程序标签之间的AndroidManifest文件内添加活动XML

6. We need to create an association from the application to the website using a digital assets link. Paste the following inside your strings.xml file

6.我们需要使用数字资产链接创建从应用程序到网站的关联。 将以下内容粘贴到您的strings.xml文件中

7. Add the next meta tag as a child to your application tag inside the AndroidManifest.xml

7.将下一个meta标签作为子元素添加到AndroidManifest.xml中的应用程序标签中

8. Create an upload key and keystore

8. 创建一个上传密钥和密钥库

9. Use the following command to extract the SHA-256

9.使用以下命令提取SHA-256

10. Go to the assets link generator, supply the SHA-256 fingerprint, the package of your application and the web site's domain

10.转到资产链接生成器 ，提供SHA-256指纹，您的应用程序包和网站的域

11. Place the result in a file named assetlinks.json under the location /.well-known in your website’s directory. Chrome will look for this destination specifically.

11.将结果放置在网站目录中/.well-known位置下的一个名为assetlinks.json的文件中。 Chrome会专门寻找该目的地。

12. Generate a signed APK and upload to the Play store

12. 生成签名的APK，然后上传到Play商店

灯塔 (Lighthouse)

By now, I am sure you have already lost track of what is required from your PWA so it will be valid for publishing. There are so many things to take into consideration, that it is easy to lose track of what the requirements are.

到现在为止，我确信您已经失去了对PWA的要求的跟踪，因此它对于发布是有效的。 有太多要考虑的事情，很容易就无法了解需求。

Luckily for us, Google has created Lighthouse. It can be found in the Chrome Developer Tools (from Chrome version 60). It can be accessed easily by right-clicking inside the browser and selecting inspect. When the new pane opens, you will see an Audits tab at the far right corner.

幸运的是，Google创建了Lighthouse 。 可以在Chrome开发者工具(Chrome版本60)中找到。 通过在浏览器内部右键单击并选择检查，可以轻松访问它。 当新窗格打开时，您将在右上角看到“ 审核”选项卡。

Leaving the settings in this tab as they are, you can now run an audit by clicking on the “Run audits” button. This will take a minute or two, but by the end of it, you will receive an informative, graphical presentation of where your PWA ranks in respect to three properties:

保留设置在此选项卡中的设置，现在您可以通过单击“运行审核”按钮来运行审核。 这将花费一两分钟，但是到最后，您将收到有关PWA在以下三个属性方面的排名的图形化信息：

• Performance
  性能
• Accessibility
  辅助功能
• Best Practices
  最佳实践

Each property has a breakdown of where your application passed the requirements and where it didn’t. This lets you see where you need to make adjustments and where you are meeting the standard. If you are interested, you can find a breakdown of the checklist here.

每个属性都有您的应用程序通过要求的地方以及未通过要求的地方的明细。 这样，您可以查看需要进行调整的地方以及符合标准的地方。 如果您有兴趣，可以在此处找到清单的细目。

PWA起来 (PWA it up)

We are at our journey’s end and hopefully you are feeling better prepared to navigate the world of PWAs. This article was inspired by the process I went through when creating one recently. You can check it out below:

我们正处于旅程的尽头，希望您为驾驭PWA世界做好了更好的准备。 本文的灵感来自我最近创建一个文章时所经历的过程。 您可以在下面查看：

Android Menu XML Generator - Apps on Google PlayGenerate any type of menu you need for your Android application. Choose from an Options, Context or Popup menu and…play.google.com

Android菜单XML生成器-Google Play上的应用 生成Android应用所需的任何类型的菜单。 从选项，上下文或弹出菜单中选择，然后… play.google.com

翻译自: https://www.freecodecamp.org/news/an-explanation-of-progressive-web-apps-for-the-non-pwa-crowd-8a400e275ea1/

web pwa