SlideShare a Scribd company logo
Progressive Web Apps
(PWA)
By
P.Harish
Why build Progressive Web
Apps?
Pwa.pptx
80%
OF TIME SPENT IS IN
USERS’ TOP 3 APPS

Recommended for you

Progressive web app
Progressive web appProgressive web app
Progressive web app

Progressive Web App New Web Technology for the Mobile User Which work on Poor Data Connection and It Will Work With Simple Manifest File Or with use of Service Workers. It Feel Like Mobile App to the user.

internetnew mediaphp
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

Progressive web applications (PWAs) are web-based applications that are built using modern web capabilities and provide app-like experiences to users. PWAs use service workers, manifest files, and the app shell model to deliver fast, reliable and engaging experiences to users regardless of network conditions. Major companies like Flipkart and BookMyShow have seen success adopting PWAs, with Flipkart's PWA increasing user engagement and conversion rates while reducing data usage compared to their previous mobile website. As browser and platform support for PWAs grows, more organizations are expected to adopt the technology to build applications.

progressive web applicationsseminarpwa
Capability
Web
Capability
Reach
WebWeb
*
Capability
Reach
WebWeb
PWA
What is progressive web app?
A Progressive Web App is:
▶Progressive - Works for every user, regardless of browser
choice because it's built with progressive enhancement as a
core tenet.
▶Responsive - Fits any form factor: desktop, mobile, tablet,
or whatever is next.
▶Connectivity independent - Enhanced with service workers
to work offline or on low-quality networks.
▶App-like - Feels like an app, because the app shell model
separates the application functionality from application
content .
▶Fresh - Always up-to-date thanks to the service
worker update process.

Recommended for you

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

My #ProgressiveWebApps presentation is available online now  Use it, learn more, and be awesome  https://goo.gl/TbgI7d

progressivewebappspwa
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
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
What is progressive web app?
▶ Safe - Served via HTTPS2 to prevent snooping and to
ensure content hasn't been tampered with.
▶ Discoverable - Is identifiable as an "application" thanks
to W3C manifest and service worker registration scope,
allowing search engines to find it.
▶ Re-engageable - Makes re-engagement easy through
features like push notifications.
▶ Installable - Allows users to add apps they find most
useful to their home screen without the hassle of an app
store.
Progressive Web Apps are user
experiences :
▶ Reliable - Load instantly and never show the down , even
in uncertain network conditions.
▶ Fast - Respond quickly to user interactions with silky
smooth animations and no junky scrolling.
▶ Engaging - Feel like a natural app on the device, with an
immersive user experience.
Reliable
When launched from the user’s home screen, service workers enable a Progressive Web
App to load instantly, regardless of the network state.
A service worker, written in JavaScript, is like a client-side proxy and puts you in control
of the cache and how to respond to resource requests. By pre-caching key resources you
can eliminate the dependence on the network, ensuring an instant and reliable
experience for your users.
Fast
53% of users will abandon a site if it takes longer than 3 seconds to
load! And once loaded, users expect them to be fast—no junky
scrolling or slow-to-respond interfaces.

Recommended for you

Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps

Progressive Web Apps presentation for GDG Istanbul's Progressive Web Apps Meetup. I'm not a web developer or front-end developer but I tried to explain how PWAs work.

progressive web appspwamobile
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
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
Engaging
Progressive Web Apps are installable and live on the user's home screen, without the need for
an app store. They offer an immersive full screen experience with help from a web app
manifest file and can even re-engage users with web push notifications.
The Web App Manifest allows you to control how your app appears and how it's launched. You
can specify home screen icons, the page to load when the app is launched, screen
orientation, and even whether or not to show the browser chrome.
Pwa.pptx
Pwa.pptx
of users bounce from sites that
take longer than 3 seconds to load40%

Recommended for you

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
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
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 enable reliable performance
Web server
Service worker
Client side proxy written
in JavaScript
Cache
What is a service worker?
▶ A service worker is a script that your browser runs in the background,
separate from a web page, opening the door to features that don't need a
web page or user interaction. they already include features like push
notifications and background sync.
▶ It's a JavaScript Worker, so it can't access the DOM directly. Instead, a service
worker can communicate with the pages it controls by responding to messages
sent via the post Message interface, and those pages can manipulate the DOM
if needed.
▶ Service worker is a programmable network proxy, allowing you to control how
network requests from your page are handled
Pwa.pptx
4x 10x
faster less data
<1 second
median load time

Recommended for you

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
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework

This document provides an introduction to hybrid mobile applications and the Ionic framework. It discusses the differences between native and hybrid apps, and introduces Ionic as a framework that allows building mobile apps using HTML, CSS, and JavaScript. The document outlines components of Ionic including AngularJS, Cordova, plugins, and the ecosystem. It also covers basic Ionic concepts such as installation, commands, directory structure, routing, views, and UI components. The agenda concludes with a demo of a TODO list application built with Ionic.

