PWA FRAMEWORK & APPLICATION

The hype and rise of progressive web apps are tremendous. A PWA is basically a web
application that feels like a native application to the user. By making your app a PWA, not
only do you acquire new users, but you can also retain them for longer. Here’s a quick
rundown of all things good about a PWA.

(I)Reliable: Loads instantly even under poor network conditions. (II) Lighting fast and app-
like: Responds to the user’s actions with speed and with a smooth interaction. (III) Engaging
and responsive: Gives the feeling that it was made specifically for that device, but it should
be able to work across all platforms. (IV) Protected and secure: Served over HTTPS to make
sure the contents of the app are not messed with.

If you’re not already developing your next app as a PWA, here are 5 reasons why you should
do that ASAP. And if you’re confused about choosing the best framework for developing
your PWA, here are the top 3 frameworks available to make your next app a PWA.

Ionic

Ionic is one of the most popular frameworks for building a progressive web app. Let’s look at
a few reasons why you should choose Ionic as your PWA framework

 Free and open-source: Ionic is open source, and licensed under MIT. Open-
source means developers can manage the code structure easily, saving time,
money and efforts. They also have a worldwide community forum to connect
with other Ionic developers, ask questions, and help out others.
 Cross-platform and one-codebase: Ionic allows seamless building of apps across
popular operating systems, such as Android, iOS and Windows. It has a one
codebase feature. This means apps are deployed through Apache Cordova with a
single code base, and the application adapts automatically to the device it is
functioning in.
 Rich UI: Ionic is equipped with pre-built components that are used to customize
design themes and elements. It is based on SASS UI, with rich features to create
fast, robust, interactive, native-like applications.
 Powerful functionality: Ionic is supported by Angular. The component API
of Angular helps developers create interactive hybrid and web apps. Ionic
is equipped with Cordova Plugins for accessing various native features, like
Camera, GPS, and so on. It also features a powerful CLI for building, testing and
deploying apps across multiple platforms.
Read our Hybrid Mobile Development with Ionic to build a complete, professional-quality,
hybrid mobile application with Ionic. You can also checkout Hybrid Mobile apps: What you
need to know, for a quick rundown of all that is to know about a Hybrid mobile app.

Polymer

 Google’s Polymer App Toolbox is another contender for the development of PWAs. It
is a collection of web components, tools, and templates for building Progressive Web
Apps.
 Blends PWAs with Web components
 Polymer allows developers to architect a component-based web app using Polymer
and Web Components.
 Web components can form encapsulated and reusable custom HTML elements. They
are independent of the frameworks because they are made of pure HTML/CSS/JS,
unlike framework-dependent UI components in React/ Angular. The web
components are provided through a light-weight Polymer Library for creating
framework-independent, custom components.

More features include:

 Responsive design using the app layout components.

 Modular routing using the elements.
 Localization with .
 Turnkey support for local storage with app storage elements.
 Offline caching as a progressive enhancement, using service workers.
 Build tooling to support serving the app multiple ways: unbundled for delivery
over HTTP/2 with server push, and bundled for delivery over HTTP/1.

Each component whether used separately or together can be used to build a full-featured
Progressive web app. Most importantly, each component is additive. For a simple app one
only needs the app-layout. As it gets more complicated, developers can add routing, offline
caching, and a high-performance server as required.

Read our Getting Started with Polymer book to create responsive web apps using Polymer.

Angular

Angular, probably the most popular front-end web application platform, can also be used to
make robust, reliable, and responsive PWAs. Before the release of version 5, supporting
progressive web apps in Angular required a lot of expertise on the developers’ part. Version
5 comes equipped with a new version of the Angular Service Worker for built-in PWA
support. Angular 6 (released a few days back) has two new CLI commands. Both these
versions make it very simple to make web application downloadable and installable, just like
a native mobile application.

Service Worker Updates

With Angular 5 the development of Service Workers is becoming significantly easier. By

using Angular CLI developers can choose to add Service Worker functionality by default.

 The Angular Service Worker functionality is provided by the

module @angular/service-worker.
 Service worker can power up an application by only providing some JSON
configuration instead of writing the code manually.
 The key difference with other service worker generators (like Workbox, sw-
precache) is the fact, that you do not re-generate the service worker file itself,
you only update its control file.

New CLI commands

Angular 6, also introduces two new commands apart from the service worker updates. The
first, ng update, is a CLI command for updating dependencies and code.

The second command, ng add, supports turning applications into progressive web apps,
which support offline web pages.

