If you are a web development geek like us here at GeekyMinds, you must have heard the term PWA a lot. PWA stands for Progressive Web App. Why are Progressive Web Apps so important for the web developers and what’s in it for the common user? Let’s find out!
Progressive Web Apps are the next generation of web technologies and they set themselves apart from web applications by behaving more like a native app. For example, just like native apps, Progressive Web Apps:
- Can be installed on your device (PC or Mobile)
- Load faster and can be used online or offline
- Can push notifications to your device.
The Benefits of Progressive Web Apps
Being able to let the customers/users of your web application install it on their smartphone without you having to build a native app sounds cool, right?
Unlike native applications, Progressive Web Apps are lightweight as they consume fewer resources to run on a device. Not only do they consume lower storage space, but they also consume less memory and they are updated automatically, eliminating the need of the user to update the app from the store.
Progressive Web Apps are cross-platform and will work everywhere, regardless of whether your users are on a Surface Book, Android phone, iPad, or Xbox One. All of the major browsers now support the Service Worker API that enables PWAs to look and feel like native apps.
How Do Progressive Web Apps Work?
Progressive Web Apps require three prerequisites:
- Served over HTTPS
- A Service Worker module
- A Web App Manifest
Related: HTTP, HTTPS and SSL Explained
- Cache the crucial resources (HTML, CSS and JS files) of your website on the client device so that your website launches even when the client device is offline. This is how your site works offline like any other native app.
- Enables your web app to push notifications on the client device.
- Handles network requests. As the service worker intercepts network requests and modifies responses, it requires to run over HTTPS in order to prevent “man-in-the-middle“ attacks.
Web App Manifest
The Web App Manifest stores information about the app’s behavioural properties like:
- The app’s name when installing on the device.
- The app’s icon, splash screen icon and colours.
- The page to use as a start page for the app.
- The app’s default orientation (portrait, landscape or device orientation).
- The app’s display mode which decides what browser user interface is shown when your app is launched. More information here.
Examples of Progressive Web Apps
As mentioned above, if the web application manifest is present, a supported browser like Google Chrome will show an option to add the app to the home screen.
Installing A PWA on Mobile
GeekyMinds is a PWA, which means you can install it on mobile (iOS or Android), desktop, etc. To see it in action, if you are using Google Chrome, open the three-dot menu. Tap on “Add to Home screen” option as shown in the photo below.
Installing A PWA on Desktop
You can also install Progressive Web Apps on your desktop! From your PC, fire up Google Chrome and visit Starbucks.
Next, open the three-dot menu and you’ll find “Install Starbucks” option. Just click on “Allow” and Chrome will add a shortcut of the app on your desktop. You can also install GeekyMinds on your desktop in the same way.
Uninstalling a PWA
Uninstalling Progressive Web Apps are straightforward. You can uninstall a PWA from your smartphone the same way as for a native app from the store.
In a PC, you can uninstall it by selecting the uninstall option from the three-dot menu as shown in the screenshot below.
Progressive Web Apps are gaining popularity and already many live examples can be found online. Here are a few examples we accumulated for you:
All Platforms –