Progressive Web Apps Part 1: Introduction

Hi Everyone? Today i would like to talk about Progressive Web Apps. I will do this in a 3 part series and this is Part 1: Introduction. Go check out my post on JAMstack as a starting point: Why JAMstack, Headless CMS, PWA and Static Sites Are The Future.

Progressive Web Apps are a methodology that is a combination of technologies to make powerful web applications. Major browser vendors are working together to improve how web sites are built, and have created a new set of features that give web developers the ability to create fast, reliable, and engaging websites. Web apps are websites and websites are web apps.

Progressive Web Apps are user experiences that have the reach of the web, and are:

  • Reliable – Load instantly and never show the dinosaur, even in uncertain network conditions. A service worker, written in JavaScript, is like a client-side proxy and puts you in control of the cache and how to respond to resource requests. By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.
  • Fast – Respond quickly to user interactions with silky smooth animations and no junky scrolling.
  • Engaging – Feel like a natural app on the device, with an immersive user experience. Progressive Web Apps are installable and live on the user’s home screen, without the need for an app store. They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

Advantages of Progressive Web Apps

  • PWAs are built using Web Standard Programming Languages(HTML, CSS, JavaScript & Markdown) and run in web browsers supporting the same languages. They are not tied to specific devices or operating systems. They display seamlessly and identically on all devices, including desktop, mobile, tablet, or whatever comes next.
  • PWAs help speed up web sites response time. More than 50% of Internet users use smartphones and tablets to cruise the web. Most of them expect something useful on the screen in 3 seconds or less, before they abandon a site.
  • A traditional website forces users to wait while the web browser is busy making requests to web servers over the Internet to load web page components. A PWA gets web page components quickly from a cache.
  • PWAs can work when the network is unreliable, or even non-existent. PWAs continue to work normally. When requests are made to the Internet during this time, they are put in a queue and processed when an Internet connection return.
  • PWAs are able to work completely offline, have nearly instant load times, are secure, and resilient to unreliable networks. Most modern browsers already have these features built into them, they only need to be used.
  • PWAs use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps.
  • Discoverable – PWAs are discoverable using Search Engines, and when a user gets to a site which has PWAs capabilities, the browser in combination with the device asks the user if they want to install the app to the home screen.
  • Installable – The relevant web standard here is the PWA manifest, which defines features of an app such as name, icon, splash screen, and theme colors in a JSON-formatted manifest file. This is for use in contexts such as app listings and device home screens.
  • Linkable – One of the most powerful features of the PWA is to be able to link to an app at a specific URL — no app store needed, no complex installation process.
  • Network Independent – PWAs can work when the network is unreliable, or even non-existent.

Progressive Web Apps Part 2: Components Coming Soon


One thought on “Progressive Web Apps Part 1: Introduction

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.