Pwas The Future of The Mobile Web Vol2

— Contents 5.
Designing Installed Experiences

Install UX
Standalone UI
— Foreword 6. Designing Reliable Experiences

User First Principles For Offline
1. Installable Progressive Web Apps
Informing About The Change Of State
The Web Has Two Distinguishing Superpowers Providing An Offline Experience
The Superpowers Of The Web & Native Applications Combined
Install From The Browser 7. Designing Meaningful Notification Experiences
Install From App Stores Asking For Permission
Sending Notifications
2. Product Strategies For Progressive Web Apps
Strategy 1. All-In On Web 8. Measuring Impact
Strategy 2: Complement Native With A ‘Lite App’ Measuring Install Rates
Strategy 3: Separate Apps For Separate Tasks Measuring Installed Users
Strategy 4: Low Friction, High Installed User Base Measuring Offline & Caching
TWA Usage And Events
3. Requirements For Installability Measuring Push Notifications
Installable Progressive Web App Requirements
Publishing In Play With Trusted Web Activities 9. Case Studies
Weekendesk
4. Patterns For Promoting PWA Install From The Browser Etam
Chrome Android
iOS — Closing
Desktop — Resources & Tools
— Foreword
By PJ McLachlan
The web is literally everywhere: on watches, smartphones, tablets, desktops, cars, TVs
and digital signboards. Thanks to browsers, the software to display web content on all of
these devices and screen sizes can be exactly the same.
While browsers remain central for users, every device now has its own app store, which
has changed user behavior. On Android, Chrome OS, Mac or Windows, users have learned
that the device’s store is where they can install software that’s made for their device.
The essence of installed software is a commitment that the software will integrate with
the device in ways that the user expects. The integration of installed software makes it
easy to launch software again, for example with an icon on the phone’s home screen or
in the start menu. It also means the user can toggle between software with the device’s
built-in activity switcher such as ‘alt-tab’ on Windows or the app switcher on a phone.
Progressive Web Apps (PWAs) combine the reach of the web with the device integrations
of installed software. PWAs can be discovered and installed on any device with a modern
web browser, on both mobile and desktop, and also in stores such as Google Play. No
matter how it was discovered, if the software offers the user repeatable utility and a
PWA: The Superpowers of the Web
great experience, the user can choose to install it and integrate the experience into their
& Native Apps Combined
device - just like any other app.
3
Examples of Progressive Web Apps include Google’s YouTube Music and Google Earth,
and industry leading experiences including Twitter, Spotify, OYO and Etam.
For more background on building on the fundamentals of Progressive Web Apps, check
out Volume 1 in this ebook series.
This ebook, Volume 2 in the series, will cover: the capabilities of Progressive Web Apps,
product strategies for deploying PWAs, promotional patterns for driving installs of PWAs,
UX best practices for designing installed experiences that work reliably offline and have
meaningful notifications, guidelines on how to implement analytics to measure business
impact and case studies from businesses that have built great PWAs.
4
Chapter 1
Installable
Progressive Web
Apps
By Daniil Matveev
The Web Has
for both users and developers. Why is this? From a
developer perspective, many of the capabilities that
Two Distinguishing
require deep integration into the underlying OS were
previously unavailable on the web.
Superpowers Nowadays, the web natively supports almost any

capability that an application might need, including:
1. The widest reach of any platform, spanning every • Media & streaming media access, capturing photos
kind of device and screen size. & videos from any camera on the device
• Shape detection including barcode & face detection
2. Links that enable search indexing for organic
• Push notifications
discovery and trivial sharing of content and services
• Biometric authentication, including face & fingerprint
between users.
• Bluetooth & NFC
These superpowers have made the web unstoppable as • Native access to contacts
a platform on desktop. For example, productivity apps • Native filesystem access
and suites such as Google’s G Suite, Microsoft Office 365, • Raw clipboard access
Trello, Slack, Discord, InVision, and Lucidchart have been • Device motion and orientation, vibration, screen
around for a long time as desktop web apps. orientation (including lock)
However, on mobile, instead of the web, native app And much, much more… be sure to check out the Web
stores are often thought of as the go-to app platform Capabilities (Fugu) project for a full list of what’s cooking.
6
The Superpowers
PWAs can be discovered in the web browser and used
immediately. Content from PWAs can be shared with a
Of The Web & URL, and the person receiving the URL can access the
content whether they have the PWA installed or not.
Native Applications If the user chooses, they can install the PWA, and get the
Combined device integrations they expect from a native app, such as:
• Accessible from familiar discovery & launch surfaces

Progressive Web Apps combine the reach and linkability for their device, like the homescreen and the app tray.
of the web with the device integrations of native • Standalone experience, separate from the browser.
applications. Many businesses have already started taking • Native device services such as the app switcher and
advantage of PWAs to provide great user experiences. settings.
For example:
In addition to installing from the browser, PWAs can also be
• Taxi apps like Ola Cabs, Lyft and Uber, are using web installed from App Stores including Google Play, Samsung
push notifications to alert their passengers about ride Galaxy Store & the Microsoft store on Windows 10.
statuses.
• Retailers and Banks are embracing offline browsing In the chapters ‘Requirements For Installability’ and
experience for those “whoops, I thought there’d be ‘Patterns For Promoting Pwa Install From The Browser’
Wi-Fi on the train” moments. more detail on the technical requirements and design
• Food delivery services, such as Delivery Club, are patterns for installation will be provided. For now, here
deploying PWAs due to ease of maintenance and cross- is a brief overview of the install experience from the
platform availability. Browser on Mobile and Desktop and from App stores.
7
Install From The
Browser
As of early 2020, Progressive Web App install is
supported by all major browsers, although the install
experience varies.
Mobile
• Chrome & Edge on Android offer full control over the
install prompt experience (also sometimes referred to
as “Add to Home Screen” or A2HS).
• Firefox, Samsung Internet, and Opera users can trigger
install by tapping on an address bar icon.
• Safari on iOS requires users to manually install PWAs
from the actions menu.
Default experience on Default experience on

