SlideShare a Scribd company logo
Deepak D. Upadhyay
160511201754
MCA-4
A new way to deliver amazing user experiences on the web.
Progressive Web App (PWA)
 Production Use Case of PWD
 Flipkart Lite
 Housing
 Conclusion
 Description
 Introduction
 Features of PWA
 Principles of PWA
 Web App Manifest
 Add to Home Screen Banner
 Service Workers
 Push Notifications
Overview
Web development has evolved significantly over the years allowing
developers to deploy a website or web application and serve millions of
people around the globe within minutes. With just a browser, a user can
put in a URL and access a web application. With, Progressive Web
Apps, developers can deliver amazing app-like experiences to users
using modern web technologies.
Description
 A progressive web application is basically a website built using modern web
technologies but acts and feels like a mobile app.
 In 2015, Alex Russell, Google engineer, and Frances Berriman coined the
term Progressive Web Apps.
 Google has been immensely working on making sure that progressive web
apps can really give users that native-app like experience.
Introduction

Recommended for you

Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)

Progressive web apps (PWAs) are experiences that combine the best of the web and mobile apps. They load quickly, work offline, and feel like native mobile apps. The key aspects of PWAs include service workers for offline functionality, app shells for fast loading, and manifest files for home screen capabilities. PWAs use caching strategies and service workers to load from the cache first for offline access, then request updates from the network as needed. This provides a better user experience than online-first solutions which require network connectivity.

Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App

“Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience”

pwaangular pwaprogressive web app
Building a Progressive Web App
Building a  Progressive Web AppBuilding a  Progressive Web App
Building a Progressive Web App

The document discusses building progressive web apps (PWAs). PWAs are web applications that are fast, reliable and engaging like native mobile apps. The key aspects of PWAs discussed are: 1) They use technologies like service workers, web app manifests and push notifications to provide app-like capabilities and improve user experience and engagement on the web. 2) An example of Flipkart, an Indian e-commerce site, is provided which saw 3x time spent and 40% returning visitors with their PWA implementation. 3) Core features discussed that make PWAs engaging include fast loading, adding to homescreen for app-like launching, handling flaky networks well, instant reloading and

web developmentmobile webprogressive web apps
 The flow of a typical progressive web app goes thus:
 Starts out as accessible in tabs on the Web browser
 Shows the option of adding to the home screen of the device
 Progressively starts exhibiting app-like properties such as offline usage, push
notifications and background sync
Introduction
 Progressive: Work for every user, regardless of browser choice
because they’re built with progressive enhancement as a core.
 Responsive: Fit any form factor, desktop, mobile, tablet, or whatever
is next.
 Connectivity independent: Enhanced with service workers to work
offline or on low quality networks.
Features of Progressive Web App
 App-like: Use the app-shell model to provide app-style navigations
and interactions.
 Fresh: Always up-to-date thanks to the service worker update
process.
 Safe: Served via TLS to prevent snooping and ensure content hasn’t
been tampered with.
Features of Progressive Web App
 Discoverable: Are identifiable as “applications” thanks to W3C
manifests and service worker registration scope 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.
Features of Progressive Web App

Recommended for you

Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App

Progressive web apps (PWAs) are a new type of application that combines the best of the web and the best of native apps. PWAs use newer web platform features and service workers to deliver app-style experiences to users. Some key benefits of PWAs include providing responsive and reliable experiences that load instantly and feel like regular apps to users, while also being able to reach users on any device via a web URL rather than an app store. PWAs aim to reduce the barriers between the web and native apps.

appsmobile application developmentagile
Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx

Progressive Web Apps (PWAs) provide an app-like user experience through the use of features like service workers, web app manifests, and push notifications. They load instantly, work offline, and can be installed on the home screen without an app store. Service workers act as a proxy to cache resources, enabling fast and reliable performance even in uncertain network conditions. PWAs are responsive across devices and browsers, and feel natural on each platform due to their immersive, app-like interfaces.

pwaprogressivewebappweb
PWA
PWAPWA
PWA

