• Patterns for Promoting PWA Installation
  • Originally written by Peter Mclachlan
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Sam
  • Proofreader: Wuyanan, Ke Xiaoji

Progressive Web Application (PWA) is a model for creating class applications that load instantly, reliably and installable websites. Although PWA technology is suitable for all devices, including the desktop, this article focuses on the mobile PWA installation promotion model.

Why do you want users to install your app on their home page? For the same reason you want users to install your app from any app store. The people who have installed your app are the people you need to focus on the most. PWA users have better engagement metrics than average visitors, including more frequent visits, longer stays on the page, and higher conversion rates, which are comparable to native apps on mobile devices.

If your PWA helps to get users to install your app in scenarios where, for example, users use your app more than once a week, then you should use web UI technology in your app to promote your PWA installation.

Note: For the code required to implement the PWA installation promotion, see Add to Home Screen (Web).

Best practices for PWA installation promotion

These best practices apply regardless of which distribution model you use on your site.

  1. Separate promotions from your user flow. For example, on the PWA login page, place the request action below the login form and submit button. Confusing use distribution patterns can reduce the availability of your PWA and negatively impact engagement metrics.
  2. The ability to turn off or reduce promotions should be included. If they do, keep in mind the user’s preferences and only re-prompt if the user’s relationship to your app’s content changes, such as if they’ve logged in or made a purchase.
  3. You can use a combination of techniques in different parts of your PWA application, but be careful not to over-promote installations or disturb your users. Remember rule number one #1!
  4. Only in youdetectiontobeforeinstallpromptThe promotion message is displayed only when the event is triggered.

Automatic browser promotion

Example of adding an AirHorner mini-message bar to the home screen.

When your PWA passes the installability checklist on Android, the browser tells the user about the installability of the PWA using the mini-info bar. This mini-message bar is only an aid and will be removed in the future.

Note: Starting with Chrome 76, you can prevent the preventDefault mini-bar from appearing by calling the beforeInstallPrompt event. If you don’t call preventDefault, the entry will be displayed the first time the user visits your site, which meets Android’s standards for installability, and then it will be displayed again in about 90 days.

Apply the UI promotion model

The application UI promotion model can be applied to almost any type of PWA application and is embodied at the UI level such as website navigation, banner, etc. As with any other type of promotion model, it is important to take care of the user’s environment and minimize the interference to the user’s operation process.

When it comes to triggering a promotional UI, a well-thought-out site can achieve a higher number of installs and avoid interfering with the flow of users who aren’t interested in installing.

Fixed title

There is an install button that is part of the title of your site. Other headline content usually contains branding information about the site, such as a logo icon or a burger menu. Whether the title is position: Fixed depends on the functionality of your site and the needs of your users.

When used properly, implementing PWA installations in the title of your site is a great way to make it easier for your most loyal users to return to your experience. Every pixel in a PWA title is valuable, so make sure your install request operation is of the right size and is more important and less conspicuous than any other possible title content.

You must ensure that:

  • Evaluate the value of user installed use cases. Consider selectively targeting these promotions to users who might benefit from them.
  • Use valuable title space effectively. Consider what other help you can offer your users in the title, and weigh the priority of install promotion over other options.

Navigation menu

Add an install button or promotional message to the side slide out navigation menu.

The navigation menu is a great place to promote your app’s installation, because users who open the menu will send information about their interactions with your app.

Please ensure that:

  • Avoid destroying important navigation content. Place the PWA installation promotion under other menu items.
  • Provide a short explanation of why PWA installation benefits the user.

Landing page

The purpose of landing pages is to advertise your products and services, so this is a good place to mass promote the benefits of installing your PWA app.

First, introduce the value proposition of your site, and then let visitors know what they can get out of the installation.

Please ensure that:

  • Highlight the features that are most important to your visitors, and highlight keywords that may lead them to your landing page. (Translator’s note: this may be the landing page that these keywords send users to.)
  • Since it’s the landing page. Once you’ve identified your value proposition, go ahead and install it and use rallying words!
  • Consider adding install promotions to apps where users spend a lot of time.

