The Progressive Web App (PWA) Philosophy is all about creating an adaptive experience that fits as diverse an audience as possible.

A Progressive Web App (PWA) is a normal website that mimics the responsiveness and functionality that you expect from an installed app. It can work offline, has access to your camera, GPS and other hardware, accepts push notifications when it’s off, and can even be “installed” with its own icon and window. So naturally, PWAs are often thought of as a replacement for a native app. But PWAs are much more than that.

Behind every Progressive Web App is a philosophy in how to approach its architecture in. This philosophy is composed on three tenets:

• Accessibility
• Performance
• Native features

The Philosophy at its core is that the app will work effectively in any browser, for any user, with whatever features or resources however minimal. But the app will also progressively enhance its functionality to take maximum advantage of the operating environment. For example, if your app works with photos, you might start with an image upload form. Then, if the app is running on a device with a camera, enhance that experience with the ability to take a picture in real-time.

Accessibility is the most important part of the PWA Philosophy. It’s not just about accommodating disabilities. People consume information in different ways. By providing information with a variety of media, you open up the possibilities for a larger audience. A user doesn’t have to be blind to benefit from auditory feedback; nor deaf to benefit from textual descriptions. Not everyone has the patience to sit through a video tutorial, yet others would avoid reading all together. Providing visual and auditory feedback is important because it allows users to intuit the apps response to their action. In short, accessibility is not an add on. Embracing multiple perspectives can only increase the usefulness of your app.

Performance is the most straight-forward aspect of the PWA Philosophy. It means that every aspect of your app should respond to the user as fast a possible. When someone enters your website address, typically you have about 4 seconds to grab their attention before they give up and move on. An app that has to download a javascript library to display, may take too long, or not display at all. It’s important to prioritize your features. Get the most basic functionality up and running right away. Even if it means static html and css. Then lazy load in features as needed. Modern browsers offer the ability to customize the cache and pull new content in the background. And always optimize your graphics, use SVG when possible, and limit use of web fonts to get that page on the screen as fast as possible.

Native features is the aspect of the PWA Philosophy that tends to get the most attention. Modern browsers offer a wealth of access to device hardware and software. The Web Manifest gives a website the ability to be “installed” to the desktop/home screen. Service workers run in the background, even when the browser isn’t active. The Fetch, Cache and Sync APIs work together to provide offline access to your app. LocalStorage and IndexedDB store your app data locally. And things like the Location API, UserMedia API and more give access to device hardware.

With the PWA Philosophy in mind, the requirements for qualifying as an “installable ” PWA to the browser are actually quite simple. There are a lot of services and frameworks that offer easy methods of creating installable PWAs. In practice, it’s equally easy to do yourself. The advantage of learning the workings of the install process mean you can take full control of your PWA experience.

There are 3 minimum requirements to qualify as an installable PWA:

• SSL
• A Web Manifest
• A Service Worker

The first requirement, SSL, is likely already set up by your hosting company. If not, doing so is usually a simple process best done by your hosting company or sysadmin.

Now let’s take a dive into the other two requirements with a little project I call…

#web-development #javascript #pwa