#ionic#cordova#hybridapp
An Introduction of Node Package Manager (NPM)
An Introduction of Node Package Manager (NPM)An Introduction of Node Package Manager (NPM)
An Introduction of Node Package Manager (NPM)

NPM is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry.

npmnode package managernpm introduction
<amp-install-serviceworker>
Tools
Lighthouse is an open-source, automated tool for improving the
quality of web pages. You can run it against any web page,
public or requiring authentication. It has audits for
performance, accessibility, progressive web apps, and more.
Reference Sites
● https://serviceworke.rs/
● https://developer.mozilla.org/en-US/Apps/Progressive
● https://developers.google.com/web/progressive-web-apps/

More Related Content

What's hot

Building a Progressive Web App
Building a  Progressive Web AppBuilding a  Progressive Web App
Building a Progressive Web App
Ido Green
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
Subodh Garg
 
PWA - Progressive Web App
PWA - Progressive Web AppPWA - Progressive Web App
PWA - Progressive Web App
Robert Robinson
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
Deepak Upadhyay
 
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
Akshay Sharma
 
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
 
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
 
PWA
PWAPWA
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
R. Caner Yıldırım
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
Sankalp Khandelwal
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
Antonio Peric-Mazar
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Nitheesh T Ganesh
 
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
 
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
 
Progressive Web APP ( PWA )
Progressive Web APP ( PWA ) Progressive Web APP ( PWA )
Progressive Web APP ( PWA )
Bijaya Oli
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
Thinh VoXuan
 
An Introduction of Node Package Manager (NPM)
An Introduction of Node Package Manager (NPM)An Introduction of Node Package Manager (NPM)
An Introduction of Node Package Manager (NPM)
iFour Technolab Pvt. Ltd.
 
Angular PWA
Angular PWAAngular PWA
Angular PWA
Vinci Rufus
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
Milind Gokhale
 

What's hot (20)

Building a Progressive Web App
Building a  Progressive Web AppBuilding a  Progressive Web App
Building a Progressive Web App
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
PWA - Progressive Web App
PWA - Progressive Web AppPWA - Progressive Web App
PWA - Progressive Web App
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
 
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 / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Apps / GDG DevFest - Season 2016
 
Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)Introduction to Progressive Web Apps (PWA)
Introduction to Progressive Web Apps (PWA)
 
PWA
PWAPWA
PWA
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
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): 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...
 
Progressive Web APP ( PWA )
Progressive Web APP ( PWA ) Progressive Web APP ( PWA )
Progressive Web APP ( PWA )
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
An Introduction of Node Package Manager (NPM)
An Introduction of Node Package Manager (NPM)An Introduction of Node Package Manager (NPM)
An Introduction of Node Package Manager (NPM)
 
Angular PWA
Angular PWAAngular PWA
Angular PWA
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
 

Similar to Pwa.pptx

Progressive Web Apps - Up & Running
Progressive Web Apps - Up & RunningProgressive Web Apps - Up & Running
Progressive Web Apps - Up & Running
Suraj Kumar
 
Progressive web app testing
Progressive web app testingProgressive web app testing
Progressive web app testing
Kalhan Liyanage
 
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.
 
progressive web app
 progressive web app progressive web app
progressive web app
RAGINI .
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
Padmaashree K
 
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
 
The importance of developing PWAs in ReactJs
The importance of developing PWAs in ReactJsThe importance of developing PWAs in ReactJs
The importance of developing PWAs in ReactJs
ReactJS
 
Progressive web application
Progressive web applicationProgressive web application
Progressive web application
RavikantGautam8
 
PWA demystified
PWA demystifiedPWA demystified
PWA demystified
Pradeep Patel, PMP®
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Saikiran Sheshagiri
 
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
 
Progressive web apps for e commerce
Progressive web apps for e commerceProgressive web apps for e commerce
Progressive web apps for e commerce
ShantanuApurva1
 
PWAs overview
PWAs overview PWAs overview
PWAs overview
TejinderMakkar
 
Service workers are your best friends
Service workers are your best friendsService workers are your best friends
Service workers are your best friends
Antonio Peric-Mazar
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
Suraj Kumar
 
SEMINAR (pwa).pptx
SEMINAR (pwa).pptxSEMINAR (pwa).pptx
SEMINAR (pwa).pptx
BasitMir10
 
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
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
AnjaliTanpure1
 
A year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMUA year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMU
Antonio Peric-Mazar
 
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
 

Similar to Pwa.pptx (20)

Progressive Web Apps - Up & Running
Progressive Web Apps - Up & RunningProgressive Web Apps - Up & Running
Progressive Web Apps - Up & Running
 
Progressive web app testing
Progressive web app testingProgressive web app testing
Progressive web app testing
 
