渐进式网络应用_渐进式网络应用将取代您的本机应用

渐进式网络应用

重点 (Top highlight)

There’s no way back, but we’re not there yet.

没有回头路了，但我们还没有到那儿。

When Steve Jobs introduced the very first iPhone in 2007, he spoke of how developers would be able to create amazing apps for the iPhone, using only web technologies. There was no App Store yet at that time and no notion of native apps.

当史蒂夫·乔布斯(Steve Jobs)在2007年推出首款iPhone时，他谈到了开发人员如何仅使用Web技术就能为iPhone创建出色的应用程序。 那时还没有App Store，也没有本机应用程序的概念。

What Jobs envisioned is the concept we now know as Progressive Web Apps, basically websites that have an app-like behavior and are able to work offline.

乔布斯设想的是我们现在称为渐进式Web应用程序的概念，基本上是具有类似应用程序的行为并且能够脱机工作的网站。

Unfortunately that idea never took off and a couple of months later the App Store was launched. Developers now had to use a native SDK to build an app for the iPhone.

不幸的是，这个想法从未成功，几个月后，App Store正式启动。 开发人员现在必须使用本机SDK来为iPhone构建应用程序。

Fast-forward to 2020 and Jobs’ original vision is finally becoming reality.

快进到2020年，乔布斯的原始愿景终于成为现实。

本机应用程序的状态 (The state of native apps)

Jobs’ intention to have developers build apps for the iPhone using only web technologies was called his biggest blunder by Forbes in 2014 since the App Store has been a smashing success ever since it was launched.

乔布斯打算让开发人员仅使用网络技术为 iPhone构建应用程序的意图就被福布斯(Forbes)称为2014年最大的失误，因为自从应用商店推出以来，它取得了巨大的成功。

It’s hard to overstate this fact since there are now millions of apps in Apple’s App Store and Google’s Play Store and mobile users now spend 80% of their time using mobile apps.

很难夸大这一事实，因为Apple的App Store和Google的Play Store中现在有数百万个应用程序，而移动用户现在将80％的时间都花在了移动应用程序上 。

Great! So mobile apps are popular, right?

大！ 所以移动应用很受欢迎，对吧？

Well, the problem with this number is that these app users spend 77% of their time on only 3 apps and even 96% of that time on their 10 favorite apps. This means that it’s extremely difficult to get users to even use your app. And it doesn’t end there.

嗯，这个数字的问题在于这些应用程序用户将其时间的77％花在只有3个应用程序上 ，甚至将96％的时间花在了他们最喜欢的10个应用程序上。 这意味着要吸引用户甚至使用您的应用程序都非常困难 。 它并没有就此结束。

Before users can use your app you need to get them to download it first. So you will need them to:

在用户使用您的应用之前，您需要先让他们下载它。 因此，您将需要他们：

• go to the App Store/Play Store
  前往App Store / Play商店
• search for your app
  搜索您的应用
• click to install
  点击安装
• accept permissions
  接受权限
• wait for it to download
  等待下载

In each of these steps you can lose 20% of your potential users.

在每个步骤中， 您可能会失去20％的潜在用户 。

So this is basically what your app is up against: millions of other apps in the same store, a cumbersome installation process and users who spent virtually all of their time on just ten apps.

因此，这基本上就是您的应用程序所要面对的：同一商店中的数百万其他应用程序，繁琐的安装过程以及几乎将所有时间都花在十个应用程序上的用户。

On top of that, building a native app is expensive. Unless you build a hybrid app you will need to build two versions of the same app: one for iOS and one for Android. Considering that most apps lose 77% of their users within 3 days, you might want to think twice about even building one.

最重要的是，构建本机应用程序非常昂贵。 除非您构建混合应用程序，否则您将需要构建同一应用程序的两个版本：一个用于iOS，一个用于Android。 考虑到大多数应用程序会在3天内失去77％的用户 ，因此您甚至可能要三思而后行。

Of course the most popular apps do much better, but even the top 100 apps lose almost half of their users in the first 3 days after installation.

当然，最受欢迎的应用程序的性能要好得多，但是即使是排名前100位的应用程序，在安装后的前三天内也会失去几乎一半的用户。

Which begs the question…

这就引出了一个问题……

无论如何，您的应用有多有价值？ (How valuable is your app anyway?)