Chrome Android Android Firefox
See the mini info-bar at the See the ‘house’ icon which includes
bottom of the screen a plus symbol in the browser bar
8
Install From App
Desktop
Desktop PWAs can be installed from Chrome and Edge
Stores
on all operating systems, including Chrome OS, Linux,
Mac, and Windows.
Users can tap an install icon in the address bar. Once

installed, desktop PWAs can be launched from the App • Google Play Store. Trusted Web Activities (TWA) allow
tray into a standalone experience. Progressive Web Apps to be published in the Google
Play Store. This allows users to discover Progressive
Web Apps alongside any other app listed.
• Samsung Galaxy Store. As of early 2020, Samsung

is using the following process: send the URL to
Chrome Desktop Install Prompt
See the plus symbol inside the circle on the right hand side
pwasupport@samsung.com and Samsung will respond
to start the process of getting the PWA added into
Galaxy Store, including all the necessary licensing
agreements.
9
Chapter 2
Product Strategies
For Progressive
Web Apps
By Daniil Matveev
Businesses often report that native app users are the PWAs generally weigh less than 1 MB, which is far less
most valuable and loyal, with a higher customer lifetime than the average size of a native application. And
value (LTV) when compared to web users. building with the web makes it easier to support the long
tail of different screen sizes and device capabilities.
Are native app experiences so much better than web
experiences, or is it simply that the most loyal users These features are particularly important for businesses
are more likely to install an app? Data from various with growth ambitions in emerging markets, where data
businesses across the globe suggest the latter. plans are expensive, storage space is limited and devices
can be low powered.
The successful fashion online shop

In developed markets, there is a wide range of devices
ABOUT YOU deployed a Progressive
and more people on high end flagship phones. However,
Web App and offered install from the
storage space still matters: the more we have, the more
browser, in addition to their native
we use. In these markets, a PWA can be a complement
application which is available in
to a native app, in particular for users that have churned
Play. They found that users who had
from a native app to free up storage.
installed the PWA “generate sales five
times higher than the average mobile
user” and that they “behave similarly Remember that even in developed
to users of our native app”. markets, there are a large number of
people on mid-low tier devices. A PWA
can help you reach everyone, in a cost
Progressive Web Apps can provide a great experience effective manner.

to users who would never install a native app. Installed
11
While acknowledging the benefits that PWAs offer,
businesses might still have concerns about how to best
to deploy them in a manner that complements their
existing native applications.
The following 4 strategies reflect how businesses with

various needs can use PWAs to offer the best possible
experience to the largest number of users, in the most
cost effective manner.
12
Strategy 1:
All-In On Web
Go all in and rely solely on a Progressive Web App to
deliver a great experience to all users, cost effectively.
With one code base and design, resources can be focused
on building new features and experiences.
13
For businesses that: Strategy 1
• Don’t have a native app
• Or have a poor native app experience
• Or have a native app that relies heavily on web content
Development:
• Build a PWA
• Publish the PWA in Play using Trusted Web Activities. This may be the most cost-effective solution for
web-heavy businesses looking to expand into the Play Store
Promotion:
• Browser: Promote PWA Install to all users
• Play: Publish the PWA in Play using TWA
Pros:
Allows businesses that don’t have an Android app to offer an installable experience
Can replace an outdated Android app that barely receives any updates or has a poor user experience.
Tip. It can be especially easy to replace a dated hybrid app with a PWA
Consolidate all mobile development into one single code-base
Cons:
Not suitable if functionality not available on the web is required

14
Strategy 2:
Complement Native With
A ‘Lite App’
The terms ‘Lite’ and ‘Go’ were coined to differentiate the
lighter, faster, however sometimes less specialized web-
based experience from that of a native app, for those
businesses that are looking to offer both.
For businesses that already have a great native app, a

Progressive Web App with ‘Lite’ branding can and help
reach users who would never install the native app, such as
those on mid-low end devices.
15
Development: Strategy 2
• Build a Progressive Web App.
• Publish a PWA in Play using Trusted Web Activities. Use ‘Lite’ naming to differentiate from the native
application.
• Build native applications.
Promotion:
• Browser: Promote native app install to users. If they decline, promote the PWA using a ‘Lite’ value
proposition.
• Play: Publish the PWA in Play using TWA, and use ‘Lite’ naming so users can differentiate from the
native app, and choose their preferred experience.
Pros:
Ideal for businesses that have a great, but “heavy” native Android app, and are looking to offer better
experience for users of mid-low-end devices and/or users in poor internet connectivity areas.
Cons:
Requires managing 2 listings in Play, and using analytics to thoughtfully segment users for promotion
of PWA or Native App from the browser.
16
Strategy 3:
Separate Apps For Separate Tasks
For many businesses, a Progressive Web App can provide
the primary experience covering main conversion goals,
while a native app might offer added value native services
tailored only for specific use cases and offer specialized
functionality.
17
For example: Strategy 3
• A retailer might offer the main shop experience as a PWA, and a separate magazine/lifestyle native app.
• An insurance company might offer the main information and lead generation as a PWA, and a separate
chatbot/assistive experience/customer service native app.
Development:
• Publish a PWA in Play using Trusted Web Activities.
• Also build and maintain added value native apps.
Promotion:
• Browser: Promote the PWA to all users. Only offer the specialized native app to those users who have
already completed certain trigger conversion goals and would benefit from the additional features.
• Play: Have separate Play store entries for the PWA published using TWA and the specialized native app,
making clear in the listings what is available in each app.
Pros:
Most suitable for businesses that have straightforward conversion goals and only require a native
application for niche services.
Cons:
Not suitable for businesses that don’t have added value services.
18
Strategy 4:
Low Friction, High Installed
User Base
For businesses that can offer a comparable experience
across native applications and Progressive Web Apps, one
way to grow the total installed user base is to remove as
much install friction as possible.
From the browser, the least install friction is PWA install,

