漸進(jìn)式web應(yīng)用程序

by Dave Gray

戴夫·格雷(Dave Gray)

通過(guò)漸進(jìn)式Web應(yīng)用程序吸引用戶并增強(qiáng)他們的體驗(yàn) (Engage your users and enhance their experience with Progressive Web Apps)

什么是漸進(jìn)式Web應(yīng)用程序？ (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.

漸進(jìn)式Web應(yīng)用程序 (又名PWA)是雙重性。 它既是網(wǎng)站，又是網(wǎng)絡(luò)應(yīng)用程序。 PWA提供對(duì)新網(wǎng)站和現(xiàn)有網(wǎng)站的逐步增強(qiáng) 。 這些以移動(dòng)設(shè)備為中心的增強(qiáng)功能很容易證明。 在2016年秋季，移動(dòng)互聯(lián)網(wǎng)的使用量超過(guò)了臺(tái)式機(jī)互聯(lián)網(wǎng)的使用量。這確實(shí)是一個(gè)移動(dòng)第一世界。

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.

一種此類增強(qiáng)功能是“添加到主屏幕”選項(xiàng)。 網(wǎng)站通過(guò)滿足特定的PWA設(shè)計(jì)標(biāo)準(zhǔn)在某些瀏覽器中啟用此功能。 此功能使您可以將PWA圖標(biāo)與其他應(yīng)用程序圖標(biāo)一起保存到主屏幕。 然后，您可以使用應(yīng)用程序的外觀啟動(dòng)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開發(fā)人員現(xiàn)在可以為用戶設(shè)計(jì)“類似于應(yīng)用程序”的全屏體驗(yàn)。 HTML，CSS和Javascript是唯一必需的編程語(yǔ)言。 現(xiàn)在可以使用本機(jī)移動(dòng)設(shè)備功能，包括推送通知，攝像頭，地理位置以及更多功能。 此外，即使您失去數(shù)據(jù)連接，PWA仍應(yīng)提供功能。 它應(yīng)該脫機(jī)工作！

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 “l(fā)oad instantly, regardless of the network state”, “respond quickly to user interactions”, “l(fā)ive on the user’s home screen”, and “offer an immersive full screen experience”.

Google定義了漸進(jìn)式Web應(yīng)用程序的三個(gè) “野草”：它們必須可靠 ， 快速且具有吸引力 。 Google指出，漸進(jìn)式Web應(yīng)用程序應(yīng)“ 無(wú)論網(wǎng)絡(luò)處于何種狀態(tài)，都應(yīng)立即加載 ”，“ 對(duì)用戶交互進(jìn)行快速響應(yīng) ”，“ 實(shí)時(shí)顯示在用戶的主屏幕上 ”以及“ 提供身臨其境的全屏體驗(yàn) ”。

為什么我(或?yàn)槭裁次业墓?需要漸進(jìn)式Web應(yīng)用程序？ (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.

當(dāng)漸進(jìn)式Web應(yīng)用程序就足夠時(shí)，您無(wú)需開發(fā)單獨(dú)的解決方案 (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.

無(wú)論如何，PWA都不是所有移動(dòng)應(yīng)用程序的替代品。 許多移動(dòng)應(yīng)用程序具有PWA無(wú)法復(fù)制的功能。 但是，如果您的應(yīng)用程序?qū)Ｗ⒂谛畔⒐蚕?帖子，圖片，產(chǎn)品，支持，社交互動(dòng))，那么PWA是一個(gè)不錯(cuò)的選擇。

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

問(wèn)題“為什么？”的另一個(gè)答案 達(dá)到了 。

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美國(guó)移動(dòng)應(yīng)用報(bào)告( 在此處請(qǐng)求訪問(wèn) )，使用時(shí)間的87％用于移動(dòng)應(yīng)用，而使用時(shí)間的13％用于移動(dòng)網(wǎng)絡(luò)。 然而，將500強(qiáng)移動(dòng)Web應(yīng)用程序與500強(qiáng)移動(dòng)Web屬性的覆蓋范圍進(jìn)行比較時(shí)，移動(dòng)網(wǎng)絡(luò)的覆蓋范圍是原來(lái)的兩倍以上，即平均每月獨(dú)立訪問(wèn)者為1570萬(wàn)，而移動(dòng)應(yīng)用程序?yàn)?00萬(wàn)。

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％的用戶有意將應(yīng)用程序移至主屏幕，比2016年增長(zhǎng)了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.

