General Introduction to Progressive Web Apps(PWA) (original) (raw)

Last Updated : 30 Apr, 2019

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