ru ua en
c l o c k
Business Empowerment with PWA
24 April 2020
blog

Business Empowerment with PWA

In this article, we will take a closer look at the functionality of Progressive Web Apps (PWA) and how they combine Internet access with the integration of devices with installed software.

Progressive Web Applications - A Modern Interaction Tool

The network is literally everywhere: on watches, smartphones, tablets, computers, in cars and televisions. Thanks to modern browsers, the software for displaying web content on all of these devices can be exactly the same.

Although browsers remain the primary way for users to interact, each device now has its own app store. On Android, Chrome OS, Mac, or Windows, you can install software designed for each device in the store.

The essence of the installed software is that the software will integrate with the device as expected by the user. Integration of the installed software allows you to restart the software, for example, using the icon on the main screen of the phone or in the Start menu. It also means that the user can switch between the software using the built-in activity switch, such as the alt-tab on Windows, or the application switcher on the phone.

Progressive Web Applications Clock Creative Lab

Progressive Web Applications (PWAs) combine Internet access with device integration with software installed. PWA can be installed on any device with a modern web browser, both on a mobile device and on a computer, as well as in stores such as Google Play.

Examples of Progressive Web Applications are Google Music on YouTube and Google Earth, as well as Twitter, Spotify, OYO and Etam.

In this article, we will talk in detail about the capabilities of Progressive Web Apps, product strategies for expanding PWA, advertising templates for managing PWA, the best examples of UX for developing installed applications that work reliably offline, and also show case studies of companies that created excellent PWA .

Installable Progressive Web Applications

Progressive Internet features:

  • The widest coverage of any platform, including all types of devices and screen sizes
  • Links that provide search indexing for organic traffic, sharing content and services between users

These advantages have made the Internet an ultramodern platform even on the desktop. For example, applications such as Google G Suite, Microsoft Office 365, Trello, Slack, Discord, InVision, and Lucidchart have long been used as desktop web applications.

However, on mobile devices, application stores are often seen as an application platform for users and developers. Why? From the developer's point of view, many features that require deep integration into the base OS were previously unavailable on the network.

Currently, the web initially supports almost any features that you might need, including:

  • Media and streaming access to media files, photos and videos from any camera on the device
  • Shape detection, including barcode and face recognition
  • Pop-up notification
  • Biometric authentication including face and fingerprints
  • Bluetooth and NFC
  • Native access to contacts
  • Native file system access
  • Raw clipboard access
  • Device movement and orientation, vibration, screen orientation (including lock)

And also, a lot more.

Benefits of Using Progressive Web Applications Clock Creative Lab

Benefits of Using Progressive Web Applications

Progressive Web Applications combine Internet access with device integration. Many enterprises have already begun to take advantage of PWA to ensure user experience. For instance:

  • Taxi apps such as Ola Cabs, Lyft, and Uber use web push notifications to alert passengers about ride status
  • Retailers and banks use offline browsing experience for those moments when there is no Wi-Fi access
  • Food delivery services such as Delivery Club use PWA due to ease of maintenance and cross-platform
  • PWA can be used immediately. Content from the PWA can be transferred to the URL, and the person receiving the URL can access the content, regardless of whether the PWA is installed or not

The user can install PWA and get device integration similar to a regular application, for example:

  • Available in familiar startup modes, such as the home screen and application bar
  • Offline experience separate from browser
  • Native device services such as application switcher and settings
  • In addition to installing from a browser, PWA can also be installed from application stores, including Google Play, the Samsung Galaxy Store and the Microsoft store in Windows 10

Further more detailed information on technical requirements and installation templates will be provided. And here, a brief overview of the installation from the browser on mobile, PC and from application stores.

Installation from the browser

As of early 2020, the installation of Progressive Web Applications is supported by all major browsers, although the installation process varies.

Smartphone Installation

  • Chrome & Edge on Android offers full control over the installation process (“Add to Home Screen” or A2HS option)
  • Users of Firefox, Samsung Internet and Opera can start the installation by clicking the icon in the address bar
  • Safari on iOS requires users to manually install PWA from the action menu