as it only takes 2 taps and users don’t need to leave the
browser at all. From Play, having just one listing, the native
application, means the user doesn’t need to choose
between different versions.
19
Development: Strategy 4
• Build native applications.
Promotion:
• Browser: Promote the PWA to all users, except those who already have the native app installed.
Tip. Use the getInstalledRelatedApps API to promote install of your PWA only to users that don’t have
the native app installed. See web.dev/get-installed-related-apps for details.
• Play: only list the native application.
Pros:
Ideal to reduce install friction, as the PWA install funnel is short and doesn’t require clicking out of
the browser, and in Play with only one listing users don’t need to choose between offerings.
Cons:
Moving PWA users to the native application may be challenging when there is little differentiation
between products.
Users on mid-range and low-end devices discovering via Play may not install due to storage anxiety
or device compatibility.
Requires maintaining both PWA and native applications when there is little difference in experience
Cost could be reduced by going all-in on web (strategy 1).
20
Chapter 3
Requirements
For Installability
By Martin Schierle
Installable
Web App Manifest:
The Manifest file is a JSON file which informs how the
Progressive Web
PWA acts when it's installed. It needs to be linked from
every page, so that the user can tap to install at any time.
App Requirements
Almost all modern browsers have some level of support
for it.
The manifest should include:

The basic requirements to make a Progressive Web App
installable are: serving over HTTPS, a service worker, and • Short_name and name: The short_name is used on
a web app manifest. the user's home screen, launcher, or other places
where space may be limited. Name is used in the app
Served over HTTPS: install prompt.
It’s 2020. All sites should be using HTTPs whether they • Icons: used in places like the home screen, app
are PWAs or not! launcher, app switcher, splash screen, etc. Chrome
requires a 192x192px and a 512x512px icon and
Service worker: additional sizes, including 270x270 and 180x180 are
Service workers are the technology that underpins all recommended. Further sizes are optional for those
PWA functionality, and they can do many powerful things that want pixel perfect icons.
including caching and providing offline experiences. • Start_url: this is where the PWA should start when it is
Though browser requirements vary, it is highly launched from the homescreen, and prevents the app
recommended to have at least a working service worker from starting on whatever page the user was on when
installed.
with a fetch handler.
22
• Display: It is recommended to use ‘standalone’ as Audits
the display mode. This will allow the PWA to open Use Lighthouse to run audits and check what is missing
separately to the browser and give the look and to enable Installability.
feel of a native app.
There are other items that can be included in the

manifest, which you can read here. The chapter
‘Designing Installed Experiences’ will cover some UX
best practices for icons and naming.
Apple Touch Link

iOS is a little different. When iOS Safari users install,
the icon that appears is called the Apple touch
icon. Include a <link rel="apple-touch-icon" href="/
example.png"> tag in the <head> of the page to
specify what icon the PWA should use. If this is
not included, iOS generates an icon by taking a
screenshot of the page content. In other words,
instructing iOS to download an icon results in a
more polished user experience. iOS icons should be:
180x180 pixels or 192x192 pixels, and the background
of the icon should not be transparent. This code lab

shows exactly how to do this.
23
Publishing In Play
With Trusted Web
Activities
Using Trusted Web Activities (TWAs), Progressive
Web Apps can be integrated with an Android app
and published in the Play Store. TWAs must meet the
Lighthouse PWA installability criteria and load fast,
with a Lighthouse Performance score of 80 or better.
They must also comply with Play store policy including
policies for payments, in-app purchases and other
digital goods.
Learn more about how to publish a PWA in Play using

TWA here, and check out tools like Llama pack and PWA
builder that help simplify this process.
24
Chapter 4
Patterns For
Promoting PWA
Install From The
Browser
By Anna Potanina
Promoting Progressive Web App installation should happen at the
right moment in the user journey.
The best practice is to use to customize visuals, copy and design

to align with both the brand identity and customer needs. For an
overview on which browsers support a fully customizable install
prompt experience, take a look at caniuse.com
26
Chrome Android Best practices for customized UI prompts:
Chrome on Android allows fully customizable UI

prompts. First, make sure to prevent the default
experience, which triggers the mini info-bar.
Preventing the default mini info-bar on Chrome

The mini info-bar was only intended as a temporary
shim. It’s not the best user experience, and since it’s
generated by the browser, it has no way to know when
it is the right moment to appear. It just shows up as
soon as the site passes installability criteria and a user
engagement measure.
The recommended best practice to stop the mini info-

bar from showing, and instead use a customized prompt.
Here are the details on how to do that. Example: Install prompts

Looks and feels native to the UI, contains value
proposition and some visuals, appears at the right time,
can be re-discovered throughout the journey

27
Appear when appropriate Use a value proposition
The ground rule here is not to ask users to install the It is no secret that people need motivation to complete
PWA on their first visit. Instead, consider prompting any task. Motivate users to install the PWA by explaining
engaged users, for example: when they have viewed why they should do that and what they will get at the
certain key content, or on their second visit. end.
Consider making the prompt discoverable throughout The important thing about any value proposition is to
the site, however make sure not to interrupt the user talk about benefits that the user is going to get and not
and break the flow. It is better to prompt when the user only the PWA features.
is either in browsing mode and not deep in a specific
task, or when they have just completed a certain action,
such as added a product to favorites, completed a
purchase, finished reading the page or finished the
game.
It’s a good idea to also fix the Install prompt UI element

in the side drawer or within the navigation header,
so that it’s always available to the user, without being
interruptive.
28
Don’t Do
“Don’t worry about the phone “Install our free web app on your
space! Our app won’t take up too homescreen to have quick access to
much” your favorites”
Avoid negative wording Highlight user benefits
“Install our app which is fast, reliable Customize the message depending
and light” on where the user is in the funnel
Don’t talk about only the app “Welcome back! Get our web app to
features - users are not very always have your bookings with you
technical. Consider: what does it even when you are offline”
mean for the user?
Highlight user benefits
Customize the message depending

on where the user is in the funnel
Talk about the user, not about the