When I visit the LinkedIn website on my phone there’s always a banner that asks me if I want to install their mobile app. Same goes for Medium and a lot of other websites. Usually there’s no option to dismiss it once and not be bothered again. It’s always there and it’s annoying.

当我通过手机访问LinkedIn网站时，总是会出现一条横幅，询问我是否要安装他们的移动应用程序。 中型网站和许多其他网站也是如此。 通常，没有任何选择可以将其关闭，而不会再次被打扰。 它总是在那里，很烦人 。

See, for me there is no value in downloading a mobile app when the experience of the mobile website is good enough and the app doesn’t add anything to that.

看，对我来说，当移动网站的体验足够好并且该应用程序没有添加任何东西时，下载移动应用程序毫无价值 。

It makes you wonder why certain websites even have an app. It seems to me they have an app just because everyone else has an app as well. But they’re not sure what to do with it, so the app gives you virtually the same experience as the mobile website.

它使您想知道为什么某些网站甚至有一个应用程序。 在我看来，他们拥有应用程序只是因为其他所有人也都有应用程序。 但是他们不确定该怎么做，因此该应用程序几乎可以为您提供与移动网站相同的体验。

When potential users don’t see any value in your app you’ll have a hard time convincing them to even download it.

当潜在用户看不到您的应用程序有任何价值时，您将很难说服他们下载 。

Here’s a radical idea:

这是一个基本想法：

Why not just optimise the mobile experience of your website?

为什么不仅仅优化网站的移动体验？

An increasing number of your users are on mobile devices and an increasing number of these users are on mobile devices only. So you need to make sure that your website provides a good user experience on mobile.

越来越多的用户都在移动设备上，越来越多的这些用户都在唯一的移动设备。 因此，您需要确保您的网站在移动设备上提供良好的用户体验。

What if you could even turn that mobile experience into an app-like experience?

如果您甚至可以将移动体验转变为类似应用的体验该怎么办？

Well now you can.

好吧，现在可以。

史蒂夫·乔布斯超前了 (Steve Jobs was ahead of his time)

Jobs didn’t coin the term “Progressive Web Apps” but the concept he described back in 2007 was exactly that: apps built with only web technologies, delivered through the web. And this is now something that you can start doing today.

乔布斯没有创造“渐进式Web应用程序”一词，但他在2007年描述的概念恰好是：仅通过Web技术构建的应用程序是通过Web交付的。 这是现在的东西，你可以从今天开始做。

任何网站都可以是渐进式Web应用程序 (Any website can be a Progressive Web App)

A Progressive Web App (PWA) is just a website with some extra features. Adding these features will turn your website into a PWA so this means that basically any website can be a PWA.

渐进式Web应用程序(PWA)只是具有某些附加功能的网站。 添加这些功能会将您的网站变成PWA，因此这意味着基本上任何网站都可以成为PWA。

There are actually only two features you will need to add: a service worker and a manifest.json file.

实际上，您仅需要添加两个功能： 服务工作者和manifest.json文件。

A service worker is just a JavaScript file that enables your website to work offline. It acts as a proxy server between your browser and the network and can intercept network requests and serve custom responses.

一个 服务人员 只是一个JavaScript文件，使您的网站可以离线工作。 它充当浏览器和网络之间的代理服务器，可以拦截网络请求并提供自定义响应。

This means that whenever you’re offline you can still send a request to your website and it can serve a cached response for example. You could have an app that edits a document on a remote server. When offline, it can save the requests to edit the document locally and send them to the server later when the app is back online.

这意味着无论何时离线，您仍然可以将请求发送到您的网站，并且可以提供缓存的响应。 您可能有一个可以在远程服务器上编辑文档的应用程序。 脱机时，它可以保存在本地编辑文档的请求，并在应用程序重新联机后稍后将其发送到服务器。

This way, you can make your website provide an app-like user experience without having to build a full-fledged native app.

这样，您可以使网站提供类似应用程序的用户体验，而无需构建完整的本机应用程序。

The manifest.json file lists the icons your app uses, its start URL and screen orientation among other things.

manifest.json文件列出了您的应用程序使用的图标，其起始URL和屏幕方向等。

Technically speaking, serving your site over HTTPS and having a service worker and manifest.json file is all you need to turn your website into a PWA.

从技术上讲，通过HTTPS为网站提供服务并拥有服务人员和manifest.json文件是将网站转变为PWA所需要的。