A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements, are deployed to web servers and accessible through URLs (on HTTPS protocol).

pwaprogressive web appservice worker
Principles of Progressive Web App
1.Web App
Manifest
2.Add to
Home Screen
Banner
4.Push
Notification
3.Service
Workers
 The Manifest for Web applications is a simple JSON file that gives
you, the developer, the ability to control how your app appears to
the user in the areas that they would expect to see apps (for
example the device home screen), direct what the user can launch
and more importantly how they can launch it.
 The manifest enables your web app to have a more native-like
1.Web App Manifest
 It allows the app to be launched in full-screen mode, provides
control over the screen orientation and in recent versions of Chrome
on Android supports defining a Splash Screen and theme color for
the address bar.
 It is also used to define a set of icons by size and density used for
the aforementioned Splash screen and home screen icon.
1.Web App Manifest
1.Web App Manifest

Recommended for you

Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!

Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment. They are reliable, fast, engaging and delivering amazing UX to end users. And they are here! The slides are from my talk at http://2018.symfonycamp.org.ua/

pwaprogressive web appsjavascript
Build progressive web apps with Angular
Build progressive web apps with AngularBuild progressive web apps with Angular
Build progressive web apps with Angular

Progressive web apps (PWA) are becoming an industry standard for building web applications. With reliability, speed and immersive user experience in mind, PWAs help you reach a broader audience. In this session we will take an existing web app and convert it into a PWA. First, we'll make our application installable to homescreen by adding a Web App Manifest json file. Next, we'll focus on making our app reliable by enabling service workers inside our application and caching resources. Throughout this session we'll also learn how to use Lighthouse to test the performance of our PWA.

angularangular clipwa
Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)

Progressive Web Apps (PWA) allow web applications to have app-like capabilities by being installable, load quickly, and work offline or on low quality networks. PWAs use service workers to cache assets and API responses so that the app is able to function with limited or no network connection. Other features of PWAs include being responsive and being able to re-engage users with push notifications. The document provides an overview of PWAs and their capabilities as well as links to learn more and examples of existing PWA implementations.

javascriptpwahtml5
 Chrome on Android has support adding in your site to the home
screen for a while now, but recent versions also support proactively
suggesting sites be added using native Web App install banners.
2.Add to Home Screen Banner
 In order for the app install prompts to display your app must:
 A valid Web App manifest
 Served over HTTPS
 A valid service worker registered
 Be visited twice, with at least 5 minutes between visits
2.Add to Home Screen Banner
2.Add to Home Screen Banner
 A service worker is a script that runs in the background, separate
from your web page.
 It responds to events, including network requests made from pages
it serves. A service worker has an intentionally short lifetime.
3.Service Workers for Offline Caching

Recommended for you

Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your Business

Progressive Web Apps (PWAs) are web applications that have responsive designs, work offline, and can be installed on a user's home screen. Key features of PWAs include being responsive across devices, working offline through service workers, being discoverable through web app manifests, automatically updating, using secure HTTPS connections, and allowing users to re-engage through push notifications and installing on home screens without an app store. PWAs provide faster experiences for web users compared to regular websites and allow developers to engage users similar to native mobile apps.

web designonline businessdesign
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps

A Progressive Web App uses modern web capabilities to deliver an app-like user experience. Progressive Web Apps bring features we expect from native apps to the mobile browser experience in a way that uses standards-based technologies and run in a secure container accessible to anyone on the web.

progressive web appsjavascriptpwa
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...

Learn what are PWAs, all their benefits, pros and cons vs. native apps, how you can easily build and optimize one for growth.

seosearch engine optimizationpwa
 Service workers are powerful for offline caching but they also offer
significant performance wins in the form of instant loading for repeat
visits to your site or web app.
 You can cache your application shell so it works offline and populate
its content using JavaScript.
3.Service Workers for Offline Caching
3.Service Workers for Offline Catching
 Push notifications allow your users to opt-in to timely updates from
