渐进式web应用程序_通过渐进式Web应用程序吸引用户并增强他们的体验-CSDN博客

渐进式web应用程序

by Dave Gray

戴夫·格雷(Dave Gray)

通过渐进式Web应用程序吸引用户并增强他们的体验 (Engage your users and enhance their experience with Progressive Web Apps)

什么是渐进式Web应用程序？ (What is a Progressive Web App?)

A Progressive Web App (aka PWA) is a duality. It is both a website and a web app. A PWA provides progressive enhancements to new and existing websites. These mobile-focused enhancements are easy to justify. Mobile Internet usage passed desktop Internet usage in the fall of 2016. It is truly a mobile-first world.

渐进式Web应用程序 (又名PWA)是双重性。它既是网站，又是网络应用程序。 PWA提供对新网站和现有网站的逐步增强。这些以移动设备为中心的增强功能很容易证明。在2016年秋季，移动互联网的使用量超过了台式机互联网的使用量。这确实是一个移动第一世界。

One such enhancement is the “Add to Home Screen” option. Websites enable this feature in some browsers by meeting specific PWA design criteria. This feature lets you save the PWA icon to your home screen alongside your other app icons. You can then launch the PWA with the look and feel of an app.

一种此类增强功能是“添加到主屏幕”选项。网站通过满足特定的PWA设计标准在某些浏览器中启用此功能。此功能使您可以将PWA图标与其他应用程序图标一起保存到主屏幕。然后，您可以使用应用程序的外观启动PWA。

Web developers may now design an “app-like” full screen experience for users. HTML, CSS, and Javascript are the only necessary programming languages. Native mobile device features including push notifications, camera, geolocation, and much more are now available for use. Also, a PWA should still provide functionality even if you lose your data connection. It should work offline!

Web开发人员现在可以为用户设计“类似于应用程序”的全屏体验。 HTML，CSS和Javascript是唯一必需的编程语言。现在可以使用本机移动设备功能，包括推送通知，摄像头，地理位置以及更多功能。此外，即使您失去数据连接，PWA仍应提供功能。它应该脱机工作！

Google has defined three areas that are “musts” for Progressive Web Apps: They must be reliable, fast, and engaging. Google states that Progressive Web Apps should “load instantly, regardless of the network state”, “respond quickly to user interactions”, “live on the user’s home screen”, and “offer an immersive full screen experience”.

Google定义了渐进式Web应用程序的三个 “野草”：它们必须可靠，快速且具有吸引力 。 Google指出，渐进式Web应用程序应“ 无论网络处于何种状态，都应立即加载 ”，“ 对用户交互进行快速响应 ”，“ 实时显示在用户的主屏幕上 ”以及“ 提供身临其境的全屏体验 ”。

为什么我(或为什么我的公司)需要渐进式Web应用程序？ (Why do I (or why does my company) need a Progressive Web App?)

You can eliminate the need to develop separate solutions (iOS, Android, Web) when a Progressive Web App will suffice.

当渐进式Web应用程序就足够时，您无需开发单独的解决方案 (iOS，Android，Web)。

PWAs are not replacements for all mobile apps by any means. There are many mobile apps with features PWAs cannot replicate. However, if your app focuses on information sharing (posts, pics, products, support, social interaction), a PWA is a great choice.

无论如何，PWA都不是所有移动应用程序的替代品。许多移动应用程序具有PWA无法复制的功能。但是，如果您的应用程序专注于信息共享(帖子，图片，产品，支持，社交互动)，那么PWA是一个不错的选择。

Another answer to the question “Why?” is reach.

问题“为什么？”的另一个答案 达到了 。

Referencing the comScore 2017 U.S. Mobile App Report (request your access here), 87% of usage time is on mobile apps vs. 13% of usage time on mobile web. Yet when comparing the reach of the Top 500 Mobile Web Apps vs the Top 500 Mobile Web Properties, mobile web has more than double the reach — 15.7 million average monthly unique visitors vs. 7 million for mobile apps.

参考comScore 2017美国移动应用报告( 在此处请求访问 )，使用时间的87％用于移动应用，而使用时间的13％用于移动网络。然而，将500强移动Web应用程序与500强移动Web属性的覆盖范围进行比较时，移动网络的覆盖范围是原来的两倍以上，即平均每月独立访问者为1570万，而移动应用程序为700万。

In addition, comScore notes that 80% of users intentionally moved apps to their home screen in 2017 which is up 5% from 2016.

此外，comScore指出，2017年有80％的用户有意将应用程序移至主屏幕，比2016年增长了5％。

Progressive Web Apps combine the capabilities of native app features that drive high usage times with the reach of web properties and the ability to install on the home screen. This hybrid combination makes Progressive Web Apps worth consideration.

渐进式Web应用程序结合了本机应用程序功能的功能，这些功能可延长Web应用程序的使用时间，并具有可访问的网络媒体资源以及在主屏幕上进行安装的能力。这种混合组合使Progressive Web Apps值得考虑。

