You need an app! The question is… which kind?

您需要一个应用程序！ 问题是……哪种？

For the last 8 years or so this has been a two-sided debate: Native vs Hybrid. Recently (i.e. 2ish years), though, this debate has heated up (I am playing it fast and loose with the term “heated up”).

在过去的8年左右的时间里，这一直是两方面的辩论：原生与混合。 但是，最近(即2ish年)，这种争论变得更加激烈(我正在用“加热”一词快速而松散地进行辩论)。

Why? Because we have a newcomer on the scene: Progressive Web Apps (PWAs). They have been around for a few years, but they have been exploding recently. In fact, you probably are using some and don’t even realize it:

为什么？ 因为我们要来了一个新人：渐进式Web应用程序(PWA)。 它们已经存在了几年，但是最近一直在爆炸。 实际上，您可能正在使用某些功能，甚至没有意识到：

• https://app.starbucks.com/

  https://app.starbucks.com/

• https://flipboard.com/

  https://flipboard.com/

• https://2048game.com/ (My wife is the champion of this game)

  https://2048game.com/ (我的妻子是这场比赛的冠军)

• https://auth.uber.com/

  https://auth.uber.com/

In 2020, when our clients come to us asking for an app, we often find that a Progressive Web App is the best solution. Is it for your next app? Let’s see.

在2020年，当我们的客户来找我们寻求应用程序时，我们经常发现Progressive Web App是最好的解决方案。 是您的下一个应用程序吗？ 让我们来看看。

到底是什么？ (What’s all the hubbub?)

Now if you are like most of my clients, you probably have no idea what a PWA even is. So let’s start at the beginning….

现在，如果您像我的大多数客户一样，您可能甚至不知道什么是PWA。 因此，让我们从头开始...。

Like most web tech, PWAs have been around a lot longer than most people think (circa 2015 or so). PWA’s were “invented” by Google ninja Alex Russell, but they really came into the limelight when the major browsers started supporting them in 2018. Now, in 2020, they are everywhere, and they bring a lot of neat features to the table.

像大多数网络技术一样，PWA的存在时间比大多数人想象的要长得多(大约在2015年左右)。 PWA是由Google忍者Alex Russell “发明”的，但当主要浏览器于2018年开始支持PWA时，它们才真正引起人们的关注。现在，到2020年，它们无处不在，并且为桌面带来了许多简洁的功能。

那是一门伟大的历史课，但是，什么是PWA？ (That is a great history lesson and all, but what is a PWA?)

The easiest way to think about a PWA is that it is a website that can work offline. Whoa. What?! Yup. A PWA is a website that you can open in any modern browser on almost any device and continue to use even if you go offline. Pretty neat, right? Now, of course, you need to start online, but if you need to wander away from Wi-Fi, you can do so and come back without losing any data.

考虑PWA的最简单方法是，它是可以脱机工作的网站。 哇什么？！ 对。 PWA是一个网站，您可以在几乎任何设备上的任何现代浏览器中打开该网站，即使您离线也可以继续使用。 很整洁吧？ 现在，当然，您需要在线上启动，但是如果您需要离开Wi-Fi，可以这样做并返回，而不会丢失任何数据。

Good example: We built a PWA for a medical manufacturer who needed to inspect their equipment in hospitals. Hospital Wi-Fi is often spotty (lots of equipment, thick walls, and often older tech), so we knew that a regular web app wouldn’t cut it. They needed an app that would work across devices, even if the technician wanders into a lead-lined room that has no hope for a signal.

很好的例子：我们为需要在医院检查设备的医疗制造商建立了PWA。 医院的Wi-Fi常常很杂乱(设备很多，墙壁很厚，而且往往是较老的技术)，因此我们知道常规的Web应用程序不会削​​减它。 他们需要一个能够在各种设备上运行的应用程序，即使技术人员徘徊在没有信号的希望的铅衬里的房间中。

The PWA we developed requires you to be online when you login (at which point we download all the data we need), and then you can be on your merry way. We go on and offline, and it is completely seamless to the user. No downloads, no funny business.

我们开发的PWA要求您在登录时保持在线状态(此时我们将下载所需的所有数据)，然后您就可以使用自己的方式了。 我们上线和下线，对用户而言是完全无缝的。 没有下载，没有有趣的事情。

它们如何工作？ (How do they work?)

Without going fully into Nerdville, the basics of a PWA are the following three ingredients:

在不深入研究Nerdville的情况下，PWA的基础包括以下三个要素：

• Secure Context (HTTPS): All PWA’s must come from a secure URL (the little lock in the address bar). This is non-negotiable because the browser needs to trust that the website is who it says it is.

  安全上下文(HTTPS) ：所有PWA都必须来自安全URL(地址栏中的小锁)。 这是不可协商的，因为浏览器需要相信网站就是它所说的那个人。

