In 2015 Alex Russel, an engineer at Google announced
Progressive Web Applications for the first time. In short, Progressive web apps
are web apps with the functionality and design of mobile apps. With this the
user can have an app-like experience on web pages or websites without
installing any application. So, the user can even use it offline while adding
the link to the web app in the home screen that looks like a native app. PWAs combine the flexibility of the web with
the experience of a native application. It's not that obvious if a web app is a
PWA or not from first glance. An app could be considered a PWA when it meets
certain requirements, or have implemented a set of given features such as,
- Progressive - so it's still usable on a basic level on older browsers, but fully-functional on the latest ones.
- Responsive - Fits any form factor: desktop, mobile, tablet, or forms yet to emerge.
- Network independent - so it works offline
or with a poor network connection.
- Installable - so it's available on the
device's home screen.
- Fresh - Always up-to-date as to the
service worker update process.
- Safe - Served via HTTPS to prevent
snooping and ensure content hasn't been tampered with.
- Discoverable - Are identifiable as
“applications” from W3C manifests and service worker registration scope
allowing search engines to find them.
- Re-engageable - Make re-engagement easy
through features like push notifications.
- Linkable - Easily shared via a URL and do
not require complex installation.
For Developers
PWAs are web apps developed using a number of specific
technologies and standard patterns to allow them to take advantage of both web
and native app features. They represent a new philosophy for building web apps,
involving some specific patterns, APIs, and other features. There are tools to
measure the completeness of an app in percentages. Lighthouse is currently the
most popular one. There are three main requirements to develop a progressive
web application,
- Use HTTPS.
- Have a Valid Web Manifest.
- Register a Service Worker with a Fetch Event Handler.
- The name of the web application
- Links to the web app icons or image objects
- The preferred URL to launch or open the web app
- The web app configuration data for a number of characteristics
- Declaration for default orientation of the web app
- Enables to set the display mode e.g. full screen
The web app manifest is a W3C specification defining a
JSON-based manifest to provide developers a centralized place to put metadata
associated with a web application including:
This metadata is crucial for an app to be added to a home
screen or otherwise listed alongside native apps. Developers want more control
as to when their apps show the banner. For example, if an airline site has a
PWA for storing boarding passes, it only makes sense to ask people to install
it after they have actually bought a ticket. For a news site, users are logged
in, it might make sense to show the prompt immediately. And in some cases, even
if you have a fully qualifying PWA, you might not even want to show the prompt
at all. But most probably, you would want to define your own criteria in your
app to determine who’s a loyal enough user to show the banner to.
Developing a Progressive Web App has no relation to
what-so-ever language you choose to develop your web app in. If you’re hands
down on Angular, it would be much faster development. jQuery helps you build
multi page applications easily. In ideal web apps, Angular, Polymer, React,
jQuery or vanilla JavaScript are even used together for different sections.
If starting from scratch (as opposed to migrating an
existing app) React is probably the best framework to go for since it now (with
React PWA) integrates PWA to its create react app functionality by default. So,
if you run create react app you can proceed with your app creation in a really
fast and straightforward way, assuming you are familiar with React. All that it
takes to make any web application a PWA is for it to be served on https, have a
web manifest and use a service worker for offline functionality and any extras.
That means that you can really use any framework or none to create a PWA. If
it's going to be a complex application using multiple caching strategies for
different routes and assets, using Google's workbox library is the way to go.
If it's quite simple then running something like PWA builder on your website
will be enough
For Users
PWAs are actually created to increase the user experience of
websites. According to Google report, 53% of mobile site visits are abandoned
if it takes longer than three seconds for them to load. Progressive Web Apps
solve this problem well. PWA combines the best of the web and native
applications and users get full app experience without even installing an app.
Since 2016 users lean more and more towards the usage of PWAs. So, the PWA
demand grows fast enough to developers to encourage implementing more PWA
sites. Some of the biggest brands in the world already saw the benefits.
Forbes’ PWA increased impressions per visit by 10%. Alibaba increased mobile
conversions by 76% and Twitter saw a 20% decrease in bounce rate. Progressive
Web Apps are now supported on the desktop also so the desktop users can now
have the PWA experience. Twitter has adopted PWA technology to improve the
mobile engagement and reduce the data usage of its users. The social media
giant has 328 million monthly active users all around the globe, among which
80% are mobile users. This PWA has significantly met their expectations and the
following results were observed. 75% increase in Tweets sent 65% increase in
pages per session 20% decrease in bounce rate Reduced data consumption as much
as 70% by optimizing the images.
One of the most amazing features of PWA is that it is easy
to update. Since there is no app store that works as a mediator, users can
enjoy the updated app as soon as website have updated it from there side.
Making the user install an app from the store can be a pain in the neck. But
with a PWA the user can install the app with just one tap. This frictionless
installation lets users enjoy service instead of installing the bulky native
app.
Future
Google compared top 1000 mobile apps vs. top 1000 mobile app
properties (web) to study the reach and user engagement. The results of the
comparison showed a great disparity in user behavior. According to the study,
mobile web reach is way higher than native app reach. It was 11.4 million
unique visitors per month compared to 4 million visitors. Whereas the stats of
user engagement with services showed that users tend to spend more time on
native mobile apps compared to the mobile web. It was an average of 188.6
minutes on app against 9.3 minutes on the web. So, the idea was clear. They
wanted to provide a native app like engaging experience to users on the mobile
web. In this way, Progressive Web Apps were developed to deliver amazing user
experience on the web. And it was successful, since 2016 the PWA reach
increases higher. So, in future more and more progressive web apps will be
build and might overcome the native apps since it has the both good qualities of
both the website and native app. Some companies tend to build a PWAs because
building a web app and a native mobile app is too costly. In future there might
be even web apps for games and the PWA trend will catch up. So, a user can play
a game just as easy without downloading any application from an app store. In
Chrome 70, PWAs in Windows 10 function like regular apps. That means they
support notifications, Live Tiles and Cortana, and they’re accessible from the
Chrome menu, the Start Menu or as a pinned app on the taskbar. And they’re
available in the Microsoft Store. First it was only available on chrome since
PWA was invented by google now web browsers like Microsoft edge and opera are
catching up supporting Progressive Web Apps.
In my opinion this is a brilliant idea, because all the
parties users, developers and company owners have benefits from PWAs. All of
us, the users should tend to use PWAs more than native apps so the development
on this area will grow faster. Brands and organizations like Starbucks,
Twitter, Burger King, Home Depot and NASA are all switching to PWAs. Since very
large companies are now making them the development is going the right way. I’m
not saying we should abandon native apps totally, because there are things that
cannot be done only by a website. But it is going that way for example google
maps now have a PWA site, imagine you don’t have to wait for the google maps
app to load, that it loads as fast as you click on the PWA icon of the google
maps. Also, it has most of the functions of it. In Instagram’s PWA site have
the camera option. There is an app called Lyft it’s a transportation network
company which shows live cab locations. The best part is that Progressive Web
Apps comes with the better pats of both websites and native apps which are
smooth and not laggy scrolling or usage of the websites and app like quick
access from home of the phone tablet or even desktop.
Author:
Tharindu Kumarasiri
ABOUT THE AUTHORS
We are here to share with you everything about business, fashion, technology, communication and many more things. Make sure to stick with us to discover the original state of the art.
0 comments:
Post a Comment