app
29
Use visuals to illustrate action
Mother nature has built into the brain the ability to
recognize images instantly. Visuals (icons, pictures,
illustrations) are a very important signal - they help
illustrate the content and functionality so that the user's
brain recognizes and understands faster.
Include icons such as a download icon or an install

button to illustrate to the user the action they should
take.
Integrate with the UI

Pop-ups have historically become really popular for
promoting installs, however every pop-up is an intrusive
experience which will likely get ignored or dismissed by
users.
Less intrusive experiences lead to higher engagements. Pop-ups and overlays usually Native look and feel of the
get ignored and dismissed prompt creates a less intrusive
Prompts that are integrated within the UI as part of the experience
site are more likely to be well received by a user.
30
Read more about promotional patterns and see more
options of when the prompt can appear in the user Reminder: don’t promote your PWA to
journey and how it can look here. users that already have the native app
installed! This was mentioned earlier,
but is important so it’s being
mentioned again here!
Use the getInstalledRelatedApps API to

promote PWA install only to users that
don’t have the native app installed.
See web.dev/get-installed-related-apps
for details.
31
iOS
iOS requires users to install from the browser menu. Guide users through this process with an install
prompt that explains what to do.
Example: Install explanations for iOS
32
Desktop
On desktop, Progressive Web Apps can be installed in
Chrome and Edge browsers on all operating systems.
An icon appears in the omnibox when the website is
installable, and will wiggle to draw users’ attention.
Consider providing UI guidance to make sure users are

fully aware that they can install the PWA.
Examples of Install prompt on Desktop

33
Chapter 5
Designing
Installed
Experiences
By Anna Potanina
Designing a great Progressive Web App experience that meets
users’ expectations of an installed app might seem like a
brand new activity, but actually it should be quite familiar. UX
best practices from both web and native apps can be used as
inspiration, and as always, make sure to listen to users and test
your design ideas.
35
Install UX
so to do this a different manifest is required for each
domain. Adding a suffix “Lite” to the name may be a
good way to differentiate between the PWA and the
native app, in case both are available.
Designing Installed PWAs starts from the naming and the
icon. Once it’s installed, the PWA will look like any other
Launching
icon on the home screen. If you also have a native app,
you might want to think about how you differentiate. You When the app is launched from the homescreen,
can do that with the icons and the name of the app. Android's default behavior is to display a white screen
until the PWA is ready. The user may see a blank, white
Icons screen for up to 200ms. However, the splash screen can
For Android, consider designing maskable icons that be customized to provide a smooth launch experience.
can adapt to any icon shape required by the phone Chrome for Android automatically customizes the splash
manufacturer. Read more about designing adaptable screen so long as the manifest contains:
icons here. For iOS use regular iOS icon design guidelines,
but note that iOS does not use the icons from the • The name property.
manifest file, so make sure to add an apple-touch-icon • The background_color property is set to a valid
meta tag with the proper image. CSS color value.
• The icons array specifies an icon that is at least
Naming 512px by 512px.
Using the business name as the name of the PWA makes • The icon exists and is a PNG.
most sense. If the PWA uses local domains based on
user location - e.g. example.co.uk, example.fr, consider For iOS there is no splash screen customization at
including the country in the PWA name. Note that there the moment, so implement meta-tags to specify pre-
is no built-in internationalization in the web app manifest, generated splash screens.
36
Standalone UI
Progressive Web Apps launched from the homescreen Designing for standalone:
icon should open in a standalone display mode, to
provide the experience consistent to what users have
come to expect from native apps. This means the
PWA launches with no browser bar on the top, and is
separate from the browser when cycling through the app
switcher.
Navigation
When designing for a longer screen, make sure all key
navigation items are easily accessible for the user.
In general, the bottom of the screen on mobile devices
is considered to be a more ergonomic location: easier Modal pop-ups Form completion with Bottom navigation
anchored to the bottom bottom-anchored panel
to reach when holding the device with just one hand. navigation
Consider locating there the key calls-to-action, testing

bottom navigation or anchoring modal pop-ups on the
bottom (vs in the center of the screen).
37
Along with an increased above the fold space, PWAs Color schemes
in standalone mode have fewer browser navigation On Android, the browser bar can be changed to match
capabilities. For example, on iOS there are no your brand color. This will also affect the standalone
‘’Back”/“Forward” buttons, so implement additional mode, specifically the color of the system notifications
navigation elements within the PWA such as a “Back” panel.
button, breadcrumbs, additional navigation bar, etc.
Example browser mode:
Brand-colored browser bar and Brand-colored system

system notifications panel notifications panel
Adding “Back” button for

standalone mode
38
Refreshing
Pull-to-refresh is an intuitive gesture popularized by
native apps such as Facebook and Twitter. For installed
PWAs, consider customizing pull-to-refresh and
overscroll behavior. Read more here.
Sharing
When users are in standalone mode on both Android
and iOS, the browser menu isn’t available to select the
URL and easily share. Consider displaying additional
buttons that trigger the Web Share API to bring up the
native Android share dialogue and make it easy to share
URLs via other apps, like social networks or messengers.
Adding “Share” button for the

standalone mode
39
Chapter 6
Designing
Reliable
Experiences
By Anna Potanina
Providing an offline experience in a Progressive Web App means
a user experience that is consistent with what they expect from
native applications, which often have some offline functionality:
at least the UI is available and reasonable error messages are
displayed if there are network connectivity issues.
41
When defining the offline experience consider applying HMW
design thinking methods and brainstorm what offline Use location data to customize the offline
functionality can benefit the user.
experience?
Here are some “How-Might-We” examples for
brainstorm inspiration: HMW
Drive cross-device conversions with
offline opportunity?
HMW
Leverage branding content while the user
is offline?
HMW
Keep the offline experience consistent
with the app one?
HMW
Include offline support options while
keeping the user engaged with the page?

42
User First How long do you wait to determine the
success or failure of a connection?
Principles For What can you do while success or failure