sites they love and allow you to effectively reengage them with
customized, engaging content.
4.Push Notification For Re-Engagement
4.Push Notification For Re-Engagement

Recommended for you

Angular PWA
Angular PWAAngular PWA
Angular PWA

This document provides an overview of progressive web apps with Angular, including what a PWA is, the key aspects like app shell model, instant loading, and offline support. It discusses how to sell the benefits of a PWA to stakeholders and describes the minimal viable components needed to create one using Angular CLI or Ionic, including a service worker to enable features like offline support. Examples of existing PWAs are also provided.

angular2pwa
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp Finland

Progressive web apps (PWAs) combine the best of the web and the best of mobile apps. PWAs use newer web capabilities like service workers and app manifests to deliver app-style experiences to users. There are six main steps to building a PWA: 1) creating a web app manifest, 2) registering a service worker, 3) adding files to cache, 4) deleting previous caches, 5) fetching data from the cache, and 6) adding a custom "Add to Home Screen" option. PWAs offer benefits like being installable, working offline, being discoverable, and loading instantly like regular web pages. WordPress plugins exist to help websites build PWAs and add features like

wordpresspwafinland
PWA Cheat Sheet 2023
PWA Cheat Sheet 2023PWA Cheat Sheet 2023
PWA Cheat Sheet 2023

The document discusses various features and capabilities of progressive web apps (PWAs). It covers topics like installation experiences, app experiences, platform integration, and more. Some key points include: - PWAs can be installed on devices for app-like experiences while working offline or online. Features like custom install buttons and enhanced install dialogs improve this experience. - App-related capabilities include theming, icons, splash screens, and desktop enhancements. Proper icons and splash screens optimize the experience across platforms. - Platform integration examines modern authentication, background syncing, and OS integration using APIs for files, protocols, notifications, and more. - The document provides an overview of developing PWAs

pwaweb developmentweb
 Several developers and companies have re-developed their websites
into progressive web apps.
 I'll give a summary of three significant products that are progressive
web apps and the benefits they have accrued over time.
Production Use Case of PWA
 3x less data usage
 40% higher re-
engagement rate
 Users spend more time
on the platform
 70% conversion rate
Flipkart Lite
 40% lower bounce rate
 10% longer average
session
 30% faster page load
Housing
 I will be able to cover basics of how progressive web apps work
in general.
 Building a high-quality Progressive Web App has incredible
benefits, making it easy to delight your users, grow
engagement and increase conversions.
Conclusion

Recommended for you

Mobile App Development Proposal Template PowerPoint Presentation Slides
Mobile App Development Proposal Template PowerPoint Presentation SlidesMobile App Development Proposal Template PowerPoint Presentation Slides
Mobile App Development Proposal Template PowerPoint Presentation Slides

If your company needs to submit a Mobile App Development Proposal Template PowerPoint Presentation Slides look no further. Our researchers have analyzed thousands of proposals on this topic for effectiveness and conversion. Just download our template, add your company data and submit to your client for a positive response. https://bit.ly/3jB7NAY

business proposalproposal templatesmobile app development
Progressive Web APP ( PWA )
Progressive Web APP ( PWA ) Progressive Web APP ( PWA )
Progressive Web APP ( PWA )

Progressive Web Apps are Web Apps which combines the best features of Web and Native Apps. It is progressive because it is constantly progressing.

programmingprogressive webcache
PWAs overview
PWAs overview PWAs overview
PWAs overview

in slides , you will be able to get a brief overview of PWAs, service workers and how to create a PWA.

angularprogrammingfrontend
Questions & Discussion
Progressive web app

More Related Content

What's hot

Pwa demystified
Pwa demystifiedPwa demystified
Pwa demystified
edynamic
 
Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016
Abdelrahman Omran
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
Akshay Sharma
 
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
Zhentian Wan
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
SaleemMalik52
 
Building a Progressive Web App
Building a  Progressive Web AppBuilding a  Progressive Web App
Building a Progressive Web App
Ido Green
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
Sankalp Khandelwal
 
Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx
Harish Karthick
 
