通過漸進式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.comDave 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