is being determined?
Offline What should you do in the event of
failure?
“Connectivity is not On or Off. It is On and Off.”
How do you prioritize the content to
When designing reliable experiences, think about cache for offline?
connectivity as something that is constantly changing its
state. Especially when on mobile devices, users can be How do you inform the user of the
traveling underground, entering elevators or just simply above?
experiencing bad connectivity issues. Providing an offline
experience opens new ways to engage with users and How do you return the user back to
keep them using your PWA in all connection states. connectivity?
When defining an offline experience, consider the How you illustrate the functionality
following questions: available offline?
How do you keep users engaged/

occupied while they are offline?
43
Informing About With copy there are a few things to consider:
The Change Of • Keep things simple. Remember, users are often not
technically minded.
State • Avoid blaming the user or systems for a bad

connection. Instead, simply confirm the state and
inform users of the next actions.
On a very basic level, at least inform users about the • If the brand strategy includes informal language, use
change of state. Three elements that can be used to it with care, as it can undermine the credibility of the
describe this change are: PWA in such a sensitive and vulnerable moment.
1. Copy - words to inform users about the change

of state.
2. Icons - visuals that help illustrate the current status.
3. Colors - to highlight the content available offline.
The best practice is to use at least two of the above, to

avoid user confusion. When using colors, greying out
certain areas of the website can be interpreted not only
as an offline state, but also as if some of the items are
out of stock. So, to make things clear, also use copy to
inform the user.

44
Informing about the change of state:
Copy and colors Copy, colors and an Copy and visuals

to illustrate the icon to illustrate the to illustrate the
change of state change of state change of state
45
Don’t Do
“You are not connected to the “You are currently offline”
Internet. Please reconnect and
retry” “We will try to reconnect you in 30
seconds”
“Looks like our server is down”
“The page will be loaded once you
“Sorry, something went wrong on are back online”
our end”
“Press here to refresh the page”
“Looks like something was
unplugged. Thanks for your patience Confirm the state as-is with no
while we are getting this fixed” blame
Reassure the user that they don’t
Don’t blame the user need to “fix” anything
Don’t ask the user to fix things Explain what is going to happen
Don’t blame your own systems as when the connection is back
it affects service credibility (whether the user needs to
Use informal language with care refresh or the page will reload
automatically)
46
A popular UI component to inform the user about the change of state is a pop up toast (or a snackbar). It can appear in
any place in the UI, but check on every page that it doesn’t block navigation elements. Besides the copy, the toast can
also carry an icon and a call-to-action button for example: refresh the page or dismiss the notification.
Toast on the bottom Fade the toast out or let Toast placed above
of the page with a users dismiss it if there the navigation bar
REFRESH call-to-action is another signal of the

ongoing offline state active
e.g. greyed out color
47
Providing An
Offline Experience Fallback experience:
In addition to simply notifying the user they are offline,

many types of experiences can be provided offline.
Fallback experiences
These experiences provide an alternative experience to
the user when the connection is interrupted. Examples:
• Show a static offline page. This could contain

alternative ways to reach the business, such as a
store locator, contact info to get in touch with the call
center, a contact form that is submitted when the user
is back online.
• Be useful and show relevant information from the
user’s account. A travel company could make tickets or
Showing a simple Inviting to browse
boarding passes available. A retailer could show saved branded placeholder some pre-cached
page content
items or items in the basket.
• Entertain users with a game or puzzle or fun facts, and
occupy their time while they wait for the connection to

return.
48
Fallback experience:
Show contact info Show store locator Be useful Entertain

49
Continue browsing offline • Use run-time caching to make any previously viewed
Caching can be used to allow users to continue browsing page available.
when they are offline.
Be mindful to make users aware of what content is
• Use pre-caching to let the user continue browsing available to browse, provide appropriate navigation and
important areas of the site such as top categories or information on what actions are possible.
items on sale.
Keeping the user within the context of the product listing page if Go back through pages
the next page is not cached. Offering alternative call-to-actions available with Back button
e.g. “Share” or “Save for later”
50
Complete tasks offline When the connection is back, inform the user
More advanced offline experiences can allow users to about the change of state and update the content
complete their current task, such as adding items to the cart, if there are any changes required. If the user can be
saving to a wishlist, completing a form or even complete all kept within their current context, reload the page
the details in checkout, right up to payment. It is important automatically. If the context cannot be kept, give
to reassure the user they can continue their task and their control to the user to refresh the page with a button.
actions won’t be wasted, despite being offline.
Fill out the form Add to cart Save to wishlist
51
Chapter 7
Designing
Meaningful
Notification
Experiences
By Anna Potanina
Progressive Web Apps support push notifications on Android,
with or without the user installing. Notifications bring great value
for businesses: they increase repeated visits and consecutively
sales and conversions.
But, a poor notification experience can affect customer

relationships. Asking users to sign up for web notifications when
they first arrive will often have very low acceptance rates.
Instead, wait until users understand the context and see benefit
in receiving notifications before prompting for the permission.
Note: Apps installed from Play automatically enroll users in web notifications.
This includes PWAs published in Play using Trusted Web Activities.
53
Asking For
Also fix the notifications permissions prompt UI
element in the side drawer or within the navigation
Permission
header, so that it’s always available to the user
without being interruptive.
An important part of the notification experience is Use a value proposition

notifications permission prompt. The best practices are Customize the value proposition of notifications
similar to the install prompt. according to the context of the current page and
actions that the user is completing there.
Appear when appropriate
The ground rule here is not to ask users for permission For example: on a product page, the value
to send notifications when they first visit the site. Ask for proposition could be ‘get notified when this item is
permission at the right moment, when notifications can back in stock’.
bring value to the user. Use a pre-permission UI prompt
and customize the copy, visuals and style.
Consider making the prompt discoverable throughout