PWA
PWAPWA
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
Antonio Peric-Mazar
 
Build progressive web apps with Angular
Build progressive web apps with AngularBuild progressive web apps with Angular
Build progressive web apps with Angular
Simona Cotin
 
Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)
Sandip Nirmal
 
Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your Business
Lets Grow Business
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Nitheesh T Ganesh
 
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Aleyda Solís
 
Angular PWA
Angular PWAAngular PWA
Angular PWA
Vinci Rufus
 
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp Finland
Imran Sayed
 
PWA Cheat Sheet 2023
PWA Cheat Sheet 2023PWA Cheat Sheet 2023
PWA Cheat Sheet 2023
Maximiliano Firtman
 
Mobile App Development Proposal Template PowerPoint Presentation Slides
Mobile App Development Proposal Template PowerPoint Presentation SlidesMobile App Development Proposal Template PowerPoint Presentation Slides
Mobile App Development Proposal Template PowerPoint Presentation Slides
SlideTeam
 
Progressive Web APP ( PWA )
Progressive Web APP ( PWA ) Progressive Web APP ( PWA )
Progressive Web APP ( PWA )
Bijaya Oli
 

What's hot (20)

Pwa demystified
Pwa demystifiedPwa demystified
Pwa demystified
 
Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)Introduction to Progressive web app (PWA)
Introduction to Progressive web app (PWA)
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Building a Progressive Web App
Building a  Progressive Web AppBuilding a  Progressive Web App
Building a Progressive Web App
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
 
Pwa.pptx
Pwa.pptxPwa.pptx
Pwa.pptx
 
PWA
PWAPWA
PWA
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
 
Build progressive web apps with Angular
Build progressive web apps with AngularBuild progressive web apps with Angular
Build progressive web apps with Angular
 
Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)
 
Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your Business
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
Progressive Web Apps (PWAs): Why you want one & how to optimize them #Applaus...
 
Angular PWA
Angular PWAAngular PWA
Angular PWA
 
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp Finland
 
PWA Cheat Sheet 2023
PWA Cheat Sheet 2023PWA Cheat Sheet 2023
PWA Cheat Sheet 2023
 
Mobile App Development Proposal Template PowerPoint Presentation Slides
Mobile App Development Proposal Template PowerPoint Presentation SlidesMobile App Development Proposal Template PowerPoint Presentation Slides
Mobile App Development Proposal Template PowerPoint Presentation Slides
 
Progressive Web APP ( PWA )
Progressive Web APP ( PWA ) Progressive Web APP ( PWA )
Progressive Web APP ( PWA )
 

Similar to Progressive web app

PWAs overview
PWAs overview PWAs overview
PWAs overview
TejinderMakkar
 
Progressive web application
Progressive web applicationProgressive web application
Progressive web application
RavikantGautam8
 
progressive web app
 progressive web app progressive web app
progressive web app
RAGINI .
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
Suraj Kumar
 
Checklist for progressive web app development
Checklist for progressive web app developmentChecklist for progressive web app development
Checklist for progressive web app development
WebGuru Infosystems Pvt. Ltd.
 
PWA basics for developers
PWA basics for developersPWA basics for developers
PWA basics for developers
Filip Rakowski
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Magic Software
 
Progressive web app testing
Progressive web app testingProgressive web app testing
Progressive web app testing
Kalhan Liyanage
 
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran KasireddyPWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
Sai Kiran Kasireddy
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
Saleh Rahimzadeh
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
AnjaliTanpure1
 
IRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of thingsIRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of things
IRJET Journal
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
Robert Nyman
 
Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020
Imran Sayed
 
Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps   Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps
Ashish Saxena
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
Alexandre Marreiros
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
Robert Nyman
 
Baobab WebSuite overview - Publisher's Toolbox
Baobab WebSuite overview - Publisher's ToolboxBaobab WebSuite overview - Publisher's Toolbox
Baobab WebSuite overview - Publisher's Toolbox
Publisher's Toolbox
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
Robert Nyman
 
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
mohitreal1995
 