Desktop Installation

Desktop PWAs can be installed from Chrome and Edge on all operating systems, including Chrome OS, Linux, Mac, and Windows.

The user only needs to click the installation icon in the address bar. After installation, desktop PWAs can be launched from the application panel offline.

Installation from application stores

Google Play Store. Trusted Web Activity (TWA) actions let you publish innovative web applications to the Google Play Store. This allows users to find Progressive Web Apps along with any other application on the list.

Samsung Galaxy Store. Since the beginning of 2020, Samsung has been using the following process: send the URL to pwasupport@samsung.com, and Samsung will respond to begin the process of adding PWA to the Galaxy Store, including all necessary license agreements.

Advanced Web Application Development Strategies

The successful online fashion store ABOUT YOU created a progressive web application and offered to install it from a browser, in addition to their own application, which is available in the store. They found that users who installed PWA "generate sales five times higher than the average mobile user."

Progressive Web Applications can provide an excellent experience to users who will never install a native application. Installed PWAs typically weigh less than 1 MB, which is much less than the average size of a typical application.

These features are especially important for companies looking to grow in emerging markets where fast data transfer is important, memory is limited, and devices can consume a lot of power.

Clock Creative Lab pwa

Storage space still matters: the more we have, the more we use. In these markets, PWA can be a complement to the native application, especially for users who have switched from the native application to free storage.

Remember that even in developed markets, a large number of people use mid-range devices. PWA can help you connect in every cost effective way.

The following 4 strategies show how companies with different needs can use PWA to offer the best possible experience to as many users as possible.

Strategy 1. All-in network

Go all-in and rely solely on a progressive web application to provide great engagement for all users at the lowest cost. Thanks to a single code base and design, resources can be used to create new features and capabilities.

For enterprises that:

  • Do not have their own application
  • Had poor app experience
  • Or have their own application, which relies heavily on web content

Development:

Publish PWA to Play using Trusted Web Actions. This may be the most cost-effective solution for large Internet companies wishing to enter the Play Store.

Promotion:

Browser: promote the installation of PWA to all users.
Store: Publish PWA to Google Play using TWA.

Pros:

It can replace an outdated Android application that barely receives any updates or has a bad user interface. Tip. It is especially easy to replace an obsolete hybrid application with PWA.

Consolidation of all mobile development in a single code base.

Minuses:

Not suitable if features that are not available on the Internet are required.

Strategy 2: Complement the app with compatible PWA - ‘Lite App’

PWA Lite App

The terms "Lite" and "Go" were coined in order to distinguish a lighter, faster, but sometimes less specialized web application from a native application, for those companies that want to offer both.

For companies that already have an excellent native application, a progressive web application with the brand name “Lite” can help users who will never install a native application, for example, on mid-range devices.

Development:

Create a progressive web application. Publish your PWA in the store using Trusted Web actions. Use the name “Lite” to distinguish it from the native application.

Promotion:

Browser: promote the installation of your own application for users. If they refuse, promote the PWA using the Lite offer.
Shop: Publish PWA to Google Play using TWA and use a special name so that users can distinguish it from their native application and choose their preferred interface.

Pros:

Ideal for companies that have a great, but “heavy,” native Android app and want to offer the best experience for users of mid- and low-level devices and / or users in areas with poor internet connectivity.

Minuses:

You need to manage two lists in the store and use analytics to carefully segment users to promote the PWA or Native App from the browser.

Strategy 3: Separate applications for individual tasks

For many enterprises, a Progressive Web application can provide a basic reach and conversion rate, while a native application can offer additional services designed only for specific use cases and offer specialized functionalities.

For instance:

The retailer can offer the main store as a PWA and a separate magazine / blog application.
The insurance company can offer basic information and potential customer generation in PWA, as well as a separate application for chat / support experience / customer service.

Development:

Create a progressive web application. Publish PWA to a store using trusted web operations. Also, the creation and support of additional applications.

Promotion:

Browser: promote PWA to all users. Offer a custom in-house application only to users who have already completed certain tasks for converting a trigger and will benefit from additional features.
Store: have separate store entries for PWA published using TWA and a specialized native application, clearly indicating in the lists what is available in each application.

Pros:

Most suitable for enterprises that have a desire for direct conversion and require their own application only for niche services.

Minuses:

Not suitable for enterprises that do not have additional services.

Strategy 4: PWA as a tool to increase user base

PWA as a tool to increase user base

For companies that can offer comparable capabilities for native applications and advanced web applications, one way to increase the overall user base is to eliminate as many installation problems as possible.

The best option for a browser is to install PWA, since it only takes 2 clicks, and users don’t need to exit the browser at all. From a store that has only one list, the user does not need to choose between different versions.

Development:

Build a progressive web application
Building native applications

Promotion:

Browser: promote PWA to all users, except those who already have a native application installed. Tip. Use the getInstalledRelatedApps API to promote the installation of your PWA only to users who do not have their own application installed.

Pros:

Ideal to simplify the installation process, since the PWA installation is short and does not require a mouse click from a browser, and in a store with only one list, users do not need to choose between offers.

Minuses:

Moving PWA users to their own application can be difficult if there is little difference between the products.

Users on middle and lower level devices may not install the application due to memory problems or device compatibility.

It is required to support both PWA and native applications, while the difference in experience is small.

PWA installation requirements

Progressive Web Application Installation Requirements

The basic requirements for installing the Progressive Web App are: HTTPS service, Service Worker, and the web application manifest.

HTTPS:

All modern sites should use HTTP, regardless of whether they are PWA or not.

Service Worker:

Service Worker is the technology behind all PWA features, and they can perform many important tasks, including caching and providing offline capabilities. Although browser requirements vary, it is highly recommended that you have a Service Worker.

Web Application Manifest:

A Manifest file is a JSON file that informs how PWA works when it is installed. It must be linked to each page so that the user can click to install at any time. Almost all modern browsers have some level of support for this feature.

The manifest should include:

Short name and name: The short name is used on the user's home screen, in the launchpad, or in other places where space may be limited. The name is used in invite installation of the application.
Icons: Used in places such as the home screen, application launcher, application switcher, screensaver, etc. Chrome requires 192x192px and 512x512px icons and additional sizes are recommended, including 270x270 and 180x180. Other sizes are optional for those who want a perfect pixel icon.
Start_url: this is where PWA should start when starting from the home screen, and prevents the application from starting on the page on which the user was at installation.
Display: It is recommended to use “stand-alone” as the display mode. This will allow PWA to open separately in the browser and create the look of the native application.

Apple Touch Link

When iOS Safari users install the app, the displayed icon is called Apple Touch. Include the tag in the of the page to indicate which icon should use PWA. If it is not enabled, iOS generates an icon, taking a screenshot with the contents of the page.
IOS icons should be: 180x180 pixels or 192x192 pixels, and the background of the icon should not be transparent.

Checking

Use Lighthouse to run an audit and check what is missing to enable installation.

Publishing using trusted web resources

Using Trusted Web Activity (TWA), Progressive Web Apps can be integrated with the Android application and published to the Play Store. TWA must meet the Lighthouse PWA installation criteria and boot quickly with a performance rating of Lighthouse 80 or higher. They must also comply with the policies of the Play store, including rules for payments, in-app purchases, and other digital goods.

Learn more about how to publish PWA on Play using TWA, and check out tools like Llama pack and PWA Builder to help streamline this process.

Templates for promoting PWA installation from a browser

It is recommended that you use templates to customize your visual elements and design to match both brand identity and customer needs. For an overview of which browsers support fully customizable installation options, take a look at caniuse.com.

Installing a browser on Android Chrome

Chrome on Android allows you to fully adapt the interface requests. First, make sure that the default settings are not turned on, which brings up the mini dashboard.

Preventing the default mini dashboard in Chrome