the site, however make sure not to interrupt the user
and break the flow. It is better to prompt when the user
is either in browsing mode and not deep in a specific
task, or when they have just completed a certain action
(added product to favorites, completed the purchase,

finished reading the page or finished the game).
54
A good notification permission One of the placements for
looks native to the UI, contains notification opt-in and settings
value proposition and visuals, should always be available for the
and is presented at a contextually user, e.g. in the side menu to allow
relevant time users to change or cancel the
sign-up options
55
Sending
Visuals - PWA icon or other visual assets.
• A PWA icon is a must have as it will visually inform the
Notifications
user which app is sending a message.
• Sometimes an image can be added to visualize some
other information of the core message: e.g. picture of
the sender, photograph of the product that is back in
stock, or a photo of a new banking card that has been
Every notification that is sent should be timely, precise
ordered by the user.
and relevant. That means arriving in a moment when it • The image and the icon should not duplicate each other.
matters to the user and showing specific information
that is relevant to the specific user. Actions (optional) - what action the user can take.
• Here it is important to let users complete some of the
Every notification consists of three high-level elements. actions based on the information received without
opening the app.
Copy - what the message says and how. • Do not duplicate the actions that are already built into
• The copy consists of the PWA name, message the Android notifications interaction system e.g. default
actions “Tap-to-open” and “Dismiss”.
headline and message content.
• The text has to be clear and concise and fit under 40
characters.
• Do not duplicate the app name in the headline (it is
already in the header).
• Make sure all information displayed is relevant for the
user.
56
Chapter 8
By Martin Schierle
Impact
Measuring
A well built Progressive Web App should increase engagement,
speed up the page and drive conversions through a meaningful
offline mode and installability. So what’s the best way to
measure this and determine the impact?
As a PWA includes a few different techologies which can be used

somewhat independently, it is advised to measure each feature
on its own to ensure clear data and a complete picture on what
to optimize further.
58
Measuring Install On Chrome and Microsoft Edge, the entire funnel can
be tracked as follows.
Rates Step What to measure How to measure
1 # of users eligible Listen to beforeinstallprompt event,

to install which will fire for installable sites
when the user meets an engagement
Making a Progressive Web App installable is a powerful heuristic
feature, but success of it is also very dependent on 2 # of users who This will depend on how exactly the
click on UI install prompt method is called, but it’ll
the UX patterns used for promotion - the same as with prompt probably be from a click event on a UI
install prompts for native apps. element in the page
3 # of users who After a user clicks the UI install prompt,

accept / decline the chrome install popup will trigger.
Therefore, make sure to have the right analytics in place to install Measure whether a user has accepted
or rejected in the userChoice property
to track installation rates and engagement/conversion
rates, so that the flow and UX can be optimized. 4 # of users who Successful installation can be measured
have installed with the appinstalled event
For other browsers

For other browsers that support the beforeinstallprompt
event, similar analytics can be instrumented. For those
that don’t (like Safari), it is harder to track PWA installs.
In these cases it is recommended to at least measure
the usage for the installed PWA as described in the next

section.
59
Measuring Measuring Offline
Installed Users & Caching
It is important to understand the behavior of users that Offline
have installed the Progressive Web App. Offline usage can be measured by recording analytics
pings when offline, and then replaying them when
The first thing to track is how many users are opening connection comes back, as described here.
the PWA from the homescreen (or in general the PWA
icon). This can be done by adding a tracking parameter For Google Analytics this is readily available in a module
to the launch URL in the manifest, so that homescreen for the Workbox library, and means all analytics events
traffic can be drilled into within your analytics package. will still be tracked, even when the user goes offline.
It may be useful to add an explicit tracking for when the

The PWA can also be accessed when a user clicks on
user goes offline or online, by using the corresponding
any link (see: deeplinks), such as from a search engine,
browser events. This way allows measurement of how
or also via a web share target. Therefore, it is important
many users that went offline and could be recovered,
to also detect dynamically through javascript if users
and how much time is spent offline (by calculating the
are in standalone mode (thereby indicating usage of
time between online and offline events and sending
the installed PWA), and then use this as variable or
this towards your analytics). Keep in mind however, that
dimension for your analytics tracking.

there will only be a lot of offline activity if there is a good
offline experience.
60
Caching & Conversions with and once without service worker, and compare
A service worker can bring more uplift than just offline both runs.
by handling unreliable network conditions. Keep in mind that the service worker is installed on first
load, and typically has most impact on page loads after
Therefore, another way to measure impact from the first, so make sure to measure speed on repeat loads
improved network resilience and offline is to compare or with prewarmed cache.
conversion and engagement rates with and without
service worker caching as it can be assumed that a For field data, use your analytics package of choice, filter
more robust and resilient website will convert better. on performance metrics for repeat loads or returning
Results should be filtered down on carrier connection users, and compare data before and after service worker
and mobile, to see the impact the strongest. launch.
Here is one way to do such an A/B test, where only Another option here which doesn’t need additional
a subset of users get the service worker installed via setup is to just monitor field performance through
cookie split. the Chrome User Experience Report before and after
launch (which contains first and repeat loads, and should
Caching & Speed therefore show speed uplift through service worker
Well defined caching strategies through a service caching).
worker can make a website faster on repeat loads.
Speed-up through a service worker can be easily
measured through common speed tools like
Lighthouse or Webpagetest.org by measuring once

61
TWA Usage And
App Campaign Attribution
App Campaigns can be used to promote a PWA
Events
published in Play using Trusted Web Activities.
To attribute installs, use Google Play campaign

attribution, or a native app analytics SDK
When a Progressive Web App is published in the Play e.g. Google Analytics for Firebase.
Store using Trusted Web Activities, many relevant metrics
regarding install rates are directly available from the Play To attribute more than just the install to the campaign,
Console. it’s a little more complex, as what happens in the web
part (the TWA) is separate from the native part (what’s
Besides this default tracking there are several ways to installed). Here is a specific example on how this can
pass information into a TWA via URL query parameters, be done with AppsFlyer by passing tracking parameters
referrer URL or request headers, and all of these can be through URL or headers, combined with server-to-
used to enable additional tracking. server tracking. Many App Analytics packages support
similar server to server integration which can be used to
Usage within the Trusted Web Activity is recorded via track TWAs accurately.
the regular website analytics code, but make sure to add
a tracking parameter to the default url of the TWA, to
enable filtering down to TWA users in analytics.
62
Measuring Push Step
1
What to measure
# of users
How to measure
Detect if push notification is available in the
Notifications
eligible for push browser through feature detection
notifications
2 # of users who This will depend on how exactly this feature is

