A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. It looks and behaves as if it is a mobile app and can be kinda installed. In this post, we’ll be looking at 4 things every progressive web apps must have.

Let’s start by listing each of them, then we’ll go over them one after the other:

  • HTTPS
  • Web app manifest
  • Service worker
  • Responsive design

HTML

Progressive Web Apps must be served from a secure origin. You should always protect all of your websites with HTTPS, even if they don’t handle sensitive communications. Aside from providing critical security and data integrity for both your websites and your users’ personal information, HTTPS is a requirement for many new browser features, particularly those required for progressive web apps.

Web App manifest

The web app manifest is a W3C specification defining a JSON-based manifest to provide developers a centralized place to put metadata associated with a web application including:

  • The name of the web application
  • Links to the web app icons or image objects
  • The preferred URL to launch or open the web app
  • The web app configuration data for a number of characteristics
  • Declaration for default orientation of the web app
  • Enables to set the display mode e.g. full screen

By setting and manipulating the metadata for the web manifest file, developers enable user agents to create seamless native-like mobile experiences through the progressive web app.

Service Worker

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Today, they already include features like push notifications and background sync. In the future, service workers might support other things like periodic sync or Geo-fencing. The core feature discussed in this tutorial is the ability to intercept and handle network requests, including pro-grammatically managing a cache of responses.

Responsive Design

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any screen

Conclusion

Progressive Web Apps (PWA) are reliable, fast, and engaging, although there are many things that can take a PWA from a baseline to exemplary experience.

Here is a checklist which breaks down all the things we think it takes to be a Baseline PWA.

Post credit to: Oscar Olotu

Category: Web and system development