Over the last 18 months, I have seen more and more sites prompting me to "Add to Home Screen" from websites I have been browsing. Then you add this site, it installs itself in the background and is now accessible like a native app from your smartphone.
What I have just described is the wondrous workings of a fairly new technology called Progressive Web Apps. This technology (called PWA) works even when you are offline and behaves like a "normal" smartphone app.
What are progressive web apps?
PWAs were created by Alex Russell and Frances Berriman. The technology driving Progressive Web Apps isn’t new. What was required was a new recipe to make Progressive Web Apps behave like native apps. This means that a progressive web app will work (as long as the platform supports it) on an iphone or Androis smartphone, a chromebook or ipad, on Windows or Mac.
True cross platform applications without needed to join an app store with super restrictive controls (I’m looking at you Apple).
Why Progressive Web apps
Like many of you, I live in a world with abundantly fast internet. This simply isn’t the reality everywhere. Even in my own backyard of Ontario (Canada), there are communities where internet is delivered via very slow ADSL,
PWAs, once installed, cache the content locally which means they will respond quickly even for those on slow internet connections.
Statistics show that users still prefer native apps to web pages. There are a tone of reasons for this from convenience (single click from your home screen), ability to get push notifications, etc. The web simply doesn’t offer the same bells and whistles.
PWAs offer most (if not all) native functions. They startup with a single click from the home screen and can hook into most native features. PWAs can even offer notifications (like a native app) and therefore remind the user to open and engage with the app.
What is required to build a progressive web app?
This is not a technical instructional article but you need 4 elements to build a Progressive Web App:
Web App Manifest - It is a JSON file with meta data about the web app, It contains information such as the icon, background color, app name, etc.
Service Workers - Even driven agents that work in the background. They perform tasks like updating the web app or its content.
Icon - You need an icon to represent the Progressive Web App on the home screen
HTTPS - The app and its content must be securely delivered over a TLS session.
Progressive Web app examples
You will find new PWAs every day but here are a couple of cool ones to get you started:
WebFlap - A Flappy bird game clone
AliExpress - Everyone’s favorite China cheap item import site
Financial Times - A respected global newspaper
QR Code Scanner - A PWA that scans barcodes
SnapDrop - A PWA that enables you to transfer files from one device to another
Notes - A super simple note taking app
Currency Calc - An easy to use currency conversion tool