Contenu connexe


Progressive web application

  1. PWA stands for progressive web application “PWA describe set of features of technologies, which can be added to existing web application to turn them into native mobile app like experience” INTRODUCTIO N 1 Example of PWA : Flipkart Lite, Twitter Lite etc;
  2. In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "progressive web apps to describe apps taking advantage of new features supported by modern browsers, including service workers and web app manifests, that let users upgrade web apps to progressive web applications in their native operating system(OS) History of PWA
  3. 3 Progressively enhance web apps to look and feel like native app
  4. 4 Features of progressive web application: Progressive - Work for every user, regardless of browser choice. Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge. 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. Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with. 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.
  5. 5 Access provided to PWA • Offline Accessibility • Access Device Camera • Access User Location • Push Notification • Having permission to use Cache memory
  6. 6Mobile App Vs Mobile Web 2015 Servay held in USA provide us the above statistics Push notification brings user back Home screen icons make access easy Acess native device features like camera ,location and many more Possibly work offline Why we use Native app
  7. 7Advantage of Progressive web Application No need to learn other languages , it uses the language used in web application development Work in offline mode also It takes less time to load as native app and website takes It requires less internet speed as other app and websites takes No need to learn different platform languages It works on every operating system No need to go to playstore or appstore You can just add the websites to your Home screen for further interaction
  8. 8Demo of PWA
  9. 9 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 WEB APP MANIFEST
  10. 10 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 nativeWeb App install banners. ADD TO HOME SCREEN BANNER
  11. 11 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. SERVICE WORKER FOR OFFLINE CACHING
  12. 12 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. PUSH NOTIFICATIONS FOR RE- ENGAGEMENT
  13. 13 How to check is web is progressive 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.
  14. 14 Limitation of PWA It is HTML 5 supportive No store available so that we cant know which one is PWA It cannot interact with other app installed on the device
  15. 15 Conclusion We can reach huge audience with these features ,these web app work on mostly all the browser Probably every web application will be PWA in future
  16. 16