General Introduction to Progressive Web Apps(PWA)

What is an App?

  • Must be findable in App Store
  • Icons must be present on Home Screen
  • Touch and Gesture Controls
  • Works Offline
  • Receives push notifications
  • Background processing
  • Access to hardware features and sensors

What is the Web ?

  • Contains URLs and Links
  • Markup and styling that must be readable by both humans and machines
  • Progressively enhanced
  • Free to implement

What is a Progressive Web App?
It is a Website that takes all the right vitamins and must possess all the following functionalities :



  • Responsive
  • Works offline
  • App-like interaction (Must have the same look and feel)
  • Fresh (Must be up-to-date)
  • Safe (Secured, no third parties snoops)
  • Discoverable (Search engines are able to find it)
  • Re-engageable (Push Notifications)
  • Installable (Able to get a shortcut on Home Screen)
  • Linkable

Capabilities of Progressive Web Apps :

  • Network Proxy
  • Application packaging
  • Local storage
  • Background sync
  • Device vibration
  • Battery status
  • Integrated payments
  • Peer to peer
  • Page visibility
  • Media capture
  • Media playback
  • Web share
  • Credential Management

Prerequisites :

    Java Script
    Service Worker

PWA brings a lot of benefits and functionality to the web, they don’t require rewriting the entire application. Any app can be converted to a PWA by adding a few extra layers to it.

Steps to create PWA :

  • Serve over HTTPS
  • Create an application shell
  • Register a Service Worker
  • Add push notifications
  • Add web app manifest
  • Configure the install prompt
  • Analyze your app’s performance
  • Audit your app with Lighthouse

Main functionalities that must be present in PWA are :

  • Available Offline
  • Adding to Home Screen
  • Send Push Notifications
  • Background Syncing

Progressive Web Apps (available online) :

Visit the following sites for Web Apps :

  • https://pwa.rocks/
  • https://sodapopped.com/
  • Advantages :

    • Low Data Usage
    • No updates required
    • Low Cost
    • Best for SEO
    • Allowed to send push notifications
    • Can work in offline mode

    Disadvantages :

    • Not a fully functional app
    • Poor compatibility
    • User will not get the native app experience


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    2


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.