• Service Workers: This is where the magic happens. These little robot ninjas are responsible for saving and working with the data whether they are online or off.

  服务人员：这就是神奇的地方。 这些小型机器人忍者负责保存和使用数据，无论它们是在线还是离线。

• Manifest File: This sounds super boring, but it is actually very cool. This little file is what tells the browser that this website can be installed on your phone. Wha? I thought you said no installing?! The cool thing about PWAs is you can visit them like a normal website or you can install them on your phone like an app. No stores required. All because of this little manifest file.

  清单文件：听起来很无聊，但实际上非常酷。 这个小文件告诉浏览器可以在您的手机上安装此网站。 ha？ 我以为你说没有安装？！ 关于PWA的最酷的事情是，您可以像普通网站一样访问它们，也可以像应用程序一样将它们安装在手机上。 无需商店。 都是因为这个小清单文件。

PWA与混合和本机应用程序 (PWA vs Hybrid and Native Apps)

Ok, enough geeking out. Let’s get to the reason you are here.

好吧，够怪胎了。 让我们知道你在这里的原因。

As I mentioned before, in earlier times the debate was only between hybrid and native apps, but now we have a third option. While we have built many apps of every flavor, we have found ourselves recommending PWAs more often in 2020. Here’s why:

正如我之前提到的，在较早的时候，辩论仅是在混合应用程序和本机应用程序之间，但是现在我们有了第三个选择。 尽管我们构建了许多具有各种风格的应用程序，但我们发现自己在2020年会更频繁地推荐PWA。原因如下：

使用方便 (Ease of Use)

The biggest problem with both native and hybrid apps are the stores. Whether you are into Apple or Android, getting your employees to download and keep their apps up to date is no easy chore.

原生和混合应用程序最大的问题是商店。 无论您是使用Apple还是Android，让您的员工下载并保持其应用程序为最新状态都不容易。

With a PWA there are no apps to install (although you can if you want to). No dealing with stores or updates. No worries about compatibility with specific devices. Just open your browser and go.

使用PWA，无需安装任何应用程序(尽管您可以安装)。 不处理商店或更新。 无需担心与特定设备的兼容性。 只需打开浏览器然后继续即可。

可发现性 (Discoverability)

This is a tricky one, but worth mentioning. If you are a new consumer app, then getting Apple or Google’s attention is downright impossible. Thousands of apps are released every single day and you have no real tools to get in front.

这是一个棘手的问题，但值得一提。 如果您是新的消费类应用程序，那么就不可能完全吸引Apple或Google的关注。 每天都有成千上万的应用发布，而您没有真正的工具可以掌握。

A PWA is a website, which means that you can use all of the tools to promote your app as you would any other website (organic search, paid search, etc.).

PWA是一个网站，这意味着您可以像使用其他任何网站一样使用所有工具来推广您的应用程序(自然搜索，付费搜索等)。

The web is still a jungle with a billion other apps out there, but at least in this one you get a spear or something (yeah… that analogy was trash, but you get the point).

网络仍然是一片丛林，那里还有十亿个其他应用程序，但是至少在这个应用程序中，您会有矛头之类的东西(是的……比喻是垃圾，但您明白了)。

成本 (Cost)

Did I mention that a PWA is just a fancy website? Sounds repetitive, but this makes a difference in cost (and developer support), too. Finding a good dev is easier when things are built with standards, which helps on both fronts.

我是否提到PWA只是一个精美的网站？ 听起来是重复的，但这也使成本(和开发人员支持)有所不同。 当使用标准构建事物时，找到一个好的开发者会更容易，这在两个方面都有帮助。

Also… no stores! Not having to deal with the stores saves you money because you don’t have to pay your team to manage and maintain the certs, images, updates, etc. It also helps you make money since you don’t have to give the big gorillas 30% of every transaction, either.

还...没有商店！ 不必处理与存储节省你的钱，因为你没有付出你的团队来管理和维护证书，图片，更新等，它也可以帮助你赚钱，因为你没有给大的大猩猩每笔交易的30％。

Finally, these take the “code once deploy twice” concept that hybrid apps are known for and kick it up to eleven. Instead of deploying only to iOS and Android devices, a PWA deploys everywhere… iOS, Android, Chrome OS, Windows, and Mac. If it can run a browser, a PWA will work on it. This can save you some serious money over time.

最后，这些采用混合应用程序广为人知的“代码一次部署两次”的概念，并将其提高到11个。 PWA不仅可以部署到iOS和Android设备，而且还可以部署到任何地方……iOS，Android，Chrome OS，Windows和Mac。 如果可以运行浏览器，则可以在其上使用PWA。 随着时间的流逝，这可以为您节省很多钱。