Similar to Progressive web app (20)

PWAs overview
PWAs overview PWAs overview
PWAs overview
 
Progressive web application
Progressive web applicationProgressive web application
Progressive web application
 
progressive web app
 progressive web app progressive web app
progressive web app
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Checklist for progressive web app development
Checklist for progressive web app developmentChecklist for progressive web app development
Checklist for progressive web app development
 
PWA basics for developers
PWA basics for developersPWA basics for developers
PWA basics for developers
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
 
Progressive web app testing
Progressive web app testingProgressive web app testing
Progressive web app testing
 
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran KasireddyPWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
PWA ( Progressive Web Apps ) - Sai Kiran Kasireddy
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
 
IRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of thingsIRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of things
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020
 
Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps   Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
 
Baobab WebSuite overview - Publisher's Toolbox
Baobab WebSuite overview - Publisher's ToolboxBaobab WebSuite overview - Publisher's Toolbox
Baobab WebSuite overview - Publisher's Toolbox
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
 
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
 

More from Deepak Upadhyay

Power of positive attitude
Power of positive attitudePower of positive attitude
Power of positive attitude
Deepak Upadhyay
 
EFFICIENT DATA EXTRACTION USING ARTIFICIAL INTELLIGENCE
EFFICIENT DATA EXTRACTION USING  ARTIFICIAL INTELLIGENCEEFFICIENT DATA EXTRACTION USING  ARTIFICIAL INTELLIGENCE
EFFICIENT DATA EXTRACTION USING ARTIFICIAL INTELLIGENCE
Deepak Upadhyay
 
Holographic Data Storage
Holographic Data StorageHolographic Data Storage
Holographic Data Storage
Deepak Upadhyay
 
Augmented Reality
Augmented RealityAugmented Reality
Augmented Reality
Deepak Upadhyay
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Deepak Upadhyay
 
Linux fundamentals
Linux fundamentalsLinux fundamentals
Linux fundamentals
Deepak Upadhyay
 
ADBMS (MySql) tiny project
ADBMS (MySql) tiny projectADBMS (MySql) tiny project
ADBMS (MySql) tiny project
Deepak Upadhyay
 
Man in The Middle Attack
Man in The Middle AttackMan in The Middle Attack
Man in The Middle Attack
Deepak Upadhyay
 
You Are Born To Blossom by Dr. APJ Abdul Kalam Book Review
You Are Born To Blossom by Dr. APJ Abdul Kalam Book ReviewYou Are Born To Blossom by Dr. APJ Abdul Kalam Book Review
You Are Born To Blossom by Dr. APJ Abdul Kalam Book Review
Deepak Upadhyay
 
Online notice board
Online notice boardOnline notice board
Online notice board
Deepak Upadhyay
 

More from Deepak Upadhyay (10)

Power of positive attitude
Power of positive attitudePower of positive attitude
Power of positive attitude
 
EFFICIENT DATA EXTRACTION USING ARTIFICIAL INTELLIGENCE
EFFICIENT DATA EXTRACTION USING  ARTIFICIAL INTELLIGENCEEFFICIENT DATA EXTRACTION USING  ARTIFICIAL INTELLIGENCE
EFFICIENT DATA EXTRACTION USING ARTIFICIAL INTELLIGENCE
 
Holographic Data Storage
Holographic Data StorageHolographic Data Storage
Holographic Data Storage
 
Augmented Reality
Augmented RealityAugmented Reality
Augmented Reality
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
 
Linux fundamentals
Linux fundamentalsLinux fundamentals
Linux fundamentals
 
ADBMS (MySql) tiny project
ADBMS (MySql) tiny projectADBMS (MySql) tiny project
ADBMS (MySql) tiny project
 
Man in The Middle Attack
Man in The Middle AttackMan in The Middle Attack
Man in The Middle Attack
 
You Are Born To Blossom by Dr. APJ Abdul Kalam Book Review
You Are Born To Blossom by Dr. APJ Abdul Kalam Book ReviewYou Are Born To Blossom by Dr. APJ Abdul Kalam Book Review
You Are Born To Blossom by Dr. APJ Abdul Kalam Book Review
 
