[譯] 推廣安裝 PWA 的模式（移動端）

時間  2019-11-30
標籤 推廣 安裝 pwa 模式 移動 欄目 無線 简体版
原文   原文鏈接

漸進式網頁應用（PWA）是一種模式，用於建立類應用程序，即時加載的，可靠的和可安裝的網站。雖然 PWA 技術適用於包括桌面端在內的全部設備，本篇文章重點介紹移動端 PWA 安裝推廣模式。前端

爲何你但願用戶在他們的主頁安裝你的應用？和你但願用戶從任何應用商店安裝你的應用緣由是同樣的。安裝了應用的用戶是你最需關注的羣體。安裝了 PWA 的用戶比通常的訪客擁有更好的參與度指標，包括更頻繁的訪問次數，在頁面上更久的停留時間以及更高的用戶轉化率，這些特色基本能夠和移動設備上的本機應用相匹敵了。android

若是你的 PWA 有助於讓用戶安裝你 app 的場景，例如，用戶每週使用你的應用超過一次，那麼你應該在 app 裏使用網頁 UI 技術推廣你 PWA 的安裝。ios

注意： 有關實施 PWA 安裝推廣所需的代碼，請參閱添加到主屏幕（Web）。git

PWA 安裝推廣的最佳實踐

不管你在網站上使用哪一種推廣模式，這些最佳作法都適用。github

  1. 將推廣與你的用戶操做流程相分離。舉例來講，在 PWA 的登陸頁，將請求操做放在登錄表單和提交按鈕下方。混亂的使用推廣模式會下降你 PWA 的可用性，而且會對參與度指標形成負面影響。
  2. 需包含關閉或減小推廣的能力。若是他們這樣作，請記住用戶的偏好，而且只有在用戶與你的應用內容的關係發生變化時纔會從新提示，例如他們已登陸或完成購買。
  3. 能夠在你 PWA 應用的不一樣部分裏結合使用多種技術，但請注意不要過多的推廣安裝或打擾到你的用戶。記住第一條規則 #1！
  4. 僅在你檢測到 beforeinstallprompt 事件被觸發時才顯示推廣信息。

瀏覽器自動推廣

在主屏頁添加 AirHorner 迷你信息欄的示例。web

當你的 PWA 經過了 Android 上的可安裝性檢查清單時，瀏覽器就會告訴用戶使用迷你信息欄 PWA 的可安裝性。這個迷你信息欄只是一個輔助，將來它將被移除。後端

注意： 從 Chrome 76 版本開始，你能夠經過在 beforeinstallprompt 事件上調用 preventDefault 阻止迷你信息欄出現。若是你不調用 preventDefault，該條目會在用戶第一次訪問你的站點時被顯示出來，而且這符合安卓的可安裝標準，而後在大約 90 天之後它會再次顯示。瀏覽器

應用 UI 推廣模式

應用 UI 推廣模式幾乎適用於任何類型的 PWA 應用並在諸如網站導航，banner 等 UI 層面上體現出來。和使用任何其餘類型的推廣模式同樣，很重要的一點是關照到用戶的使用環境，儘可能減小對用戶操做流程的干擾。網絡

在觸發推廣 UI 時，考慮周全的網站能夠實現更多數量的安裝，並避免干擾那些對安裝不感興趣的用戶的操做流程。app

固定標題

這裏有一個安裝按鈕，它是你網站標題的一部分。其餘標題內容一般包含網站品牌信息，諸如 logo 圖標或者漢堡菜單。標題是否 position:fixed 取決於你的站點功能和用戶需求。

若是使用得當，在你的站點標題處推行 PWA 安裝是一種很好的方式，由於這可讓你的大多數忠實用戶更輕鬆地迴歸到你的體驗上來。PWA 標題裏的每一個像素都頗有價值，因此請確保你的安裝請求操做具備合適的大小，而且比其餘任何可能的標題內容更重要，還不那麼顯眼。

你必須確保：

  • 評估用戶已安裝用例的價值。考慮選擇性定位的向那些可能從中受益的用戶展現這些推廣信息。
  • 有效使用寶貴的標題空間。考慮在標題中能夠爲你的用戶提供哪些其餘幫助，並權衡安裝推廣相對於其餘選項的優先級（譯者注：也許其餘選項比推廣安裝更重要）。

導航菜單

在側邊滑出導航菜單裏添加安裝按鈕或推廣信息。

導航菜單是推廣安裝應用的好地方，由於打開菜單的用戶會發送與你的應用互動的相關信息。

請你確保：

  • 避免破壞重要的導航內容。把 PWA 安裝推廣放在其餘菜單項下面。
  • 提供一個簡短的相關說明，告訴用戶安裝 PWA 爲何能帶來好處。

落地頁面

落地頁的目的是宣傳你的產品和服務，因此這裏是一個適合大規模推廣安裝大家 PWA 應用優勢的地方。

首先，介紹大家網站的價值主張，而後讓訪問者瞭解他們能從安裝中獲得什麼。

