Prodtyping

The process on turning ideas into reality

December 20th 2018

What is a Progressive Web App?

A Progressive Web App (PWA) acts, looks, and feels like a native app but is a website that has been optimized for the mobile experience. Despite it feeling native, there is no need to download anything from the app store. A PWA will run right in the browser and is able to load instantly on subsequent loads. Alex Russell can be attributed to hammering out the details of this new technology and discusses it more depth here.

What does a Good PWA look like?

It should be reliable and load fast on mobile hardware over 3G and offline. It should be engaging and provide features like offline caching, background syncing and push notifications with the use of a service worker.

What are the technical elements of a PWA?

Service Worker

A PWA should use a service worker which are components in javascript that allows for a proxy between the network and browser. On the first load, the service worker will store the required resources in the browser cache. Thus subsequent visits can pull from the cache and load faster. This allows users to interact offline even if there isn’t a network available.

Manifest File

A manifest file is a config JSON file which includes the information of the application like the type of icon that will be saved on the home screen when installed, the theme and the short name of the application.

HTTPS

The use of service worker enforces https for security purposes. Since the service worker has the ability to intercept network requests and modify responses on the client side all communications between the browser and website need to be encrypted.

Last Thoughts

Once implemented a great tool to consider is Lighthouse as a way to measure and improve the quality of your web page. It is an open-source automated tool that runs a series of audits against a web page and then generates a report with suggestions on improvement about that page. Progressive Web Apps provide the ability for web applications to look and feel like a native experience to the user. In order to be considered a progressive web app, a website should implement a service worker, have a manifest file and use https. PWA’s are just “websites that took all the right vitamins”.