Checklist for progressive web app development
Checklist for progressive web app developmentChecklist for progressive web app development
Checklist for progressive web app development
 
progressive web app
 progressive web app progressive web app
progressive web app
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
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
 
The importance of developing PWAs in ReactJs
The importance of developing PWAs in ReactJsThe importance of developing PWAs in ReactJs
The importance of developing PWAs in ReactJs
 
Progressive web application
Progressive web applicationProgressive web application
Progressive web application
 
PWA demystified
PWA demystifiedPWA demystified
PWA demystified
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
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
 
Progressive web apps for e commerce
Progressive web apps for e commerceProgressive web apps for e commerce
Progressive web apps for e commerce
 
PWAs overview
PWAs overview PWAs overview
PWAs overview
 
Service workers are your best friends
Service workers are your best friendsService workers are your best friends
Service workers are your best friends
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
SEMINAR (pwa).pptx
SEMINAR (pwa).pptxSEMINAR (pwa).pptx
SEMINAR (pwa).pptx
 
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
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
 
A year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMUA year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMU
 
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
 

Recently uploaded

NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Softwares
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
sofiafernandezon
 
Splunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptxSplunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptx
sudsdeep
 
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTIONBITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
ssuser2b426d1
 
How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
Ortus Solutions, Corp
 
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdfdachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
DNUG e.V.
 
What is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for FreeWhat is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for Free
TwisterTools
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
karim wahed
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdfAWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
karim wahed
 
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
ThousandEyes
 
ThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and DjangoThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and Django
akshesh doshi
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
SimonedeGijt
 
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdfWhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
onemonitarsoftware
 
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Asher Sterkin
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
Hironori Washizaki
 
dachnug51 - Whats new in domino 14 .pdf
dachnug51 - Whats new in domino 14  .pdfdachnug51 - Whats new in domino 14  .pdf
dachnug51 - Whats new in domino 14 .pdf
DNUG e.V.
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
shivamt017
 
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
bhatinidhi2001
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
e-Definers Technology
 
Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
MaisnamLuwangPibarel
 

Recently uploaded (20)

NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial Company
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
 
Splunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptxSplunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptx
 
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTIONBITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
BITCOIN HEIST RANSOMEWARE ATTACK PREDICTION
 
How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
 
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdfdachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
 
What is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for FreeWhat is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for Free
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdfAWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
 
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
 
ThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and DjangoThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and Django
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
 
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdfWhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
 
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
 
dachnug51 - Whats new in domino 14 .pdf
dachnug51 - Whats new in domino 14  .pdfdachnug51 - Whats new in domino 14  .pdf
dachnug51 - Whats new in domino 14 .pdf
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
 
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
 
Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
 

Pwa.pptx

  • 4. 80% OF TIME SPENT IS IN USERS’ TOP 3 APPS
  • 8. What is progressive web app? A Progressive Web App is: ▶Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. ▶Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next. ▶Connectivity independent - Enhanced with service workers to work offline or on low-quality networks. ▶App-like - Feels like an app, because the app shell model separates the application functionality from application content . ▶Fresh - Always up-to-date thanks to the service worker update process.
  • 9. What is progressive web app? ▶ Safe - Served via HTTPS2 to prevent snooping and to ensure content hasn't been tampered with. ▶ Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it. ▶ Re-engageable - Makes re-engagement easy through features like push notifications. ▶ Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.
  • 10. Progressive Web Apps are user experiences : ▶ Reliable - Load instantly and never show the down , even in uncertain network conditions. ▶ Fast - Respond quickly to user interactions with silky smooth animations and no junky scrolling. ▶ Engaging - Feel like a natural app on the device, with an immersive user experience.
  • 11. Reliable When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state. A service worker, written in JavaScript, is like a client-side proxy and puts you in control of the cache and how to respond to resource requests. By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.
  • 12. Fast 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no junky scrolling or slow-to-respond interfaces.
  • 13. Engaging Progressive Web Apps are installable and live on the user's home screen, without the need for an app store. They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications. The Web App Manifest allows you to control how your app appears and how it's launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.
  • 16. of users bounce from sites that take longer than 3 seconds to load40%
  • 17. Service workers enable reliable performance Web server Service worker Client side proxy written in JavaScript Cache
  • 18. What is a service worker? ▶ A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. they already include features like push notifications and background sync. ▶ It's a JavaScript Worker, so it can't access the DOM directly. Instead, a service worker can communicate with the pages it controls by responding to messages sent via the post Message interface, and those pages can manipulate the DOM if needed. ▶ Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled
  • 20. 4x 10x faster less data <1 second median load time
  • 22. Tools Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
  • 23. Reference Sites ● https://serviceworke.rs/ ● https://developer.mozilla.org/en-US/Apps/Progressive ● https://developers.google.com/web/progressive-web-apps/