Apart from these frameworks, React is also a good alternative. Backed by Facebook, it has a
Create-React-App generator which is the official scaffolding tool to generate a Reactjs App.
Get started with Scott Domes’s Progressive Web Apps with React as your first step for
building PWA applications.

Yet another popular choice, would be Webpack. Webpack plugins can generate the service
worker and manifest required for a PWA to be registered. It uses a Google project
called Workbox which provides tools that help make offline support for web apps easier to
set up.

The bottom line is that the frameworks for building progressive web apps are growing and
expanding at a rapid rate with regular updates every couple of months. Choosing a
particular framework thus doesn’t make much difference to the app behaviour. It only
depends on the developer’s area of interest and expertise.
Although a progressive web application (PWA) is quite a new phenomenon, an increasing
number of companies has already been capitalizing on its extensive capabilities. They
combine the capabilities of websites and mobile software that allow creating an immersive
user experience and increase user engagement and conversion rate. In this article, we will
get to know the pros and cons of progressive web apps and possibilities that PWAs open for
businesses, including that if compared to web or mobile software.

Let’s take a look at the key advantages of PWA for business and their capabilities to find out
why businesses, from start-ups to market leaders, should opt for them.

1. Low Development Costs

PWAs do not require different versions for various devices; a single progressive app meets
the requirements of all endpoints on which it operates. So, it significantly reduces the
amount of efforts that developers provide, and as a result, the cost to create a PWA
decreases. The cost is three or four times lower than that of a native mobile app.

2. App-Like Look and Feel

Nowadays, mobile users prefer apps to browsers as applications compare favourably with
browsers, as they are more user-friendly, can operate offline and have a more attractive
interface. Progressive web applications provide an advanced user experience by combining
the look and feel of mobile applications and the best of website performance. They have the
design and settings that are very similar to those of native mobile software. Regardless of
technologies, tools and frameworks on which PWAs are developed, they provide the same
user experience as native mobile apps do, and it is considered to be superior to that of
websites.

At the same time, they have the same speed, responsiveness and comprehensive
capabilities of websites with database access and automatic data. As a result, search engines
index them, which is why systems such as Google or Bing can find PWA pages. When
compared to mobile software that keeps its internal data only for its own use, the pages of
these applications can be found on the internet, which may have a favourable impact on the
number of page views.

3. Fast Installation
Unlike regular mobile applications, PWAs do not require a long and complex installation
process, which significantly improves user experience. Users just download an app, quickly
and directly to their devices, and they do not need to go to the App Store or Google Play. It
streamlines the procedure and significantly reduces user abandonment. After users have
downloaded an app, they can access it via a desktop icon.
Some browsers even offer call-to-action-like teasers that prompt users to download these
apps when they visit respective websites. This functionality comes built into browsers and
allows the apps to enhance their credibility and reliability. As this software does not require
installation on devices, users can easily access the PWA via a URL, which significantly
contributes to the high share ability.

4. Better Performance
PWAs cache and serve text, images and other content in a specific, efficient manner, which
enables them to operate like websites and significantly improves the running speed. Along
with quick operation, impeccable performance is another attribute that has an impact on
user experience and conversion rates.

Retailers and content providers should adopt this type of software as it enables a more
positive user experience than mobile apps by improving retention and customer loyalty.

5. Platform- and Device-Agnosticism

Unlike regular applications that are very demanding on operating systems and the technical
capabilities of various devices, PWAs work everywhere. A single app can satisfy the needs of
various consumers and provide a uniform user experience on different endpoints. At the
same time, this type of application enables cross-support to users that switch between their
devices by providing them with a continuous experience. Users can access an app that has
the same settings and data as that on another device.

This fact also significantly contributes to business automation, as companies that rely on
PWAs know that the software their employees use performs seamlessly regardless of the
platform or app version. Also, PWAs are highly responsive to various form factors, as they
adapt properly to various screen sizes.

6. No Updating Issues
PWAs have a specific functionality that allows them to update automatically, without
notifying users and bothering them with permission requests. These apps update
themselves every time when users visit them, thus eliminating the need to download batch
changes and install them. They just provide a renewed look with no human participation.

However, some of the producers of progressive apps send push notifications to users to
inform them about the arrival of a new update. All the same, producers have full control of
the information and content, to which users have access.
7. Seamless Offline Operation
The capability to operate offline or in compromised networks makes PWAs much more
convenient than websites, which require a proper internet connection. Built-in service
workers cache important progressive web apps’ features and information automatically,
which eliminates the necessity to download it and allows users to access it without an
internet connection.

It is based on the saving of information that users previously accessed, for example, pages. If
they try to open those that they have not visited online, an app can show a custom offline
page. This capability is crucial for retailers, as it allows them to prevent users from
abandoning their catalogues and enhances customer retention.