The mini-information bar was only conceived as a temporary measure. This is not a good user experience, and since it is generated by the browser, there is no way to know when the right moment has arrived for it to appear. It just appears as soon as the site passes the installation criteria.
It is recommended that you do not display the mini dashboard, but use a custom prompt instead. Here are the details on how to do this.

Best examples of custom UI prompts:

Example: уsetting prompts - looks built-in to the user interface, contains value offers and some visual effects, appears at the right time, and can be re-detected throughout the user's journey.

The basic rule here is not to ask users to install PWA on their first visit. Instead, consider engaging interested users, for example: when they viewed certain key content or during their second visit.

Consider hinting across the entire site, but don’t interrupt the user. It’s best to tell when the user is either in the viewing mode, but not in the depth of a certain task, or when he has just completed a certain action, such as adding a product to your favorites, completing a purchase, reading a page.

It is also recommended to fix the “Set invitation” interface element in the sidebar or in the navigation header so that it is always available to the user without interrupting work.

Use moderate reasoning

It's no secret that people need motivation to complete any task. Motivate users to install PWA by explaining why they should do this and what they will get at the end.

In this case, it is important to talk about the benefits that the user will receive, and not just about the PWA features.

Bad examples of motivation

Bad examples of motivation to set PWA

“Don't worry about the phone’s memory. Our application will not take up much space. "

  • Avoid negative language
  • Highlight user benefits

“Install our application with a fast, reliable and easy interface.”

Do not talk only about the features of the application - users are not very technical. Think: what does this mean for the user?

Good examples of motivation

“Install our free web application on your desktop to have quick access to your favorites.”

  • Highlight user benefits
  • Talk about the user, not the application

Use visual effects to illustrate action

"Welcome! Use our web application to always have your orders with you, even when you're offline. ”

Mother Nature has built into the brain the ability to instantly recognize images. Visual elements (icons, drawings, illustrations) are a very important signal - they help illustrate the content and functionality so that the user's brain can quickly recognize and understand.

Turn on icons, such as the download icon or install button, to illustrate the user’s actions that they need to perform.

UI Integration

Pop-ups have become really popular for promoting installations, but each pop-up is an intrusive experience that is likely to be ignored or rejected by users.

Tips that are integrated into the user interface as part of the site are more likely to be accepted by the user.

iOS installation

iOS requires users to install the application from the browser menu. Guide users through this process with an installation prompt that explains what to do.

Desktop installation

Progressive Web Apps can be installed on the desktop in Chrome and Edge browsers on all operating systems. When the web application is available for installation, an icon will appear in the omnibox that will attract the user's attention.

Consider providing a user interface guide to make sure that users are fully aware that they can install PWA.

Intuitive and high-quality installation interface

An effective interface for the Progressive Web App, meets the expectations of users regarding the installed application. As an inspiration, you can use the best of modern UX both from web applications and from native applications, and, as always, be sure to listen to users and test your design ideas.

Install UX

Creating a PWA for installation begins with creating a name and icon. After installation, the PWA will look like any other icon on the home screen. If you also have a native application, you might think about how you differentiate. You can do this using the icons and the name of the application.

Icons

For Android, consider creating maskable icons that can adapt to any form of icon needed by the phone manufacturer. For iOS, use the usual iOS icon design guidelines, but note that iOS does not use the icons from the manifest file, so be sure to add the apple-touch-icon meta tag with the appropriate image.

Title

Using a brand name as a PWA name makes sense.

If the PWA uses local domains depending on the user's location - for example, example.co.uk, example.fr, consider including a country in the PWA name. Please note that there is no built-in internationalization in the web application manifest, so this requires a separate manifest for each domain.

Adding the suffix “Lite” to the name can be a good way to distinguish between PWA and your own application, if both are available.

Launch

When the application starts from the home screen, the default behavior of Android is to display a white screen until PWA is ready. The user can see a blank white screen lasting up to 200 ms. However, the splash screen can be customized to ensure a smooth start. Chrome for Android automatically adjusts the screen saver if the manifest contains:

  • Property name
  • The background_color property is set to the correct CSS color value
  • An icon array with a size of at least 512 x 512 pixels is indicated
  • Icon exists and is PNG