請你確保：

  • 着重突出對你的訪客最重要的功能，並強調可能將他們帶到你落地頁的關鍵字。（譯者注：也許是這些關鍵字讓用戶訪問的落地頁）
  • 既然是落地頁。在明確了你的價值主張以後，應當即進行安裝推廣並使用號召性用語！
  • 考慮在用戶花費大量時間的應用上添加安裝推廣。

安裝 Banner

頁面頂部可關閉的 banner。

大多數用戶在手機體驗中遇到過安裝 banner，而且熟悉 banner 提供的交互功能。應謹慎使用 banner，由於它們會對用戶體驗形成極大的破壞。

請你確保：

  • 在顯示 banner 以前，請等待用戶對你的站點表現出足夠的興趣。若是你的用戶關閉了 banner，請不要再顯示，除非用戶觸發了轉化事件，代表和你的內容有更高的參與度，例如在電子商務網站上的消費行爲或者註冊成爲一個帳號。
  • 提供有關在 banner 中安裝 PWA 的價值的簡要說明。例如，你能夠經過說起它的使用幾乎不佔用用戶設備存儲空間，也不會跳轉到應用商店而是當即安裝的方式，告訴用戶安裝一個 PWA 和本機應用的區別。

內在推廣模式

內在推廣技術將推廣和站點內容交織在一塊兒。這一般比應用 UI 上的推廣更微妙一些，UI 具備權衡性。你但願你的推廣足夠突出，感興趣的用戶可能會注意到它，但下降了用戶體驗就不太值得。

內反饋

在 PWA 中的新聞文章或其餘信息卡列表之間出現的一個內反饋安裝推廣。

你的目的是向用戶展現他們如何更方便地訪問到他們正在享受的內容。專一推廣那些對你的用戶有用的特性和功能。

請你確保：

  • 減小推廣的頻率以避免干擾到用戶。
  • 爲用戶提供關閉推廣的能力。記住是你的用戶選擇去關閉

預約或結帳流程

在一系列流程進行或結束時展現安裝推廣，典型的是預約或結帳流程。若是你在用戶完成了流程操做時顯示推廣，那麼由於流程已經結束你可讓它更加突出。

請你確保：

  • 包含一個相關的號召性用語。哪些用戶能夠從安裝你的應用中受益？爲何？它與用戶當下的操做流程有什麼關係？
  • 若是你的品牌爲安裝了應用的用戶提供獨特優惠，請務必在此處說起。
  • 保證你的推廣和流程的下一步是分離的，否則會對你的流程完成率形成負面影響。在上面的電子商務例子中，請注意關鍵結帳流程操做是在應用安裝推廣之上的。

註冊，登陸或註銷流程

這類推廣是前文流程推廣模式的一種特例，而且促銷卡可能會是一個更好的例子。

這些頁面一般只會被參與的用戶看到，其中你的 PWA 價值主張已經創建了。在這些頁面上一般也不會放置不少其餘有用的信息。因此，只要不干擾正常操做，較大規模的宣傳性用語也只會產生較少的破壞性。

請你確保：

  • 避免在註冊表單裏破壞用戶的操做流程。若是這是一個多步驟過程，你可能須要等到用戶完成流程再展現。
  • 向已註冊用戶推廣最相關的功能。
  • 考慮在你的應用登陸區域添加其餘的安裝推廣。

我應該使用什麼模式？

電子商戶

許多電子商務品牌都擁有一批忠實的客戶。這些客戶想要推送通知，以便及早訪問了解新的庫存而且知道他們的商品何時發貨。他們但願在主屏幕上使用應用，以便快速訪問目錄和全屏體驗。

適用於電子商務PWA的模式包括：

產品列表頁 (PLP) 或者類別頁面

這是內反饋安裝推廣模式的一個特例，這裏的反饋是產品或類別列表。

請你確保：

  • 匹配產品列表頁面其他部分的外觀。
  • 不干擾用戶選擇產品的選擇過程。

富媒體和通信

你是在構建下一個社交現象級或者音樂流媒應用嗎？當用戶第一次訪問你的 PWA 應用時，邀請他們安裝你的 PWA 是一種讓他們再次回來的很好的方式。因爲使用比本地應用更少的存儲空間，你的用戶會安裝你的 PWA 並看看你的產品是否適合他們。

適用於富媒體和通訊 PWA 的模式包括：

新聞

若是你在面向內容的站點上工做，那麼你可能會有對安裝 PWA 感興趣的常規用戶。

適用於新聞和社交 PWA 的模式包括：

遊戲

現代網絡對遊戲來講是最偉大的分銷平臺，可讓最大型的遊戲抵達世界各地。

適用於 PWA 遊戲的模式包括：

遊戲結束

這實際上就是流程 UI 模式的一個特例。

大多數休閒和超級休閒遊戲結束的很快。若是你的用戶正在玩遊戲，那麼這是一個邀請他們安裝的好機會。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程