8. No Dependence on App Distribution Services

Usually, app distribution services, such as the App Store, Google Play or Microsoft Store, set
high requirements to software that is included in their databases. Meeting their
requirements may become quite a time- and effort-consuming process. Also, in some cases,
services remove applications from databases without notice if a company fails to meet some
of the requirements. So, PWAs allow producers to avoid complex reconciliation procedures
as they do not need to be stored in similar services.

9. Push Notification Functionality

Like native mobile applications, PWAs have access to device-specific functionality, such as
push notifications. This capability can be performed in various ways and allows companies
to make the best use of content advertising.

Why are push notifications especially efficient when it comes to PWAs? According to some
statistical data, almost 60% of users allow their progressive applications to send them
notifications, which significantly increases opportunities to promote products or services.
Moreover, these notifications are displayed on the screens of mobile devices, which is why
there is a high probability that they attract users’ attention, especially when compared to
email newsletters, blog entries or posts in social networks.

In such a way, a company can better access its target audience, and chances are, the
audience will respond. Another valuable outcome is that these bouncing notifications, along
with app icons on device desktops, considerably add to brand recognition, as they allow a
business to draw attention to itself. However, users that have numerous applications
installed on their mobile devices and that allow a great number of them to send
notifications risk making their digital experiences cluttered.
10. Enhanced Security
PWAs rely on HTTPS to provide data safety and minimize the risk of security issues, as this
protocol allows to preclude snooping and content tampering. Also, the applications take
advantage of Web Bluetooth technology that includes certain security capabilities.

To deeply understand how a Progressive Web App differ from conventional responsive
websites, the best way is to look at some good examples of PWAs.

1. Starbucks

Aiming at providing accessible, user-friendly online ordering to all of their customers,

Starbucks built a PWA of the ordering system on the web, which delivers a similar
experience to their existing native app. In other words, with its capability to run in
offline mode, Starbucks PWA allows their customers to browse the menu, customize
their orders, and add items to their carts – all without consistent access to the internet.
Once online, they can view location-specific pricing and place their food and drinks
order.

As most of the PWA is available without network connection, it’s great for on the go
customers who may go in and out of connectivity throughout the day or emerging
markets like rural communities where the connection is less reliable. By launching the
new ordering PWA, Starbucks has already seen significant results. The PWA is 99.84%
smaller than Starbucks’ existing iOS app, making the web app a favourite amongst its
users. As a result, they doubled the number of web users who place orders each day,
with desktop users now ordering at about the same rate as mobile users.

2. Housing.com

One of India’s leading online real estate platform, housing.com is receiving 50 million
visits per year. The Indian company found slow load times have such a huge impact that
even a one-second improvement can significantly boost the conversion rate.
Furthermore, most of their target user reach the internet via 3g or 4g networks, with
low-end devices. To better serve their visitors, the company set out to create a fast,
efficient, and reliable PWA.

The new mobile web experience is fast, uses less data, and allows housing.com to re-
engage users in multiple ways. With the new PWA, users can to quickly find what they’re
looking for or continue browsing while offline. The Housing.com PWA resulted in a 38%
lift in conversion rate and reduced bounce rate by over 40%. It also attracted higher
quality visitors, with average time-per-session increased 10% across all browsers.
3. Digikala

The leading e-commerce platform Digikala has transformed how Iranians shop for
consumer electrics and other goods with their online store. Their PWA store was built to
provide consumers with lots of information and reviews for digital products, and beyond
all of that, offer a great online shopping experience. Therefore, it is now the biggest e-
commerce site in the Middle East, representing nearly 92% of Iran’s online retail market
share. This PWA ecommerce website is ranked as Iran’s 3rd most visited website, with
1,700,000 unique visitors per day. Since its launch, Digikala has been growing at 200%
year over year in terms of visits, orders, and revenues.

4. Flipboard

As the world’s most popular social magazine, Flipboard allows readers to keep up with
all topics, news, and events they care about, from one single place. Based on the user’s
interest, the platform brings news and stories from around the world together in a
magazine format. Flipboard users can follow their favourite sources and save stories,
images, and videos into their own Flipboard magazines to read later or share with
others.

Flipboard is one of the best examples of PWA for online news. The PWA minimizes data
usage to deliver a slick and fast browsing experience, in a beautiful interface. Until the
launch of their PWA, Flipboard was a mobile app, which only presents on mobile
devices. Hence, now the PWA allows Flipboard to deliver a similar experience to their
fully-featured native app on the web, making it available for desktop users as well.

5. Soundslice