Online notice board
Online notice boardOnline notice board
Online notice board
 

Recently uploaded

一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
taqyea
 
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
taqyea
 
cyber-security-training-presentation-q320.ppt
cyber-security-training-presentation-q320.pptcyber-security-training-presentation-q320.ppt
cyber-security-training-presentation-q320.ppt
LiamOConnor52
 
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
taqyea
 
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
taqyea
 
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
taqyea
 
Carrington degree offer diploma Transcript
Carrington degree offer diploma TranscriptCarrington degree offer diploma Transcript
Carrington degree offer diploma Transcript
ubufe
 
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
taqyea
 
Lincoln University degree offer diploma Transcript
Lincoln University degree offer diploma TranscriptLincoln University degree offer diploma Transcript
Lincoln University degree offer diploma Transcript
ubufe
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99
 
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
ffg01100
 
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
taqyea
 
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur
 
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
taqyea
 
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
taqyea
 
Jarren Duran Fuck EM T shirts Jarren Duran Fuck EM T shirts
Jarren Duran Fuck EM T shirts Jarren Duran Fuck EM T shirtsJarren Duran Fuck EM T shirts Jarren Duran Fuck EM T shirts
Jarren Duran Fuck EM T shirts Jarren Duran Fuck EM T shirts
exgf28
 
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
taqyea
 
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
taqyea
 
University of Otago degree offer diploma Transcript
University of Otago degree offer diploma TranscriptUniversity of Otago degree offer diploma Transcript
University of Otago degree offer diploma Transcript
ubufe
 
How to Choose the Right UIUX Design Service for Optimal Customer Experience
How to Choose the Right UIUX Design Service for Optimal Customer ExperienceHow to Choose the Right UIUX Design Service for Optimal Customer Experience
How to Choose the Right UIUX Design Service for Optimal Customer Experience
Serva AppLabs
 

Recently uploaded (20)

一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
一比一原版(ic毕业证书)英国帝国理工学院毕业证如何办理
 
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
 
cyber-security-training-presentation-q320.ppt
cyber-security-training-presentation-q320.pptcyber-security-training-presentation-q320.ppt
cyber-security-training-presentation-q320.ppt
 
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
 
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
一比一原版(bristol毕业证书)英国布里斯托大学毕业证如何办理
 
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
一比一原版澳洲巴拉特大学毕业证(utas毕业证书)如何办理
 
Carrington degree offer diploma Transcript
Carrington degree offer diploma TranscriptCarrington degree offer diploma Transcript
Carrington degree offer diploma Transcript
 
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
 
Lincoln University degree offer diploma Transcript
Lincoln University degree offer diploma TranscriptLincoln University degree offer diploma Transcript
Lincoln University degree offer diploma Transcript
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
 
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
 
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
 
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
 
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
一比一原版(bu毕业证书)英国伯恩茅斯大学毕业证如何办理
 
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
 
Jarren Duran Fuck EM T shirts Jarren Duran Fuck EM T shirts
Jarren Duran Fuck EM T shirts Jarren Duran Fuck EM T shirtsJarren Duran Fuck EM T shirts Jarren Duran Fuck EM T shirts
Jarren Duran Fuck EM T shirts Jarren Duran Fuck EM T shirts
 
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
 
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国���学院毕业证如何办理一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
 
University of Otago degree offer diploma Transcript
University of Otago degree offer diploma TranscriptUniversity of Otago degree offer diploma Transcript
University of Otago degree offer diploma Transcript
 
How to Choose the Right UIUX Design Service for Optimal Customer Experience
How to Choose the Right UIUX Design Service for Optimal Customer ExperienceHow to Choose the Right UIUX Design Service for Optimal Customer Experience
How to Choose the Right UIUX Design Service for Optimal Customer Experience
 