click on custom offered to the users, but it will probably be from
notification UI a click event on a UI element in the page
prompt
There is a whole funnel to keep track of when
3 # of users who After a user accepts the custom UI notification
measuring push notifications. Similarly to install (and accept / decline prompt, the chrome notification permission
push notification will be triggered. This will give back if the user
basically most browser permission prompts) it is permission accepted or rejected, which can be tracked in
analytics
highly advised to not directly bring up the default
permission prompt, but rather use custom UI ahead 4 # of users Whenever a push notification is sent from the
receiving the backend, the push event is triggered in the
of time to give the user a real value proposition why push notification service worker on the client side. Use this event
handler to measure how many users received the
they should allow this feature. push notification successfully
5 # of users who Whenever a notification (or one of the

Tracking and measuring the whole funnel is engage with the actions within it) is clicked by the users, the
notification notificationclick event is triggered in the service
especially important for notifications, as sub-optimal worker. In here, add analytics code to track user
engagement. Similarly, there is also a notification
implementations can easily be perceived as spammy
close event to do the same for users dismissing
and annoying by users, and therefore may lead to the notification without interacting
complete abandonment of the Progressive Web 6 Measure Most of the time when a notification is clicked,
conversions and it will open up the PWA. The code to do this can
App. It may therefore be advised to look closely for engagement be found here, and can be used to add tracking
engagement metrics of users receiving notifications, afterwards parameters to the URL to mark the session as
started from a notification (e.g. via utm_source
to see if there is attrition or churn. in Google Analytics). However, depending on the

analytics package custom code in the notification
click event handler can be used instead of using

With this in mind, the flow to track looks like this: url parameters
63
Chapter 9
Case Studies
Weekendesk
After transforming its site into PWA, Weekendesk took
advantage of Trusted Web Activities, allowing them to
publish the PWA directly in the Play Store.
Weekendesk turns their mobile site into a Progressive

Quote:
Web App and gets 2.5x more conversions.
“Our users expect a fast and intuitive experience
regardless of the channel. Our successful bet was to
Weekendesk is #1 for weekends and short thematic
stays (well-being, gastronomy, relaxation...) and has modernize our website in Progressive Web App then to
created an ultra-fluid experience by reconciling their publish it also in the Play Store ”
website and native app. With more than 60% of web — Maxime Biloé, Lead Front Developer, Weekendesk
sessions coming from mobile and an aging Android app,
Weekendesk has a strategic interest in offering the best Results:
mobile experience to its customers, while unifying its For the users: The same ultra-fluid experience
web and app developments.
accessible everywhere: on the web and in app!
For the product team: Faster deployment of new
Weekendesk has gradually added modern web
features, and lower costs with the maintenance of a
functionality to its mobile site, to transforming it into a
single code.
true Progressive Web App, which makes it as smooth as
a native app. For the business: 2.5x conversions when users come
from the installed PWA, a site up to 30% faster, more
Thanks to the Service Worker the site becomes faster engagement in page views (+ 108%) and time spent on
and available in offline mode, and the proposal to install the site ( + 85%).
the PWA brings more comfort to users who are already

engaged. Read the case study (French)
65
Thanks to the Service Worker, When losing network On 2nd page visited, The PWA can be installed from
the website is 15-30% faster connection, the wishlist can be Weekendesk promotes PWA the Play Store like any other
and transitions between pages accessed in offline mode install native app
are smoother
66
Etam
Offline:
Etam, a specialist in women's lingerie, takes advantage of
a Progressive Web App to improve the user experience
on mobile.
With more than 70% of sessions coming from

smartphones, Etam understands the importance of
optimizing the online customer journey, especially
on mobile. Etam’s native application was aging, so the
team chose not to overhaul it, but to instead focus on
improving the web experience.
The developers first focused on speed by optimizing

the code. They then implemented an architecture that
remembers the static content of the page, including
the customer area. This notably allows the user to have Access loyalty card Access favorites list
their loyalty card and their favorites list, even if they are
offline.
67
Etam also gives the user the possibility of installing the Etam makes it easy for users to sign in, using the
PWA. Installation is instantaneous because the PWA is WebAuth protocol to facilitate login with fingerprint.
very light, less than 2mb. Once installed, users enjoy an Etam also makes it easy to purchase with just 3 clicks,
immersive full screen browsing experience. using Google Pay.
Install: Custom UI Installed: Users who WebAuth protocol Payment in 3 clicks thanks
prompt, first left tile. Text launch the app from facilitates login with to Google Pay
translates to: “Be the first the homescreen get fingerprint on the web
to know about our latest an immersive browsing

news. Our application is experience. The layout is
fast, light and works in also similar to Native App
offline mode.” UX with the menu bar at

the bottom of the screen
68
Etam continues to innovate by publishing its PWA to the
Google Play Store, using Trusted Web Activities (TWA).
Etam is therefore accessible on the Google Play Store
for users looking for the brand, and with just one code
to manage, one team is enough to maintain a seamless
experience that can be quickly updated.
Quote:
“The Progressive Web Apps bet is successful! We have
saved considerable development time. This allowed us
to innovate more with Trusted Web Activities” —
Edouard Bataille, Creative Technologist, Etam
Results:
• The work on speed made it possible to obtain a revisit
loading time of less than a second
• Users who opened installed the PWA and opened
via homescreen had an average basket +18% and a
PWA in the Google Play Store using
conversion rate +30% higher than other mobile users Trusted Web Activites. Only one code
to manage to be present on the web
• The improvement of the mobile site also had a cross-
and in the Play Store
device effect because the conversion rate of the
desktop also increased
Read the case study (French)
69
Closing
So there you have it: how Progressive Web Apps combine
the superpowers of the web and native applications. It
should now be clear what PWAs are capable of, how to
deploy them either alongside native applications, how to
design an installed experience that feels like it belongs
on the device, how to measure the impact, and real
life use cases from businesses that are already seeing
success.
When thinking about PWAs, TWAs, Native Apps, or

