The Architect's Guide To Progressive Web Apps
The Architect's Guide To Progressive Web Apps
Guide to Progressive
Web Apps
The Architect’s Guide to Progressive Web Apps 02
But PWAs are not a silver-bullet. They work best as part of a broader
app strategy that focuses on creating a consistent, high-quality user
experience across all the channels that your users want to engage
with you.
This brief guide provides enterprise architects and app dev leaders
with essential insights on which projects are right for PWAs, and how
to build a production-ready PWA today.
Contents
Why PWAs Matter................................................................................04
What are PWAs?...................................................................................05
How PWAs fit into your app strategy................................................07
Desktop support for PWAs.................................................................09
How PWAs work...................................................................................10
How to get started...............................................................................11
The Ionic PWA Toolkit..........................................................................12
About Ionic............................................................................................13
last few years, the number of app store apps more than doubled, to more than 2 million
(Lifewire). The impact of this is twofold: app fatigue for users, and immense pressure for
application developers and enterprise architects to make sure their apps stand out from
the crowd and provide the absolute best user experience. An app that takes more than a
few seconds to load, or more than a few clicks to find and download from an app store can
On the positive side, an app that delivers great content seamlessly and quickly, no matter
what device a user has, can set your company apart. This is why Progressive Web Apps
(PWAs) are quickly becoming the standard way to ship these great user experiences to
the web. In fact, Gartner predicts that by 2020, 50% of general-purpose, consumer-facing
But what are PWAs, exactly, and how do you make them work for you? In this guide you’ll
get to know PWAs, complete with statistics and real-life examples, to answer the questions
of why you need one, how they work, and how you can get started.
ACCESSIBLE
Run on desktop and mobile, or
anywhere you find a browser.
The facts
Don’t take our word for it. An expansive Doubleclick by Google user study
found that:
The takeaway: Those that can provide a fast, user-friendly experience don’t
44 %
increase
in ad revenue
just set themselves apart with happier users, they actually see increased
revenues. This is where PWAs separate your company from the crowd.
Perhaps you prefer real-life examples over research? Two companies you
Pinterest saw user engagement increase by 60%, helping to drive a 44% increase in user-
generated ad revenue. These increases also represented a 2-3% bump over Pinterest’s
native app.
Twitter’s PWA provides the exact same user experience as the native twitter app, while
using less than 3% of the device storage. This combination of a better, faster, more efficient
product has been a hit with users, to the tune of a 20% decrease in bounce rate and a 75%
The takeaway: Whatever your industry or brand, PWAs can provide higher user
engagement, lower bounce rates, and ultimately more revenue by providing a better
should be part of a broader app strategy focused on creating a consistent, seamless, high-
quality experience across all channels, whether it’s a mobile browser, a native mobile app,
In general, PWAs are great for attracting new users, while natively installed apps can be
better for delivering the richest experience to loyal, repeat users. Each has its advantages
and disadvantages, though, so it’s important to ask some questions about your brand.
If most of your user base already comes from the web then a PWA is a natural fit for your
product. Likewise, if you want to increase the amount of users that come from the web,
then providing an upgraded web experience with a PWA can be a great enticer.
If you are looking to reduce bounce rate, then the instant experience that a PWA provides
can help. By reducing the amount of steps it takes to get into your experience — moving
from going to the app or play store, searching for your app, and installing your app, to just
clicking a link — you can drastically reduce churn and bounce rate.
While the web is becoming more powerful every day, there are still a few things, like
fingerprint authorization, that are not yet available. Therefore, the most common case
where a PWA might not be a great fit is for products that have a technical requirement that
is only available on native platforms. Even in those cases, however, it’s worth considering
adding a PWA to improve the user experience for new visitors, and then routing them to
the app stores once they want to access more advanced functionality.
be a challenge, and often require a mobile device management (MDM) solution. Since
PWAs are browser based, robust application management activities like whitelisting, app
wrapping, and DLP required with a native app don’t come into play. On the distribution
front, there’s no need to deploy PWAs to an app store, employees can simply download
them directly from your website when they need them. And information is stored away
from the device, at the browser level, easing data privacy concerns (Forrester Research).
PWAs have broad support across mobile (including iOS SOON), AND THEY’RE
SUPPORTED IN DESKTOP
in desktop platforms like Chrome OS and Windows 10.
PLATFORMS LIKE CHROME
Microsoft recently announced its intent to make PWAs a OS AND WINDOWS 10.
first class citizen on Windows 10. It will allow them to be
start menu and apps list alongside native apps, and open in a separate window just like a
Google also recently started improving the PWA experience in Chrome OS. When a user
visits a PWA on their Chromebook they will be prompted to add that PWA to their device,
just like on Android. Once added, that PWA will show up in the app drawer and open in a
separate window.
What does all this mean for you? You can now ship one PWA and have it work just as well
P WAs U TI L IZ E NE W, M O DE RN W EB A P I S , MO ST C RU C I A LLY
S ERVICE WO R K E R S AND A W EB A P P MA N I F EST.
Manifest. While these two APIs are relatively new, they already have full support in Chrome
(and Chrome-based browsers such as Samsung Internet) and Firefox, and support in beta
for Safari and Edge. These APIs make it possible to ship a full featured app experience that
Service Workers
Service Workers are the biggest player, helping your PWA reach those reliable, fast, and
engaging benchmarks. Service Workers allow your PWA to work offline — not traditionally
possible on the web — load reliably no matter the state of the user’s network connection,
and enable features like push notifications and background data syncing.
Service Workers also give you fine-grained control over caching through JavaScript APIs,
letting you create a custom offline experience tailored for your app. For example, you can
program your service worker to always serve cached content first, keeping your app nice
and fast, but then to update the cache in the background so the next time the user opens
you specify an icon, app name, and splash screen color, and enable users to install your
PWA to their device and have it appear right alongside their native apps.
More information
Check out these articles to get more info on Service Workers and Web App Manifests:
With a solid understanding of these APIs, you’re ready to move on to the next step:
you started:
•• Google offers an excellent code lab that uses vanilla JS to review the key concepts
of PWAs by building a simple weather PWA
•• If you’re more of a visual learner, the 2017 Chrome Dev Summit had a great talk
about the basic principles to keep in mind when building your first PWA
When you’re ready to build a real, production-ready PWA, consider the Ionic PWA Toolkit.
It starts with making all PWA best practices the default setting, with no config required.
So, all those features that are essential to delivering a great experience — optimizing
bundle size, lazy loading, code splitting, etc. — are there to start, not difficult-to-implement
improvements you have to code in. This all means that your app will only load exactly
the JavaScript an individual page needs, ensuring that your PWA can achieve that all-
The Ionic PWA Toolkit also provides our recommended setup for building production ready
PWAs with Ionic, including the open source Stencil (an open source project from the Ionic
team) for your app logic and the open source Ionic Framework for your user interface.
Stencil utilizes the latest standards, such as web components, ES modules, ES dynamic
imports, and more, to make sure your apps deliver a great experience built on a modern,
Using Ionic Framework for your UI components ensures that your PWA has the modern
look and feel that customers expect. Our components utilize material design when
running on an Android or desktop device and iOS design when running on an iOS device,
guaranteeing the user will be familiar with your UI. We also utilize the latest best practices
to ensure that all your animations will be smooth and fast, even on lower end devices.
To learn more about the Ionic PWA Toolkit and whether it can help your business, check
•• User forum
•• Quick start instructions
•• Guides, videos, and e-books
•• Developer docs
•• Ionic PWA Toolkit