Install the Banner

Closed banner at the top of the page.

Most users have encountered banner installation in their mobile experience and are familiar with the interactive features that Banner provides. Use banners with caution, as they can be very disruptive to the user experience.

Please ensure that:

  • Wait for users to show enough interest in your site before displaying your banner. If your user turns off the banner, do not display it again unless the user triggers a conversion event that indicates greater engagement with your content, such as spending on an e-commerce site or signing up for an account.
  • Provides a brief explanation of the value of installing PWA in banners. For example, you can tell the difference between installing a PWA and a native app by mentioning that it takes up almost no storage space on the user’s device and doesn’t jump to the app Store but installs immediately.

Internal promotion model

Intrinsic promotion techniques interweave promotion with site content. This is usually a little more subtle than applying a promotion on the UI, which is a tradeoff. You want your promotion to be prominent enough that interested users may notice it, but it’s not worth it to degrade the user experience.

Internal feedback

An internal feedback install promotion that appears between news articles or other information card lists in PWA.

Your goal is to show users how they can more easily access the content they are enjoying. Focus on promoting features and functions that are useful to your users.

Please ensure that:

  • Reduce the frequency of promotions so as not to disturb users.
  • Provide users with the ability to turn off promotions. Remember that your users chose to turn it off

Booking or checkout process

Demonstrate installation promotions at the start or end of a series of processes, typically booking or checkout processes. If you show the promotion when the user has completed the process, then you can make it more prominent because the process is over.

Please ensure that:

  • Contains a related rallying phrase. Who would benefit from installing your app? Why is that? How does it relate to the user’s current flow?
  • If your brand has a unique offer for users who install your app, be sure to mention it here.
  • Make sure your promotion is separate from the next step in your process, otherwise it will negatively impact your process completion rate. In the e-commerce example above, note that the key checkout process operation is on top of the application installation promotion.

Registration, login or logout process

This type of promotion is a special case of the process promotion model described above, and promotional cards might be a better example.

These pages are usually only seen by participating users, where your PWA value proposition has already been established. There is usually not much other useful information placed on these pages either. Therefore, as long as it does not interfere with normal operation, the larger scale of propaganda language will only produce less destructive.

Please ensure that:

  • Avoid breaking the user’s flow in the registration form. If this is a multi-step process, you might want to wait until the user completes the process.
  • Promote the most relevant features to registered users.
  • Consider adding other install promotions to your app’s login area.

What mode should I use?

Electronic business

Many e-commerce brands have loyal customers. These customers want push notifications so they can get early access to new inventory and know when their goods will ship. They want to use apps on the home screen for quick access to directories and a full-screen experience.

Patterns applicable to e-business PWA include:

Product List page (PLP) or category page

This is a special case of the built-in feedback install promotion model, where the feedback is a list of products or categories.

Please ensure that:

  • Matches the look of the rest of the product list page.
  • It does not interfere with the user’s selection process.

Rich media and communications

Are you building the next social phenomenon or music streaming app? Inviting users to install your PWA when they first visit your PWA application is a great way to keep them coming back. With less storage space than native apps, your users will install your PWA and see if your product is right for them.

Patterns applicable to rich media and communication PWA include:

  • Banner pattern
  • The title pattern
  • Navigation mode
  • Landing page mode
  • The process model
  • The registration model

news

If you work on a content-oriented site, you probably have regular users who are interested in installing PWA.

Models applicable to news and social PWA include:

  • Banner pattern
  • The title pattern
  • Navigation mode
  • Landing page mode
  • Internal feedback mode
  • The process model
  • The registration model

The game

The modern Internet is the greatest distribution platform for games, allowing the biggest games to reach all over the world.

Modes suitable for PWA games include:

  • Banner pattern
  • The title pattern
  • Navigation mode
  • Landing page mode
  • Internal feedback mode
  • The process model
  • The registration model

Game over

This is actually a special case of the process UI pattern.

Most casual and super casual games end quickly. If your users are playing the game, this is a good opportunity to invite them to install it.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.