any digital product, always keep in mind: how might
you reach as many people as possible, with the best
experience possible, in the most cost effective way.
Thanks for reading.

71
& Tools
Resources
Resources
Using Trusted Web Activities - Trusted Web Activities are
a new way to integrate your web-app content such as
your PWA with your Android app
web.dev/progressive-web-apps - In this collection, you'll Take control of your scroll: customizing pull-to-refresh
learn what makes a Progressive Web App special, how and overflow effects - The CSS overscroll-behavior
they can affect your business, and how to build them. property allows developers to override the browser's
default overflow scroll behavior when reaching the top/
Fugu Web Capabilities Project - Fugu is a cross-org bottom of content.
program to bring powerful new capabilities to the web
platform. It manages incoming requests from partners, Enable offline analytics - Offline analytics is a module
determines demand, prioritizes them, finds a champion, that will use background sync to ensure that requests
tracks the development, and helps organize the release to Google Analytics are made regardless of the current
and documentation for the capability. network condition. This is especially useful if you've built
an app that works offline.
WebAPKs on Android - Chrome automatically generates
and installs a special APK when your Progressive Web Mozilla ServiceWorker Cookbook - The Service Worker
App is Installed Cookbook is a collection of working, practical examples
of using service workers in modern websites.
Share like a native app with the Web Share API - The
Web Share API makes it possible for web apps to share Code lab for developing Progressive Web Apps
links, text, and files to other apps installed on the device Code lab for adding an Apple Touch Icon
in the same way as native apps. Code lab for Trusted Web Activities Tools
73
Tools
Chrome User Experience Report - The Chrome User
Experience Report provides user experience metrics
for how real-world Chrome users experience popular
destinations on the web
Lighthouse - an open-source, automated tool for
improving the quality of web pages. You can run it
Chrome DevTools - a set of web developer tools built
against any web page, public or requiring authentication.
directly into the Google Chrome browser. DevTools can
It has audits for performance, accessibility, progressive
help you edit pages on-the-fly and diagnose problems
web apps, and more.
quickly, which ultimately helps you build better websites,
faster.
PWA Builder - the OSS project helping you to create
Progressive Web Apps. Want to package your PWA for
Test My Site - See how your mobile site speed ranks
the Google Play Store? It takes less than a minute to get
compared to other top brands and learn how you can
a built and signed APK that is ready to go!
provide a faster, more frictionless mobile experience.
Llama Pack - Llama Pack is a Command Line Interface

(CLI) that helps developers to create a Project for an
Android application that launches an existing Progressive
Web App (PWAs) using a Trusted Web Activity.
Google Workbox - Workbox is a set of libraries and Node

modules that make it easy to cache assets and take full
advantage of features used to build Progressive Web

Apps.
74
Special thanks to:
Craig Adolph - Mobile Web Strategy & Operations Manager, Google
For editing the ebook & coordinating the authors:
PJ McLachlan - Product Manager, Chrome Web Platform, Google

Daniil Matveev - Mobile Technology Specialist, Google
Anna Potanina - Mobile UX and Conversion Specialist, Google
Martin Schierle - Mobile Solutions Consultant, Google

Pwas The Future of The Mobile Web Vol2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pwas The Future of The Mobile Web Vol2

Uploaded by

Copyright:

Available Formats

— Contents 5.

Designing Installed Experiences

— Foreword 6. Designing Reliable Experiences

device - just like any other app.

Superpowers Nowadays, the web natively supports almost any

a platform on desktop. For example, productivity apps • Native filesystem access

• Accessible from familiar discovery & launch surfaces

Default experience on Default experience on

Users can tap an install icon in the address bar. Once

• Samsung Galaxy Store. As of early 2020, Samsung

The successful fashion online shop

Progressive Web Apps can provide a great experience effective manner.

The following 4 strategies reflect how businesses with

Not suitable if functionality not available on the web is required

For businesses that already have a great native app, a

From the browser, the least install friction is PWA install,

The manifest should include:

with a fetch handler.

There are other items that can be included in the

Apple Touch Link

of the icon should not be transparent. This code lab

Learn more about how to publish a PWA in Play using

The best practice is to use to customize visuals, copy and design

Chrome on Android allows fully customizable UI

Preventing the default mini info-bar on Chrome

The recommended best practice to stop the mini info-

Here are the details on how to do that. Example: Install prompts

can be re-discovered throughout the journey

It’s a good idea to also fix the Install prompt UI element

Avoid negative wording Highlight user benefits

Customize the message depending

Talk about the user, not about the

Include icons such as a download icon or an install

Integrate with the UI

Use the getInstalledRelatedApps API to

Example: Install explanations for iOS

Consider providing UI guidance to make sure users are

Examples of Install prompt on Desktop

is no built-in internationalization in the web app manifest, generated splash screens.

Consider locating there the key calls-to-action, testing

Example browser mode:

Brand-colored browser bar and Brand-colored system

Adding “Back” button for

Adding “Share” button for the

keeping the user engaged with the page?

Principles For What can you do while success or failure

How do you keep users engaged/

State • Avoid blaming the user or systems for a bad

1. Copy - words to inform users about the change

The best practice is to use at least two of the above, to

inform the user.

Copy and colors Copy, colors and an Copy and visuals

REFRESH call-to-action is another signal of the

e.g. greyed out color

In addition to simply notifying the user they are offline,

• Show a static offline page. This could contain

occupy their time while they wait for the connection to

Show contact info Show store locator Be useful Entertain

e.g. “Share” or “Save for later”

Fill out the form Add to cart Save to wishlist

But, a poor notification experience can affect customer

An important part of the notification experience is Use a value proposition

Consider making the prompt discoverable throughout