What is a Progressive Web App or PWA?
Google define it as follows:
“A Progressive Web App uses modern web capabilities to deliver an app-like user experience.”
A progressive web app is essentially just a web page that can work offline. The point is that you can leverage everything that makes the web great. On top of that, you get to utilize a lot of the features of a native app on the phone. Compared to native apps, PWAs are smaller in terms of size, have fewer steps to getting your user to use your app, and are quicker and cheaper to develop.
Google defines 3 aspects for PWS:
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.
This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen on their phone.
How are they different from apps in an app store?
PWAs are different from apps in an app store as they are not installed via an app store. They live on the web, built with HTML, JS, CSS, and may have some API integration. PWA’s will cache data on the device. Thus, they can have fast load times and be able to work offline, among other things. They are accessed via a browser, and while they may visually look more like a native app than a mobile website, they are in fact just a mobile website that employs and takes advantage of advances in modern web development technology.
The main point of WPAs is to bypass the app stores entirely. Why put a simple app that is just html+js in its own Phonegap wrapper, which slows the startup time, adds file size, and adds ram usage? PWA features fill in some gaps to make the web app feel more like a native app so that Phonegap isn’t needed (though not in all use cases unfortunately). Some of these features are like home screen icons, splash screens, push notifications, and camera access.
To see what features PWAs are capable of. Check out this link.
Still some issues!
There are some drawbacks for PWAs. It is still cumbersome to actually persist data reliably for when the network is down. Most methods to persist this data face the risk of getting data deleted from the local cache when your app reaches certain quotas. Some everyday functionality is also basically impossible at the moment. For example, embedding street maps for offline usage is impossible. This is because almost all HTML-embeddable maps are built to work only when there is a network connection available.
What are the requirements for PWAs?
PWAs have these three minimal requirements: Web Manifest File , HTTPS, and a Service Worker. When this happens Chrome on Android will prompt the user to add to the home screen of their phone. With just A Web Manifest & HTTPS you can add your website to the Windows Store, which gives you access to some platform APIs. Ultimately, how far you apply the Service Worker capabilities is up to you. Lastly, keep in mind learning how to apply cache is a very complex experience to master.
Here is a checklist for PWAs.
This is the baseline:
https://developers.google.com/web/progressive-web-apps/checklist
This is exemplary:
https://developers.google.com/web/progressive-web-apps/checklist#exemplary
Good News Everyone!
PWAs are now on iOS!!!!!!!
https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