漸進(jìn)式Web應(yīng)用程序結(jié)合了本機(jī)應(yīng)用程序功能的功能，這些功能可延長(zhǎng)Web應(yīng)用程序的使用時(shí)間，并具有可訪問(wèn)的網(wǎng)絡(luò)媒體資源以及在主屏幕上進(jìn)行安裝的能力。 這種混合組合使Progressive Web Apps值得考慮。

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

一些網(wǎng)站已經(jīng)在邁向功能全面的漸進(jìn)式Web應(yīng)用程序。

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

Twitter Lite是利用推送通知和離線功能的一個(gè)很好的例子。 Twitter的PWA“ 大大提高了參與度并減少了數(shù)據(jù)使用量 ”。

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案例研究揭示了令人印象深刻的統(tǒng)計(jì)數(shù)據(jù)和寶貴的見解。 與之前的移動(dòng)網(wǎng)絡(luò)體驗(yàn)相比，Pinterest核心參與度增加了60％。 他們的用戶生成的廣告收入增長(zhǎng)了44％。 此外，花費(fèi)的時(shí)間增加了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取得了驚人的成績(jī)。 超過(guò)半百萬(wàn)的用戶使用了其“添加到主屏幕”功能。 這些用戶的參與度提高了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個(gè)很棒的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.

如果您是網(wǎng)絡(luò)開發(fā)人員，那么最好的起點(diǎn)是Google Developers Progressive Web Apps頁(yè)面 。 您將需要了解服務(wù)工作者和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提供了稱為L(zhǎng)ighthouse的自動(dòng)網(wǎng)站審核工具。 Lighthouse審核您的應(yīng)用程序的五個(gè)類別 ：漸進(jìn)式Web應(yīng)用程序，性能，可訪問(wèn)性，最佳實(shí)踐和搜索引擎優(yōu)化。 詳細(xì)的Lighthouse審核報(bào)告將為您提供15頁(yè)的詳細(xì)信息以及50多個(gè)單獨(dú)的審核結(jié)果。

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開發(fā)人員，則需要找到一個(gè)網(wǎng)站來(lái)創(chuàng)建您的當(dāng)前網(wǎng)站或?qū)⑵涓聻闈u進(jìn)式Web應(yīng)用程序。 PWA當(dāng)前是開發(fā)人員密集型的。 我不知道有任何服務(wù)可以使代碼知識(shí)脫離解決方案。 如果您擁有當(dāng)?shù)氐木瓢苫蚩Х鹊?#xff0c;則可能會(huì)發(fā)現(xiàn)經(jīng)常光顧的人，他也是需要PWA測(cè)試項(xiàng)目的開發(fā)人員。 (請(qǐng)參閱thepmount.com )在接下來(lái)的幾個(gè)月中，我計(jì)劃在PWA創(chuàng)建過(guò)程的每個(gè)步驟上發(fā)表文章。

結(jié)論 (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.

漸進(jìn)式Web應(yīng)用程序為現(xiàn)有網(wǎng)站提供漸進(jìn)式增強(qiáng)功能 ，并為要爭(zhēng)取的現(xiàn)有和新的Web應(yīng)用程序設(shè)置了新的標(biāo)準(zhǔn) 。 滿足PWA要求并通過(guò)Lighthouse審核將有助于在移動(dòng)設(shè)備上提供可靠，快速且引人入勝的用戶體驗(yàn)……而我們所有人都應(yīng)該從中受益。

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.

隨時(shí)通過(guò)LinkedIn或Twitter與我聯(lián)系。 如果您喜歡這篇文章，請(qǐng)給她一些鼓掌。 我將由衷的感謝。

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

戴夫·格雷| 專業(yè)簡(jiǎn)介| 領(lǐng)英(LinkedIn)在領(lǐng)英上 查看Dave Gray的專業(yè)檔案。 領(lǐng)英( LinkedIn)是世界上最大的商業(yè)網(wǎng)絡(luò)，可為您提供幫助... www.linkedin.com Dave Gray(@yesdavidgray)| Twitter 來(lái)自Dave Gray(@yesdavidgray)的最新推文。 講師@FHSUInformatics *開發(fā)人員*音樂(lè)家*企業(yè)家… twitter.com

翻譯自: https://www.freecodecamp.org/news/engage-your-users-and-enhance-their-experience-with-progressive-web-apps-de0e0bfb2fbf/

漸進(jìn)式web應(yīng)用程序

總結(jié)

以上是生活随笔為你收集整理的渐进式web应用程序_通过渐进式Web应用程序吸引用户并增强他们的体验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。