For iOS, there is currently no screensaver setting, so add meta tags to indicate pre-created screensavers.

Standalone interface

Progressive Web Applications launched using the home screen icon must open in offline display mode to ensure interaction that meets user expectations from native applications. This means that PWA starts without a browser panel at the top and is separated from the browser by cycling between applications.

Navigation

When developing, make sure that all key navigation elements are easily accessible to the user. In general, the lower part of the screen on mobile devices is considered more ergonomic: it is easier to reach by holding the device with one hand. Try to find key calls to action there, test the bottom navigation or pin modal pop-ups below (in the center of the screen).

Along with increased space, offline PWAs have less browser navigation capabilities. For example, in iOS there are no Back / Forward buttons, so implement additional navigation elements in PWA, such as the Back button, breadcrumbs, additional navigation bar, etc.

Color schemes

In Android, the browser panel can be changed according to the brand color of the application. It will also affect the offline mode, in particular the color of the system notification panel.

Reboot

Pull-to-refresh is an intuitive gesture popular in apps like Facebook and Twitter. For installed PWAs, consider setting up pull-up and scroll mode.

Exchange

When users are offline on both Android and iOS, the browser menu is not available for URL selection and simple sharing. Consider displaying additional buttons that launch the web resource API to bring up Android’s own sharing dialog and simplify the exchange of URLs using other applications, such as social networks or instant messengers.

Create a unique user experience

Providing the ability to work offline in the Progressive Web App means that the user interface is what they expect from their own applications, which often have some stand-alone features: at least the user interface is accessible and reasonable error messages are displayed if problems arise with network connection.

When determining your offline experience, consider using design thinking and brainstorming methods, which autonomous functions can be beneficial. Here are some examples of how you can be inspired to brainstorm:

Guidelines for offline users

When developing, think of a connection as something that is constantly changing its state. Especially when users can travel on an airplane, enter elevators, or simply experience connection problems. Providing the ability to work offline opens up new ways to interact with users and allows them to use PWA in all connection states.

When determining offline operation, consider the following questions:

Status change reporting

At the most basic level, at least inform users about a state change. Three elements that can be used to describe this change:

  • Copy - words to inform users about a state change
  • Icons are visual elements that help illustrate the current state
  • Colors - for highlighting offline content

It is recommended that you use at least two of the above to avoid confusion. When using colors, the shading of certain areas of a website can be interpreted not only as an offline state, but also as if some elements were missing. Thus, in order to clarify the situation, also use copyright to inform the user.

Copy has a few things to keep in mind:

Remember that users often do not have sufficient technical knowledge.Do not blame the system for a poor connection. Instead, simply confirm the status and inform users of the following actions.If the strategy includes an informal language, use it with caution, as this can undermine the credibility of PWA at such a sensitive and vulnerable time.

Do not use the following phrases:

“You are not connected to the Internet. Please reconnect and try again. "

"It looks like our server is down."

“Something went wrong on our part.”

“It seems that something has been disabled. Thank you for your patience while we get better. ”

Better to use:

"You are currently offline."

"We will try to restore you in 30 seconds."

“The page will load as soon as you get back online.”

"Click here to refresh the page."

  • Do not blame the user
  • Do not ask the user to fix things
  • Do not blame your own systems, as this affects the trust in the service
  • Use informal language with caution

Instead of this:

  • Confirm status as is
  • Assure the user that he does not need to “fix” anything
  • Explain what happens when the connection returns (whether the user needs to refresh or the page will reload automatically)

A popular user interface component to inform the user of a state change is a pop-up snack bar. It can appear anywhere in the user interface, but on each page, check to see if it blocks navigation items.

Offline experience

In addition to simply notifying the user that he is offline.

Reserve experience

This feature provides an alternative user experience when the connection is interrupted. Examples:

  • Show static offline page. This may contain alternative methods, such as finding a store, contact information for contacting the call center, contact form, which is sent when the user reconnects to the network
  • Be helpful and show relevant information from the user account. A travel company can provide tickets or boarding passes. Seller can show saved items or items in the cart
  • Entertain users with a game, puzzle or fun facts and take their time while they wait for the connection to return

