Progressive Web Applications Logo

Win With Progressive Web Applications

Jonathan Campos
4 min readJan 2, 2018

--

Progressive Web Applications — or PWAs — aren’t particularly new if you look at the technology behind them, they are a mixture of existing web-based technologies along with one or two new features.

What does this mean? Your current web technology knowledge along with a few extra skill sets will gain you a huge boost in your work and your career.

The Big Wins with Progressive Web Applications

If you already have a web application or site that you publish you can enjoy the benefits of Progressive Web Applications today. Let’s look at some of the biggest wins to maximize your ROI for you and your users.

Win #1: No Stores

Apple recently announced that it will reject applications that it feels are clones of other applications or template applications. This move hurts many small businesses without the money to create custom applications or anyone that used a short-term template application for their events or other business functions.

How Do I Get This Benefit?

No longer will you have to tell people to go to a store and download your application. Just go to your website. This is a better business practice as it builds up your own traffic, not a store’s traffic.

Win #2: Add To Homescreen

New to Progressive Web Applications is the ability to add your site to the device’s home screen solving the problem of you wanting your user to interact with your brand whether they are online or offline. If you have used an iPhone before you might think of their “Add To Homescreen” ability and how the iPhone basically saves a bookmark for your site on your device. This is very different than Progressive Web Applications’ ability to totally offline your site to a device. Making Progressive Web Applications a much more attractive option. Your application will be available for offline use on Google Chromebooks, Androids, iPhones/iPads*, Mac, and Windows-based computers. This is multiple times the reach you would receive building an application specifically for an iPhone or Android device.

Add To Homescreen Animation (1)

How Do I Get This Benefit?

Two steps to receive this benefit include adding a manifest file and adding a service worker to your website/application. The manifest file tells the browser how your offline content will look while the service worker handles the caching of your content.

Win #3: Push Notifications and Background Tasks

Service workers are simply JavaScript files that the browser knows to continue running in the background of your system. The background tasks are important because we can run activities like loading data for offline use, responding to the user moving in and out of geofenced locations, or other important tasks while the user is away from our site.

Notifications Diagram (2)

How Do I Get This Benefit?

This benefit requires more coding than other benefits. You will need to set up your server to push out notifications along with building the service worker to accept push notifications. Additional background tasks are all possible, just takes the coding to achieve your specific task.

The Near Misses with Progressive Web Applications

Service Workers aren’t fully supported and the “Add To Homescreen” feature support isn’t known. We can assume that these features are coming. Apple is pushing for developers to turn from template apps to Progressive Web Application sites. Focusing Apple’s App Store as an exclusive high-end location for very specialized applications.

What Can I Do About It?

Right now you can plan and develop your Progressive Web Applications with or without Apple support. The day that Apple supports Progressive Web Applications your application will get a welcomed added feature without you doing any lifting. Already Progressive Web Applications perform better on iOS devices compared to normal websites.

Side By Side Loading Animation(3)

Useful Links To Get Started

Google’s Progressive Web App Checklist

Web Push Notifications

Attributions:

(1) https://developers.google.com/web/fundamentals/app-install-banners/

(2) https://developers.google.com/web/fundamentals/push-notifications/display-a-notification

(3) https://www.washingtonpost.com/pr/wp/2016/09/06/the-washington-post-to-roll-out-fastest-mobile-news-site/

Originally published at jonbcampos.com on January 2, 2018.

Jonathan Campos is an avid developer and fan of learning new things. I believe that we should always keep learning and growing and failing. I am always a supporter of the development community and always willing to help. So if you have questions or comments on this story please ad them below. Connect with me on LinkedIn or Twitter and mention this story.

--

--

Jonathan Campos

Excited developer and lover of pizza. CTO at Alto. Google Developer Expert.