For a more in-depth introduction to PWAs, see this talk I did for Dutch Developers & Designers:

有关PWA的更深入介绍，请参阅我为荷兰开发人员和设计师所做的演讲：

Now, PWAs are not necessarily intended to replace native apps, but I still think that eventually they will, and here’s why.

现在，个PWA不一定旨在取代本地应用程序，但我仍然认为他们最终会和这里的原因。

没有回头路了 (There’s no way back)

The benefits of PWAs are just too great compared to native apps. When you have a website that’s optimised for mobile, you can easily turn it into an app. This means you don’t need to build separate apps for iOS and Android anymore.

与本地应用程序相比，PWA的好处实在太大了。 如果您拥有针对移动设备进行了优化的网站，则可以轻松地将其转变为应用程序。 这意味着您不再需要为iOS和Android构建单独的应用程序。

Since your app is technically just a website, people can simply find it through Google. If you want someone to install it, just give them the URL, no more need to go through the app store submission process.

由于您的应用从技术上讲只是一个网站，因此人们可以通过Google轻松找到它。 如果您希望有人安装它，只需给他们提供URL，就无需再通过应用商店提交过程了。

Your users won’t need to install tens of megabytes of code anymore to use your app. Your PWA is built with just HTML, CSS and JavaScript and can therefore be lightweight and fast.

您的用户不再需要安装数十兆的代码即可使用您的应用。 您的PWA仅使用HTML，CSS和JavaScript构建，因此可以轻量级且快速。

This also means that you no longer need to get your users to install updates. When there’s a new version of your app, you just deploy it to your webserver and the next time users visit, they will automatically get the new version.

这也意味着您不再需要让用户安装更新。 当您有新版本的应用程序时，只需将其部署到您的网络服务器上，当用户下次访问时，他们将自动获得新版本。

但是我们还没有 (But we’re not there yet)

PWAs can do most things native apps can and many native apps could easily be replaced by a PWA. But ironically iOS, the platform of the company whose co-founder first presented the idea of a PWA, is lacking behind.

PWA可以执行本机应用程序可以执行的大多数操作，并且许多本机应用程序可以轻松地被PWA取代。 但具有讽刺意味的是，iOS(该公司的联合创始人首先提出了PWA的想法)的平台却落后了。

Android has significantly better support for PWAs and is developing rapidly, while support on iOS is limited and inconsistent.

Android对PWA的支持明显更好，并且正在快速发展，而对iOS的支持有限且不一致。

But even iOS has made significant improvements recently and continues to improve, even though Apple chooses to be silent about it.

但是，即使苹果选择对此保持沉默，但即使是iOS，最近也取得了显着改进，并且还在继续改进。

Meanwhile, we’ll have to deal with these limitations which are not insurmountable.

同时，我们必须应对这些不可克服的局限性。

In particular, Maximiliano Firtman is a developer and author who spends a lot of time testing PWAs on various platforms and finding new features and bugs.

特别是，Maximilianiano Firtman是一名开发人员和作家，他花费大量时间在各种平台上测试PWA并查找新功能和错误。

今日PWA的状态 (The state of PWA today)

So what exactly can a PWA do today? How does it function on different platforms?

那么，PWA今天到底能做什么？ 在不同平台上如何运作？

I created a PWA that showcases what is possible right now with PWAs, called What PWA Can Do Today.

我创建了一个PWA，展示了PWA目前可能实现的功能，称为PWA今天可以做什么 。

It’s inspired by What Web Can Do Today and showcases features that you can use with a PWA.

它受到“今日网络可以做什么”的启发，并展示了可用于PWA的功能。

You can install it on your mobile phone, tablet or desktop, play with it and experience yourself what is possible. I created a repo on Github to collect bugs and will continue to develop it further.

您可以将其安装在手机，平板电脑或台式机上，一起玩，亲身体验一下。 我在Github上创建了一个仓库来收集错误，并将继续进行进一步的开发。

You can follow me on Twitter where I regularly write about the PWAs, Web Components and the capabilities of the modern web.

您可以在Twitter上关注我，在那里我定期撰写有关PWA，Web组件和现代Web功能的文章。

翻译自: https://itnext.io/progressive-web-apps-will-replace-your-native-app-4427f2df6604

渐进式网络应用