Continue offline viewing

Caching can be used to allow users to continue browsing while they are offline.

  • Use pre-caching to allow the user to continue browsing important areas of the site, such as top categories or products for sale
  • Use runtime caching to make any previously viewed page available

Be careful that users know what content is available for viewing, provide appropriate navigation and information about possible actions.

Perform tasks offline

More advanced offline features allow users to carry out their current tasks, such as adding goods to the basket, saving to the wish list, filling out a form, or even filling out all the details when placing an order, up to payment. It is important to assure the user that he can continue his task, and his actions will not be wasted, despite the fact that he is not online.

When the connection returns, notify the user of the status change and update the contents if there are any changes. If the user can remain in their current context, reload the page automatically. If the context cannot be saved, give the user control to refresh the page with the button.

Create meaningful notifications

Progressive Web Apps support push notifications

Progressive Web Apps supports push notifications on Android with or without user installation. Notifications are of great value to the business: they increase the number of repeat visits and, accordingly, sales and conversions.

But a bad notification experience can affect customer relationships. Asking users to sign up for web notifications on their first arrival will often have very low rates.

Instead, wait until users understand the context and see the benefits of receiving notifications before requesting permission.

Obtaining permission

An important part of the notification experience is requesting permission for notifications. The best examples are similar to the installation prompt.

Appear when appropriate

The basic rule is not to ask users for permission to send notifications when they first visit the site. Request permission at the right time when notifications can benefit. Use the preliminary permission of the user interface and customize text, visual effects and style.

Consider hinting across the entire site, but don’t interrupt the user. It’s best to tell when the user is either in the viewing mode, but not in the depth of a certain task, or when he has just completed a certain action (he added the product to his favorites, completed the purchase, finished reading the page or finished the game).

Also, fix the notification permission hint user interface element in the sidebar or navigation header so that it is always available to the user without interruption.

Use reasoned sentences

Configure the value of the notification offer in accordance with the context of the current page and the actions that the user performs there. For example: on a product page, a valuable offer might be “receive a notification when this product becomes available.”

Sending notifications

КEach notification sent must be timely, accurate and current. This means receiving it at a time when it is important for the user, and displaying specific information that is relevant to a particular user.

Each notification consists of three high-level elements.

Copy - what the message says and how.

  • Copy consists of a PWA name, message header, and message content
  • The text should be clear and concise and contain no more than 40 characters
  • Do not duplicate the application name in the text (it is already in the header)
  • Ensure that all information displayed is relevant to the user

Visual Elements - PWA icon or other visual objects.

  • The PWA icon is required as it visually informs the user which application is sending the message
  • Sometimes an image can be added to visualize other information of the main message: for example, a photo of the sender, a photo of an item in stock, or a photo of a new bank card ordered by the user
  • Image and icon must not duplicate each other

Actions (optional) - what action the user can take.

  • It is important here to allow users to perform some actions based on the information received without opening the application.
  • Do not duplicate actions already built into the Android notification interaction system, for example, the standard actions “Click to open” and “Refuse”

Measurement of impact and the need for PWA optimization

A well-designed Progressive Web App should increase engagement, accelerate page transitions and accelerate conversion through offline mode and installation options. So what is the best way to measure this?

Because PWA includes several different technologies that can be used independently, it is recommended that you measure each function individually to provide clear data and a complete picture of what needs to be optimized.

Installation speed measurement

Creating an installable Progressive Web App is a powerful feature, but its success is also very dependent on the UX templates used for promotion - just like with invitations to install native applications.

So make sure you have the right analytics to track installation speed and engagement / conversion ratios so that stream and UX can be optimized.

In Chrome and Microsoft Edge, the entire funnel can be tracked as follows

Step 1

Measure the number of users with the ability to install.

To do this, study beforeinstallprompt to measure the number of users who can install the application.

Step 2

Measure the number of users who click on the user interface installation prompt.