Progressive web app

  • 1. Deepak D. Upadhyay 160511201754 MCA-4 A new way to deliver amazing user experiences on the web. Progressive Web App (PWA)
  • 2.  Production Use Case of PWD  Flipkart Lite  Housing  Conclusion  Description  Introduction  Features of PWA  Principles of PWA  Web App Manifest  Add to Home Screen Banner  Service Workers  Push Notifications Overview
  • 3. Web development has evolved significantly over the years allowing developers to deploy a website or web application and serve millions of people around the globe within minutes. With just a browser, a user can put in a URL and access a web application. With, Progressive Web Apps, developers can deliver amazing app-like experiences to users using modern web technologies. Description
  • 4.  A progressive web application is basically a website built using modern web technologies but acts and feels like a mobile app.  In 2015, Alex Russell, Google engineer, and Frances Berriman coined the term Progressive Web Apps.  Google has been immensely working on making sure that progressive web apps can really give users that native-app like experience. Introduction
  • 5.  The flow of a typical progressive web app goes thus:  Starts out as accessible in tabs on the Web browser  Shows the option of adding to the home screen of the device  Progressively starts exhibiting app-like properties such as offline usage, push notifications and background sync Introduction
  • 6.  Progressive: Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core.  Responsive: Fit any form factor, desktop, mobile, tablet, or whatever is next.  Connectivity independent: Enhanced with service workers to work offline or on low quality networks. Features of Progressive Web App
  • 7.  App-like: Use the app-shell model to provide app-style navigations and interactions.  Fresh: Always up-to-date thanks to the service worker update process.  Safe: Served via TLS to prevent snooping and ensure content hasn’t been tampered with. Features of Progressive Web App
  • 8.  Discoverable: Are identifiable as “applications” thanks to W3C manifests and service worker registration scope 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. Features of Progressive Web App
  • 9. Principles of Progressive Web App 1.Web App Manifest 2.Add to Home Screen Banner 4.Push Notification 3.Service Workers
  • 10.  The Manifest for Web applications is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the device home screen), direct what the user can launch and more importantly how they can launch it.  The manifest enables your web app to have a more native-like 1.Web App Manifest
  • 11.  It allows the app to be launched in full-screen mode, provides control over the screen orientation and in recent versions of Chrome on Android supports defining a Splash Screen and theme color for the address bar.  It is also used to define a set of icons by size and density used for the aforementioned Splash screen and home screen icon. 1.Web App Manifest
  • 13.  Chrome on Android has support adding in your site to the home screen for a while now, but recent versions also support proactively suggesting sites be added using native Web App install banners. 2.Add to Home Screen Banner
  • 14.  In order for the app install prompts to display your app must:  A valid Web App manifest  Served over HTTPS  A valid service worker registered  Be visited twice, with at least 5 minutes between visits 2.Add to Home Screen Banner
  • 15. 2.Add to Home Screen Banner
  • 16.  A service worker is a script that runs in the background, separate from your web page.  It responds to events, including network requests made from pages it serves. A service worker has an intentionally short lifetime. 3.Service Workers for Offline Caching
  • 17.  Service workers are powerful for offline caching but they also offer significant performance wins in the form of instant loading for repeat visits to your site or web app.  You can cache your application shell so it works offline and populate its content using JavaScript. 3.Service Workers for Offline Caching
  • 18. 3.Service Workers for Offline Catching
  • 19.  Push notifications allow your users to opt-in to timely updates from sites they love and allow you to effectively reengage them with customized, engaging content. 4.Push Notification For Re-Engagement
  • 20. 4.Push Notification For Re-Engagement
  • 21.  Several developers and companies have re-developed their websites into progressive web apps.  I'll give a summary of three significant products that are progressive web apps and the benefits they have accrued over time. Production Use Case of PWA
  • 22.  3x less data usage  40% higher re- engagement rate  Users spend more time on the platform  70% conversion rate Flipkart Lite
  • 23.  40% lower bounce rate  10% longer average session  30% faster page load Housing
  • 24.  I will be able to cover basics of how progressive web apps work in general.  Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions. Conclusion