Soundslice is the advanced music education software on the web that revolutionizes
how musicians learn and practice music. The company makes use of PWA to deliver
the finest music creating and learning experience. The PWA-based software makes the
process of learning a piece of music easier and more efficient for self-taught
musicians with an innovative music player. The Soundslice player allows users to learn a
piece of music while reading and hearing it on any device, whether it’s a phone or a
large-screen desktop. On top of that, music teachers can utilize the tool to create
interactive music lessons. With a focus on learning from recordings, Soundslice also has
a store that sells lessons and transcriptions.

6. 2048 Game

The puzzle game 2048 was originally released as a free app for Android & iOs in 2014. It
immediately became a viral hit with more than 4 million users in less than a week after
launch. The game is simple and addictive. Described as “Candy Crush for math geeks”, its
goal is to combine blocks with the same numbers to ultimately total 2048. An official
PWA version is made available at 2048game.com so players can get instant access from
any web browser. With smooth transitions and full-screen view, it’s hard to tell the PWA
apart from its native app counterpart. Plus, the 2048 PWA can be fully played in offline
mode.

7. MakeMyTrip

The MakeMyTrip.com site is a great example of PWA. India’s leading travel company has
about eight million visitors to their site on a monthly basis, with mobile traffic
accounting for two-thirds. As mobile becoming the most preferred channel for booking
among MakeMyTrip customers, they developed a PWA that led to a fast, reliable and
polished mobile-web experience.

The new PWA experience has tripled its conversion rate by reducing page-load times by
38%. Compared with their previous mobile site, MakeMyTrip drove a 160% increase in
user sessions and lowered the bounce rate by 20%.

8. Uber

As the company expands to new markets, its Uber web was rebuilt from scratch as
a PWA to offer a comparable booking experience to the native mobile app. The Uber
PWA is designed to make car booking viable on low-speed, 2G networks. Built around
the concept of app-like experience which is accessible on all modern browsers, The PWA
is great for riders on low-end devices, which may not be compatible with the native
Uber app.

By bringing the native experience in a super-lightweight web app, Uber has enabled
quick ride request regardless of location, network speed, and device.

9. Padpiper

Padpiper is the platform to help students easily find trusted housing for school terms
and internships, and allow landlords to quickly find suitable tenants for their spaces. In
fact, the platform now supports 9000 schools and has over 100 listings on its PWA. They
have verified landlords and listing reviews to save time for students in finding their best
fit. Once students have added the work address, they can look up directions to work
from each listing in the results page. The web app can also connect students with others
who are working near them or find out where their classmates are on co-op.
 10. Pinterest

With a focus on international growth, Pinterest started their new mobile web
experience from the ground up as a PWA. The social network found that only 1% of their
mobile users convert into sign-ups, logins or app installs, due to poor performance on
mobile.

Onto realizing that the opportunity to improve the conversion was huge, so they rebuilt
the mobile web using PWA technology, which led to several positive results: Time spent
is up by 40% compared to the previous mobile web, user-generated ad revenue is
up 44% and core engagements are up 60%

11. Yummly

Yummly is the smart cooking discovery platform that learns an individual’s taste,
nutrition needs, skill level and more to recommend personalized recipes, shopping list,
and one-hour grocery delivery. Along with its native Android & iOS app, Yummly is also
available on web browsers as a PWA. Much like its native presence, The Yummly PWA
offers a search engine for food, cooking, and recipes. It allows users to search from more
than one million recipes, sourced from top food sites, niche blogs or local food brands.
Moreover, the search results can be filtered by ingredient, diet, allergy, nutrition, price,
cuisine, time, taste, meal courses and more.

12. Spotify

Your favourite music player is now PWA-powered. Due to some disagreement between
Spotify and Apple regarding Apple’s 30% app store commission, Spotify found it a timely
opportunity to start developing a PWA version of their app—as many other big brands
have. Compared to its native-app counterpart, the PWA version is considerably faster
with its own unique and adaptive UI that changes its background as the user progresses
through the app. Like many other PWAs, users are also prompted to add Spotify PWA to
their home screen, making Spotify PWA more accessible and on-par with its other
versions.

By the elaborate combination of the most efficient capabilities of native mobile software
and web applications, PWAs significantly improve user experience and increase retention
rates. However, it is not only customer loyalty and satisfaction that adds value to
businesses. Enhanced security, low development costs and platform-agnosticism are the
features that also make these applications the go-to choice of multiple market players, such
as Twitter, AliExpress and Forbes. Progressive web application s are the way of the future,
which is why you should consider switching to them now to get the most out of their
capabilities for your business.