This will depend on how the prompt method is called, but it is likely to be associated with the click UI element on the page.

Step 3

Measure the number of users who accept / refuse installation.

After the user clicks on the user interface installation prompt, a chrome installation popup window will appear. Measure, accepted or rejected by the user in the userChoice property.

Step 4

Measure the number of users that have installed.

A successful installation can be measured using appinstalled.

For other browsers

For other browsers that support beforeinstallprompt, similar analytics can be integrated.

Those who don’t do this (like Safari) have a harder time tracking PWA installations. In these cases, it is recommended that you at least measure the use of the installed PWA, as described in the next section.

Measurement of installed PWA

It is important to understand the behavior of users who have installed the Progressive Web App.

The first thing to keep track of is how many users open PWA on the home screen (or the PWA icon in general). This can be done by adding a tracking parameter to the launch URL in the manifest so that the home screen traffic can be detailed in your analytic package.

Access to PWA is also possible when the user clicks on any link, for example, from a search engine or through web publications. Therefore, it is also important to dynamically determine with javascript whether users are offline (which indicates the use of the installed PWA), and then use this as a variable or dimension to track analytics.

Using TWA

When the Progressive Web App is published to the Play Store using Trusted Web operations, many relevant metrics regarding installation speed become available directly from the store’s console.

In addition to this default tracking, there are several ways to transmit information to TWA through the request parameters URL, referrer URL or request headers, and all of them can be used to enable additional tracking.

Usage in Trusted Web Activity is recorded using the regular website analytics code, but be sure to add the tracking option to the default TWA URL to enable filtering for TWA users in analytics.

Application Campaign Attribution

Application campaigns can be used to promote PWAs published in stores using Trusted Web actions.

To set attributes, use campaign attribution on Google Play or the built-in SDK for analytics applications, for example, Google Analytics for Firebase.

To attribute more than just installation, campaigns are a bit more complicated, because what's happening in the web part (TWA) is separate from the main part (what’s installed). Here's a concrete example of how this can be done using AppsFlyer by passing tracking parameters through URLs or headers combined with tracking between servers. Many App Analytics packages support server-to-server integration, which can be used to accurately track TWA.

Offline measurement and caching

Application Campaign Attribution

Offline

Offline use can be measured by recording analytical pings offline and then playing them back when reconnecting.

For Google Analytics, this is easily accessible in the module for the Workbox library and means that all analytic events will continue to be tracked, even when the user goes offline.

It may be useful to add explicit tracking when a user disconnects or connects to the network using the appropriate browser events. This method allows you to measure how many users went offline and can be restored, as well as how much time is spent offline (by calculating the time between online and offline events and sending it to your analytics). Keep in mind that there will be many offline only if you have a good offline experience.

Caching and Conversion

Service worker can bring more conversions than just offline.

Therefore, another way to measure the impact of improved network resilience and offline is to compare conversion and engagement rates with and without caching of service workers, since it can be assumed that a more reliable and resilient website will be better converted. Results should be filtered by operator and mobile communications to see the effect most accurately.

Caching and speed

Caching and speed PWA

Well-defined caching strategies through Service worker can make a site faster on repeated downloads. Acceleration with a Service worker can be easily measured using conventional speed tools such as Lighthouse or Webpagetest.org, measuring once with a Service worker and comparing both once. Remember that Service worker is installed at the first load and, as a rule, has the greatest impact on the loading of pages after the first, so be sure to measure the speed at repeated downloads or with a pre-prepared cache.

For high data accuracy, use the selected analytical package, filter performance indicators for repeated downloads or returning users, and compare the data before and after the start of the service worker.

Another option that does not require additional tuning is to simply monitor performance under normal conditions using the Chrome User Report before and after launch (which contains the first and repeated downloads and therefore should show a speed increase due to Service worker caching).

Measure Push Notifications

Similar to installation (and basically most browser prompts), it is strongly recommended that you do not directly invoke the default permission prompt, but rather use the user interface in advance to give the user a real value proposition why they should enable this feature.