Several websites are already taking the step to full-functioning Progressive Web Apps.

一些网站已经在迈向功能全面的渐进式Web应用程序。

Twitter Lite is a great example utilizing push notifications and offline functionality. Twitter’s PWA “significantly increases engagement and reduces data usage”.

Twitter Lite是利用推送通知和离线功能的一个很好的例子。 Twitter的PWA“ 大大提高了参与度并减少了数据使用量 ”。

This Pinterest PWA case study reveals impressive statistics and valuable insights. In comparison to their previous mobile web experience, Pinterest achieved an increase of 60% in core engagements. Their user-generated ad revenue increased by 44%. In addition, time spent is up by 40%.

Pinterest PWA案例研究揭示了令人印象深刻的统计数据和宝贵的见解。与之前的移动网络体验相比，Pinterest核心参与度增加了60％。他们的用户生成的广告收入增长了44％。此外，花费的时间增加了40％。

Trivago’s PWA is achieving amazing results. More than half a million users have utilized their “add to home screen” functionality. The engagement of those users is up 150%. Trivago discusses their PWA decision in this video.

Trivago的PWA取得了惊人的成绩。超过半百万的用户使用了其“添加到主屏幕”功能。这些用户的参与度提高了150％。 Trivago 在此视频中讨论了他们的PWA决定。

Many other examples of PWAs exist. Start your search at pwa.rocks and this list of 5 awesome PWAs.

存在PWA的许多其他示例。从pwa.rocks和5个很棒的PWA列表开始搜索。

我该如何开始？ (How do I get started?)

If you are a web developer, a great place to start is the Google Developers Progressive Web Apps page. You will need to learn about Service Workers and Web App Manifests.

如果您是网络开发人员，那么最好的起点是Google Developers Progressive Web Apps页面。您将需要了解服务工作者和Web App清单。

Google provides an automated website audit tool called Lighthouse. Lighthouse audits five categories for your app: Progressive Web App, Performance, Accessibility, Best Practices, and Search Engine Optimization. The detailed Lighthouse audit report will give you 15 pages of details with over 50 individual audit results.

Google提供了称为Lighthouse的自动网站审核工具。 Lighthouse审核您的应用程序的五个类别：渐进式Web应用程序，性能，可访问性，最佳实践和搜索引擎优化。详细的Lighthouse审核报告将为您提供15页的详细信息以及50多个单独的审核结果。

If you are not a web developer, you will need to find one to create or update your current website to a progressive web app. PWAs are currently developer-intensive. I am not aware of any service that takes the knowledge of code out of the solution. If you own the local pub or coffee shop, you might find a frequent patron who is also a developer that needs a PWA test project. (See thepmount.com) In the coming months, I plan to publish articles on each step of the PWA creation process.

如果您不是Web开发人员，则需要找到一个网站来创建您的当前网站或将其更新为渐进式Web应用程序。 PWA当前是开发人员密集型的。我不知道有任何服务可以使代码知识脱离解决方案。如果您拥有当地的酒吧或咖啡店，则可能会发现经常光顾的人，他也是需要PWA测试项目的开发人员。 (请参阅thepmount.com )在接下来的几个月中，我计划在PWA创建过程的每个步骤上发表文章。

结论 (Conclusion)

Progressive Web Apps provide progressive enhancement to existing websites and set new criteria for both pre-existing and new web apps to strive for. Meeting the PWA requirements and passing the Lighthouse audits will help provide reliable, fast, and engaging user experiences on mobile devices… and that is something we should all benefit from.

渐进式Web应用程序为现有网站提供渐进式增强功能，并为要争取的现有和新的Web应用程序设置了新的标准。满足PWA要求并通过Lighthouse审核将有助于在移动设备上提供可靠，快速且引人入胜的用户体验……而我们所有人都应该从中受益。

Reach out to me any time on LinkedIn or Twitter. And if you liked this article, give it a few claps. I will sincerely appreciate it.

随时通过LinkedIn或Twitter与我联系。如果您喜欢这篇文章，请给她一些鼓掌。我将由衷的感谢。

Dave Gray | Professional Profile | LinkedInView Dave Gray's professional profile on LinkedIn. LinkedIn is the world's largest business network, helping…www.linkedin.com Dave Gray (@yesdavidgray) | TwitterThe latest Tweets from Dave Gray (@yesdavidgray). Instructor @FHSUInformatics * Developer * Musician * Entrepreneur …twitter.com

戴夫·格雷| 专业简介| 领英(LinkedIn)在领英上 查看Dave Gray的专业档案。 领英( LinkedIn)是世界上最大的商业网络，可为您提供帮助... www.linkedin.com Dave Gray(@yesdavidgray)| Twitter 来自Dave Gray(@yesdavidgray)的最新推文。 讲师@FHSUInformatics *开发人员*音乐家*企业家… twitter.com