3. PROGRESSIVE WEB APP
Native Apps vs. Traditional Web Apps
A brief comparison between Native Apps and Traditional Web Apps
4. PROGRESSIVE WEB APP
Native Apps
A native mobile app is a smartphone app that is coded in a programming language like
Objective-C for iOS or Java for Android operating systems.
Positive features:
Fast performance and a high degree of reliability.
Complete access to phone’s hardware.
They can modify system settings.
They can access phone’s devices and features, (camera and address book).
Negative features:
They take longer to build
They have slower iterations, which means it takes a while for updates to be available to
users.
A bigger budget to build your app for multiple platforms (i.e. iPhones and Android) and to
keep your native app updated.
5. PROGRESSIVE WEB APP
Traditional Web Apps
Web applications are basically websites application that is accessed via a web browser
which are built using standard HTML, CSS, and JavaScript.
Positive features:
Real-Time Delivery.
You don’t need to install the web app on your device.
Any update will be instantly delivered to all the users.
Running in multiple browsers and device.
Doesn’t require complex functionalities or access to operating system features.
Building a web app can be the least expensive option.
Developing a web app can be simple and quick.
Negative features:
Limited access to device’s features.
Web apps depend on internet connectivity.
They can be slower.
6. PROGRESSIVE WEB APP
What are Progressive Web Apps (PWA)?
Simply, a Progressive Web App is a mixture of a mobile and web app!
A Progressive Web App is a modern website that uses modern web capabilities to
deliver fast, engaging, and reliable mobile app-like experience for users.
7. PROGRESSIVE WEB APP
This new application model attempts to combine features offered by modern
browsers (modern web APIs) to create cross-platform web applications that
can bring native-like performance and mobile experience to web apps.
8. PROGRESSIVE WEB APP
Background
In 2015, Google Chrome engineer Alex Russell coined the term "progressive web apps"
to describe apps taking advantage of new features supported by modern browsers.
9. PROGRESSIVE WEB APP
Terms and Characteristics
According to Google Developers, A PWA application has these characteristics:
10. PROGRESSIVE WEB APP
Progressive - Work for every user, regardless of browser choice because
they’re built with progressive enhancement as a core principle.
Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to
emerge.
Connectivity independent - Working offline, or on low quality networks.
App-like - Feel like an app to the user with app-style interactions and
navigation.
Fresh - Always up-to-date.
Safe - Served via HTTPS to ensure content hasn’t been tampered.
Discoverable - Allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push
notifications.
Installable - Allow users to “keep” apps they find most useful on their home
screen without the hassle of an app store.
Linkable - Easily shared via a URL and do not require complex installation.
11. PROGRESSIVE WEB APP
Fast loading
Working offline
Launching from home screen
Receiving push notification
12. PROGRESSIVE WEB APP
Technologies
Commonly used technologies serve to create progressive web apps are the following:
Manifest
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 .
Service workers
Service workers provide a scriptable network proxy in the web browser to manage the web/HTTP requests
programmatically. They lie between the network and device to supply the content. They are capable of using the cache
mechanisms efficiently and allow error-free behavior during offline periods.
Push Notifications
The Notifications API lets a web page or app send notifications that are displayed outside the page at the system level;
this lets web apps send information to a user even if the application is idle or in the background.
Application shell architecture
‘shell’ that offers an initial static frame, layout, or a sort of architecture wherein the content may be loaded
progressively as well as dynamically.
13. PROGRESSIVE WEB APP
Example: flipboard.com
Progressive Apps are web
apps, they begin life in a
tab. Here we see
flipboard.com in Chrome for
Android with regular tab
treatment.
When users engage with
Progressive Apps enough,
browsers offer prompts that
ask users if they want to
keep them.
The app shortcut appears
on the homescreen or
launcher of the OS.
When launched, Progressive
Apps can choose to be full-
screen.
Progressive Apps are top-
level activities in the OS’s
application switcher.
15. PROGRESSIVE WEB APP
Why Progressive Web Apps are important? Why we need them?
A PWA is an all-in-one solution for a site/app to be delivered across all devices with hassle-free app-store distribution.
“Web apps upgraded to be first-class apps”
They can work in poor internet connectivity.
They are taking off around the world.
Global marketers use them to create a seamless user experience on mobile without building an app.
They use Low Data Consumption in compare to Mobile Apps.
Cost of a progressive web app:
For an app publisher, the biggest advantage is the cost saving in terms of app development and maintenance. Average costs may be
up to ten times smaller compared to those of native applications.
They will Save Money for Companies
Instance Update
Costs are Significantly Low
Work Great from SEO Perspective
Business Results
Expandable
Cross-platform
Backed by Google
Improved Performance
Zero install
No Need for App Store Submission
Technology has Reached Ideal Maturity Level
16. PROGRESSIVE WEB APP
Companies
• Big Brands are Coming On Board
• Google, Microsoft, and Apple are All Jumping on Board for Progressive Web Applications
• Google Will Take Lion’s Share of the Benefits
• PWAs will Bridge the App Gap for Microsoft
• Microsoft is Working Hard
• Chrome Apps Going the PWA Way
• Google Has Some Exciting Developments
• There are Endless Opportunities for FinTech
18. PROGRESSIVE WEB APP
The Outcome
Twitter
•The number of tweets sent increased by 75%
•The number of pages per session increases by 65%
•The bounce rate for them came down by 20%
•Images were optimized and the data consumption came
down by as much as 70%
Pinterest
•There was a 40% increase in the average time spent on the
site
•There was a 44% appreciation in the user-generated ad
revenue for the site
•There was a 50% increase in the ad click throughs on the site
•There was an overall 60% elevation in the core user
engagement
Forbes
•There was a 43% increase in session per user
•There was a 20% appreciation in ad viewability
•There was a three-fold increase in in-depth scroll
•There was a whopping 100% increase in User
engagement
Alibaba
•There was a 76% increase in the conversion all across
the browsers
•They witnessed a 4 times higher interaction rate from
“Add to Home Screen”
•They had 14% more monthly active users and 30%
more on Android
19. PROGRESSIVE WEB APP
Cons of PWAs
Limited Access to Native Features
Limited Support for Software Functionality
Cross Application Logins
Inexperience of In-House IT Teams
Slow first delivery
Not easy implementation
(20% - 100% effort to implement)
Pros of native-apps
They are faster
NFC Support
Interact Among Themselves
Wake Lock
Hidden Advantages of App Stores
20. PROGRESSIVE WEB APP
What Are Progressive Web Apps?
Progressive Web Apps Are Efficient And Economical.
Progressive Web Apps Are The Future.
Progressive Web Apps Are A Mobile-First Approach.
21. PROGRESSIVE WEB APP
Future
• Progressive web apps are very much in their
infancy as a technology and concept.
• With time, the PWAs should become more of
the standard for web applications than just the
interesting idea.
• PWAs are starting to become more of a
desired feature, with development companies
being hired to update a website to match the
new standards needed.