Tracking and measuring the entire funnel is especially important for notifications, because poor implementation can easily be perceived by users as spam and annoying, which can lead to a complete rejection of the Progressive Web App. Therefore, we recommend that you carefully study the engagement rates of users who receive notifications in order to see what level of failure.

The measurement is as follows:

Step 1

Measure the number of users eligible for push notifications.

Determine if a push notification is available in the browser using the discovery function.

Step 2

Measure the number of users who click on the notification user interface.

This will depend on how exactly this feature will be offered to users.

Step 3

Measure the number of users who accept / refuse permission to push notifications.

After the user accepts the UI notification prompt, Chrome’s permission will be activated.

Step 4

Measure the number of users receiving push notifications.

Whenever a push notification is sent from the server side, a push event is triggered by a client-side service worker. Use this event handler to measure how many users have successfully received push notifications.

Step 5

Measure the number of users who work with the notification.

Whenever users click on a notification (or one of the actions in it), a notification event is fired. Add analytic code here to track user interactions. Similarly, there is a notification close event to do the same for users who reject a notification without interacting.

Step 6

Measure conversion rate.

Most of the time when a notification is clicked, it opens the PWA. The code for this can be found on the Internet, and it can be used to add tracking parameters in the URL to mark the session as started from a notification (for example, through utm_source in Google Analytics). However, depending on the custom code of the analytics package, clickotification can be used instead of URL parameters in the event handler.

Examples of quality implementation of PWA

Weekendesk turns its mobile site into a progressive web application and receives 2.5 times more conversions. Weekendesk is the number 1 weekend and short theme trip and offers the best user experience through their website and native app.

With over 60% of web sessions conducted from mobile devices and an outdated Android application, Weekendesk has a strategic interest in offering its customers the best mobile experience while combining their web development and application development.

Weekendesk is gradually adding state-of-the-art web features to its mobile site, turning it into a true, progressive web application that makes it as easy to use as a native application.

Thanks to the Service Worker, the site becomes faster and offline, and the offer to install PWA brings more comfort to users who are already involved.

After converting their site to PWA, Weekendesk took advantage of Trusted Web Activity, which allowed them to publish PWA directly to the Play Store.

Results:

For users: the same convenient and high-quality experience is available everywhere: on the Internet and in the application.

For the product development team: faster implementation of new features and lower costs thanks to support for a single code.

For business: 2.5-fold conversion, when users come from the installed PWA, the site is 30% faster, more active in page views (+ 108%) and time spent on the site (+ 85%).

Etam, pioneer in the next generation e-commerce, uses PWA to improve mobile applications

Etam, the lingerie brand, uses the Progressive Web App to improve user experience on mobile devices.

Etam understands the importance of optimizing online communication with customers, especially on mobile devices. Over 70% of sessions take place on smartphones. The Etam native application is aging, so the team decided not to redo it, but instead focus on improving the online experience.

Developers initially focused on speed, optimizing the code. Then they implemented an architecture that remembers the static content of the page, including the client area. This, in particular, allows the user to have his own loyalty card and a list of favorites, even if he is not online.

Etam makes it easy for users to log in using the WebAuth protocol with fingerprint login. Etam also simplifies purchases in just 3 clicks using Google Pay.

Etam continues to innovate by publishing its PWA on the Google Play Store using Trusted Web Activity (TWA). Thus, Etam is available in the Google Play store for users who are looking for a brand, and to manage the code, one team is enough to ensure smooth operation that can be quickly updated.

Results:

Work with speed allowed to receive repeated loading time less than a second.Users who opened the installed PWA had a conversion rate of 30% higher than other mobile users. Improving the mobile site also benefited from several devices, as the desktop conversion rate also increased.

Conclusions

Now you know what PWAs are capable of, how to create them together with native applications, how to design the installation interface, how to measure the impact and real cases of use.

When thinking about PWA, TWA, native applications, or any digital product, always keep in mind: this way you can reach as many people as possible with the highest possible efficiency and at the lowest possible cost.

Are you ready for leadership on the internet?

Let's discuss the prospects for promoting your site!