Introduction to Progressive Web Apps (PWA) as presented in Divum's New Product Developers Meet. PWA provides highly reliable, fast & engaged mobile like user experience on the web.
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).
Appurify - Runtime Debugging, Performance Optimization and Automated CIManish Lachwani
Mobile performance optimization, runtime debugging and continuous integration automated testing platform for iOS and Android devices.
Appurify is the EC2 for mobile, 1000's of mobile devices in dedicated/shared clouds both on-premise and off-premise.
Debug you html5, native, hybrid and browsers using Chrome and Safari dev tools.
Simulate network carrier conditions, location, accelerometer, magnetometer, low memory etc.
Client side load time optimization, time to intertact, server side, pcap/har etc.
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.
Guidance on how to develop a progressive web app using react native!Shelly Megan
This blog explains the usefulness of a Progressive Web App (PWA), reasons to choose the React Native framework for PWA creation & guidance on building PWA.
Bruce Lawson: Progressive Web Apps: the future of Appsbrucelawson
Native Apps, like Flash, are a bridging technology. Progressive Web Apps are a new suite of technologies that combine the user experience of native, with the immediacy and reach of the web. Learn why we have them, and how to make them.
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).
Appurify - Runtime Debugging, Performance Optimization and Automated CIManish Lachwani
Mobile performance optimization, runtime debugging and continuous integration automated testing platform for iOS and Android devices.
Appurify is the EC2 for mobile, 1000's of mobile devices in dedicated/shared clouds both on-premise and off-premise.
Debug you html5, native, hybrid and browsers using Chrome and Safari dev tools.
Simulate network carrier conditions, location, accelerometer, magnetometer, low memory etc.
Client side load time optimization, time to intertact, server side, pcap/har etc.
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.
Guidance on how to develop a progressive web app using react native!Shelly Megan
This blog explains the usefulness of a Progressive Web App (PWA), reasons to choose the React Native framework for PWA creation & guidance on building PWA.
Bruce Lawson: Progressive Web Apps: the future of Appsbrucelawson
Native Apps, like Flash, are a bridging technology. Progressive Web Apps are a new suite of technologies that combine the user experience of native, with the immediacy and reach of the web. Learn why we have them, and how to make them.
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/
With thousands of applications and millions of downloads, the App Store has been a resounding success that has prompted other phones manufacturers to develop their own App Stores. Developers and businesses alike took notice of the early success and sales of iPhone apps and now the rush is on to build native mobile applications. Now businesses say they need an mobile application before they know what the business case for the application will be. But are native applications really the future of mobile? What happened to the promise of the Mobile Web? And what about hybrid applications? When does it make sense to build each type of application? What are the limitations of each? And where is each technology headed? Learn how to make and informative decision between these two approaches.
Progressive Web Apps - presence or the future? For years, developers around the world have dreamed of being able to write web applications which act more like native apps. Caching and push notifications are not the only conveniences helping to make this dream a reality. In this talk, Jana will explain what Progressive Web Apps are and how you can use them in your own web applications.
Progressive Web Applications - The Next Gen Web TechnologiesGeekNightHyderabad
In a world where majority of the population is not actively connected to the Internet, how usable are the regular web applications? What are the technologies which would help us develop apps to include all these users? To answer this need and also to bring about a great user experience, we have Progressive Web Applications (PWAs) emerging.
The talk would cover what gaps in the traditional web apps and native apps led to the emergence of PWAs. What are PWAs and the underlying technologies for making a web app progressive. It also covers what are the challenges involved in developing PWAs.
Progressive Web Apps consist of a new palette of technologies such as the Web App Manifest, homescreen install support, Service Workers and the app shell. These bridge the gap between native and web apps offering new capabilities for web developers to create amazing desktop and mobile experiences.
Alex Russell Software Engineer, Google at Fastly Altitude 2016
New browser technologies are arriving that are poised to change user and developer expectations of what’s possible on the web; particularly on slow mobile devices with flaky connections. This talk discusses how these new technologies – Service Workers, Progressive Web Apps, HTTP/2, Push, Notifications, and Web Components are being combined, e.g. in the new PRPL pattern, to transform user experiences while improving business results.
Mobile Device Client Application Performance Testing XBOSoft
What is the most important factor in mobile UX?
Performance is perhaps the most important factor for mobile user experience. Your users will literally stop using your service if it does not respond fast enough.
But evaluating and testing the performance of a mobile application is not as straight forward as evaluating and testing the performance of traditional web-based solutions as there are several other variables such as application structure (browser versus native), network used (2G, 3G, 4G, etc.), payload structure, etc.
Mobile Performance Testing consists of three parts:
Part 1 - Client Application performance
Part 2 - Server performance
Part 3 - Network performance
This presentation is from part 1 of a series of 3 webinars in which we will explain these three parts.
It covers how to performance test mobile Client Applications on a mobile device. We will feature 'Angry Birds', explain how to performance test this mobile application and discuss what tools get the best results.
Progressive Web Apps (or PWA) are secure web apps, that by using modern web standards and progressive enhancement, can behave like native apps.
These slides are from the Lightning Talks I gave around the Netherlands in Januari 2017. The demo code is also available on Github at https://github.com/sorskoot/PWADemo.
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/
With thousands of applications and millions of downloads, the App Store has been a resounding success that has prompted other phones manufacturers to develop their own App Stores. Developers and businesses alike took notice of the early success and sales of iPhone apps and now the rush is on to build native mobile applications. Now businesses say they need an mobile application before they know what the business case for the application will be. But are native applications really the future of mobile? What happened to the promise of the Mobile Web? And what about hybrid applications? When does it make sense to build each type of application? What are the limitations of each? And where is each technology headed? Learn how to make and informative decision between these two approaches.
Progressive Web Apps - presence or the future? For years, developers around the world have dreamed of being able to write web applications which act more like native apps. Caching and push notifications are not the only conveniences helping to make this dream a reality. In this talk, Jana will explain what Progressive Web Apps are and how you can use them in your own web applications.
Progressive Web Applications - The Next Gen Web TechnologiesGeekNightHyderabad
In a world where majority of the population is not actively connected to the Internet, how usable are the regular web applications? What are the technologies which would help us develop apps to include all these users? To answer this need and also to bring about a great user experience, we have Progressive Web Applications (PWAs) emerging.
The talk would cover what gaps in the traditional web apps and native apps led to the emergence of PWAs. What are PWAs and the underlying technologies for making a web app progressive. It also covers what are the challenges involved in developing PWAs.
Progressive Web Apps consist of a new palette of technologies such as the Web App Manifest, homescreen install support, Service Workers and the app shell. These bridge the gap between native and web apps offering new capabilities for web developers to create amazing desktop and mobile experiences.
Alex Russell Software Engineer, Google at Fastly Altitude 2016
New browser technologies are arriving that are poised to change user and developer expectations of what’s possible on the web; particularly on slow mobile devices with flaky connections. This talk discusses how these new technologies – Service Workers, Progressive Web Apps, HTTP/2, Push, Notifications, and Web Components are being combined, e.g. in the new PRPL pattern, to transform user experiences while improving business results.
Mobile Device Client Application Performance Testing XBOSoft
What is the most important factor in mobile UX?
Performance is perhaps the most important factor for mobile user experience. Your users will literally stop using your service if it does not respond fast enough.
But evaluating and testing the performance of a mobile application is not as straight forward as evaluating and testing the performance of traditional web-based solutions as there are several other variables such as application structure (browser versus native), network used (2G, 3G, 4G, etc.), payload structure, etc.
Mobile Performance Testing consists of three parts:
Part 1 - Client Application performance
Part 2 - Server performance
Part 3 - Network performance
This presentation is from part 1 of a series of 3 webinars in which we will explain these three parts.
It covers how to performance test mobile Client Applications on a mobile device. We will feature 'Angry Birds', explain how to performance test this mobile application and discuss what tools get the best results.
Progressive Web Apps (or PWA) are secure web apps, that by using modern web standards and progressive enhancement, can behave like native apps.
These slides are from the Lightning Talks I gave around the Netherlands in Januari 2017. The demo code is also available on Github at https://github.com/sorskoot/PWADemo.
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.
I did a talk at DevFest Nord Italia 2016 about Progressive Web Apps, Hybrid and Native Apps, i've analyzed the pros and cons of the various technologies and described how to get started with Ionic, React Native and how work a Progressive Web App.
Charla de Alberto Silva en el Open Space 10 aniversario de Biko. El futuro de la web móvil ya llegó y se llama Progressive Web Apps. Sites normales que se “autoinstalan” en el móvil y emulan el funcionamiento de una aplicación nativa: icono en el home screen, carga instantánea, funcionamiento offline, notificaciones push, etc. Hablaremos del nuevo mercado que se abre ante nosotros y de cómo las desarrollamos: app shell, service workers, manifest.json, critical rendering path y notificaciones.
Growth of mobile web traffic has been outpacing desktop web traffic for years, and data reveals that users are likely to abandon experiences that too long to load.
Progressive web apps aim to be reliable, fast and engaging, regardless of form factor or quality of internet connection. We'll walk through several key aspects of PWAs, illustrating performance and usability improvements by showing quantitative comparisons to an equivalent "classic SPA".
Why Progressive Web App is what you need for your BusinessLets Grow Business
Progressive web apps can help you build a native app like experience for your business on web. No need to install apps, No pushing to various platform. Just one for all. Here is why you should be excited about PWA.
We have today on the web capabilities to create web apps that feel and act like native application.
We can have offline first, push notification and add to home screen. These three features bring us to a point where we can give users our content and features with one click and with all the benefits of the web.
What is this new monster you ask?
Well, go over these slides to learn more.
“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”
The Web has grown from sharing information as document to highly scalable application. With the introduction of Progressive web apps, we now have a whole new way to rethink and architect client applications across multiple platforms. The primary motive of a PWA is for it feel like a native app irrespective of the platform.
A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser.
in questa sessione si parla di come partire da un semplice sito web, renderlo responsive e una web application per poi evolverla in una progressive web app hostata su windows 10 e su microsoft azure.
Let's discover the differences between an app and a PWA by comparing native apps with PWAs over going through features and capabilities of Apple Podcast app. This talk is a brief overview of the capabilities project and providing native like app features on Web platform.
The main API for PWA creation is Service Workers, they are the heart of this “new web”. With Service workers, we can send push notifications to the user or do background sync and show data even when the user is offline. They are not some science fiction, but a script that is quite easy to use.
In this talk, we will see overview what are service workers and when and how to use them.
Building for cross-platform has moved beyond being an option, and on to being a necessity. Studies show that developers are increasingly turning to the web to build applications that run across platforms but it seems to choose "web" is only the first of a very many decision. NativeScript, TypeScript, React.js, React native, Angular, Ionic, SPA, PWA, and the list goes on. In this light-hearted yet informative session, we'll discuss the woes of being a developer working with web technologies, and some of the solutions to reaching all your users with a single cross-platform app.
What are the principles to build a progressive web app? What are its core features? What about its architecture? The blog explores it all. Give it a read. https://www.webguru-india.com/blog/checklist-for-progressive-web-app-development/
Learn how to build your own PWA enabled page in under 5 minutes ⚡️, what SPAs' have to do with PWA and how Shopware implements their headless commerce solution!
Progressive Web Apps –The Future of Apps Ashish Saxena
Mobile application development has evolved a lot. First, there were native mobile applications developed in Objective C & Swift for IOS and Java & Kotlin for android. Then came the hybrid apps which are mobile apps developed using web technologies like HTML, CSS, & JavaScript, but two years back a new kind of app start immerging called Progressive web apps(PWA), it blurs the line between native & mobile web.
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 servers, accessible through URLs, and indexed by search engines.
Everybody knows Javascript is single-threaded and that it shares this same thread with other browser-related processes such as painting and compositing. There are several techniques to implement pseudo multithreading in JavaScript; however, during this talk we will focus our attention on how to use and debug the Service Worker API. Our end goal is to explore practical use cases in order to simplify the process to render complex user interfaces and transitions in a browser.
2. Title Text
Understand the Battle of Web vs Apps
What are Progressive Web Apps (PWA)?
Few Statistics on PWA
PWA Components
PWA Libraries
Product Demo
Agenda
3. Mobile Apps Everywhere - A Decade of Revolution!
» Higher Reach!
» Better Personalisation!
» High performant!
» Use mobile device features
» Ability to work offline!
» Affordable on devices which are cheaper!
» Most important, it gave a brand presence
5. Web is Dead! (2010)
» Web couldn’t support offline content like
apps.
» It couldn’t provide a mechanism to reach the
user through push notification
» It couldn’t be high performant.
» It couldn’t get few basic device related
functionalities
» It got buried inside the browser!
» To simply put, it couldn’t behave app like.
6. BUT THERE WERE SERIOUS PROBLEM STARTED ARISING
WITH APPS!
7. Drop in the Users
App Store View Download Open
100% 70% 65%
14. Progressive Web Apps are user experiences that
have the reach of the web, and are:
» Reliable - Load instantly and never show the
downasaur, even in uncertain network
conditions.
» Fast - Respond quickly to user interactions
with silky smooth animations and no janky
scrolling.
» Engaging - Feel like a natural app on the
device, with an immersive user experience
What are Progressive Web Apps?
15. » Progressive - Work for every user, regardless of
browser choice because they’re built with progressive
enhancement as a core tenet.
» Responsive - Fit any form factor: desktop, mobile,
tablet, or forms yet to emerge
» Connectivity independent - Service workers allow
work 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 thanks to the service
worker update process.
PWA CHARACTERISTICS
» Safe - Served via HTTPS to prevent snooping and ensure
content hasn’t been tampered with.
» 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
» Linkable - Easily shared via a URL and do not require
complex installation.
16. Interesting stats on PWA - Flipkart Lite!
» Users time on site with Flipkart lite vs. previous mobile experience: 3.5 minutes vs
70 seconds..
» 3x more time spent on site
» 40% higher re-engagement rate
» 70% greater conversion rate among those arriving via Add to Homescreen
» 3x lower data usage
17. More stats on PWA - Google I/O 2016 App
» More engagement than the native app (4:06 min mobile web vs. Android's 2:40
min).
» 450ms faster first paint for return users thanks to service worker caching
» 84% of visitors supported Service Worker
» 3.8% users went offline but continued to generate 11k pageviews!
20. App Manifest
» Used to create a icon in the home screen
of the phone.
» Contains the url for different sizes of icons
» Contains the background color for the app
» Contains the Name for the app
» Contains the start url for the app
{
"name": "Weather",
"short_name": "Weather",
"icons": [{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
.
.
.
{
"src": "images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
<link rel="manifest" href="/manifest.json">
21. Service Worker
» Does caching of the App Shell - html/css/js in
the phone
» Update the Content in background
» Cache the dynamically served content in the
phone and returns it when required.
» Can inform the developer that whether the add
to home screen is clicked or not
» Gets the push notification id from the user to
send the notification.
» Invalidates the cache when needed!
24. sw-precache
Feature Summary
Precache Your App Shell Your web app's shell—its core HTML, JavaScript,
and CSS—can be precached when a user visits your
page.
Build-time Integration Drop it into your existing build process: Gulp, Grunt,
or command line.
Stay Fresh Changes in your build update the service worker
script. Users get updates, but you don't have to
manually version your content or caches.
No Network, No Problem Your static resources are served cache-first, quickly,
whether or not there's a network available.
25. sw-toolkit
Feature Summary
Runtime Caching Cache large or infrequently used resources, like
images, at runtime, when they're first used.
Offline Fallbacks Load fresh images, API responses, or other dynamic
content from the network while online, but fall back
to a cached placeholder while offline.
Goodbye Lie-Fi Fight lie-fi by automatically falling back to a cached
response when the network is too slow.
Battle Cache Bloat That image from last month doesn't need to be
cached forever. Least-recently used and age-based
cache expiration helps free up space.
26. sw-offline-google-analytics
Feature Summary
Offline Google Analytics Creates fetch handlers that ensure the Google
Analytics JavaScript is available offline.
Temporarily Caches Data Holds analytics requests that are made when the
device is offline and retries them the next time the
service worker starts up.
Custom Replay Values Key/value pairs to be added to replayed Google
Analytics requests. For example, you might set a
custom dimension to indicate that a request was
replayed.
Modified Hit Parameters Lets you programmatically modify a hit's parameters
to, for example, track the elapsed time between
when a hit is attempted and when it is replayed.
27. References
» PWA Developer Site
https://developers.google.com/web/progressive-web-apps/
» Lighthouse Chrome Plugin
To test the PWA score
28. No. 72 & 73, Krishna Reddy Colony,
Domlur, Bangalore - 560 071.
Sethuraman Vaideeswaran vaidee@divum.in
Prashant Gupta prashant.gupta@divum.in
Krishna S L krishna@divum.in
Muthanna P M muthanna@divum.in, +91-8197265056
Organising Committee Speakers Thanks to Supporters
Krishna S L
Vishnu Govind
Priyam Bose, Truecaller
Parul Soi, Google