Bottom line: the tech stack is simpler, which means that development is simpler, which saves you money. That isn’t to say that building a PWA is a cake walk. Offline support is tricky no matter how you slice it, but in the end a PWA will save you money more often than not.

底线：技术堆栈更简单，这意味着开发更简单，从而节省了资金。 这并不是说建立PWA是轻而易举的事。 不管您如何分割，离线支持都是棘手的，但最终，PWA常常会为您省钱。

并非所有的玫瑰 (Not All Roses)

Just in case you think I am a shill for the PWA cartel or something… before you pull the trigger on one, ask yourself the following questions:

万一您认为我不喜欢PWA卡特尔之类的东西，...在扳动扳机之前，请问自己以下问题：

我的客户想要本机应用程序吗？ (Do my customers want a native app?)

Yes there is app fatigue, but some customers still like apps. They like going to the store and downloading shiny new things (even if they rarely use them). If your customers are into apps, then a PWA isn’t for you.

是的，应用程序很疲劳，但是有些客户仍然喜欢应用程序。 他们喜欢去商店和下载闪亮的新事物(即使他们很少使用它们)。 如果您的客户喜欢应用程序，那么PWA不适合您。

This sounds obvious, but this goes back to knowing your customers. The last thing you want is to build a PWA and find out that your customers don’t want one.

这听起来很明显，但这可以追溯到了解您的客户。 您想要做的最后一件事是建立PWA，然后发现您的客户不想要PWA。

我的客户需要本机应用程序吗？ (Do my customers NEED a native app?)

There are lots of things that web tech can do on a modern mobile device (pictures, barcodes, geolocation, etc.), but they can’t do everything . If your app needs deep device integration, apps to communicate with each other, or you need push notifications (PWA + Push does not work on iOS because… Apple) then a hybrid/native solution will work better for your needs.

网络技术可以在现代移动设备上做很多事情(图片，条形码，地理位置等)，但是它们不能做所有事情。 如果您的应用程序需要深度的设备集成，应用程序之间的通信，或者您需要推送通知(PWA + Push在iOS上不起作用，因为…Apple)，那么混合/本地解决方案将更好地满足您的需求。

Along these same lines, do you need a lot of animations and transitions? If so, again, go hybrid or native. This isn’t the fault of the PWA specifically, but rather browsers and web tech in general. With a native app, you get to talk straight to the device. With a web app of any kind there is a layer between your app and the hardware. Practically speaking, animations can sometimes get jittery on web apps.

同样，您是否需要大量动画和转场？ 如果是这样，请再次选择混合或本地。 这不是PWA的错，而是一般的浏览器和Web技术。 使用本机应用程序，您可以直接与设备对话。 对于任何类型的Web应用程序，您的应用程序和硬件之间都有一层。 实际上，动画有时会在Web应用程序上引起不安。

Bottom line: super slick animations will be much smoother on a hybrid or native app.

底线：超级光滑的动画在混合或本机应用程序上将更加平滑。

您的客户主要是苹果粉丝吗？ (Are your customers primarily Apple fans?)

I joke with my team that Safari is the IE 6 of 2020 because we often have to tweak our web apps to make them look good on Safari when they already look good everywhere else. The reason for this is that Safari is usually a bit behind in standard adoption.

我和我的团队开玩笑说Safari是2020年的IE 6，因为我们经常不得不调整我们的Web应用程序，以使它们在Safari上看起来已经很不错了。 原因是Safari通常在标准采用率方面落后一些。

For PWAs this means that there are some gotchas for your dev to worry about. They aren’t deal breakers, but you will need to make sure your team tests well on iOS and Macs. This becomes particularly important if your audience is mostly Apple s̶n̶o̶b̶s̶… er users.

对于PWA，这意味着您的开发人员需要担心一些陷阱。 他们不是交易突破者，但您需要确保您的团队在iOS和Mac上进行良好的测试。 如果您的听众主要是Apple的用户，那么这尤其重要。

So there ya go. PWAs for the win (mostly). All in all, I find that my clients don’t even know that PWAs exist, and when they hear about them, they get pretty excited. If their app fits into the box, then it is often a great option.

所以，你去。 赢得胜利的PWA(主要是)。 总而言之，我发现我的客户甚至都不知道PWA的存在，当他们听说了PWA时，会感到非常兴奋。 如果他们的应用适合安装在盒子里，那么通常是个不错的选择。

I’d love your feedback on this article. And if you need help, let’s talk.

非常感谢您对本文的反馈。 如果您需要帮助，请让我们谈谈。