Introduction to Progressive Web Apps

Saran
Saran
Jul 22, 2017 · 4 min read

Progressive Web App’s are talk of the town among Web Developer communities and it’s gaining lot of traction lately due to the fact it combines most of the benefits of Web apps and Native Apps. July 22nd, 2017, GDG NYC community organized a one day camp on Progressive web apps and this blog is an attempt to give an introduction about PWA’s. If you are an experienced PWA’s, this probably isn’t for you, But I’d still encourage you to go on and give your valuable feedback’s in the comments section.

Progressive Web Apps = Native Apps + Web Apps

PWA Apps = Native Apps + Web Apps

What is PWA:

Progressive Web Apps (PWAs) use modern web capabilities to deliver fast, engaging, and reliable mobile web experiences that are great for users and businesses. — from google developer site.

Imagine, having an Android or iOS app for Forbes. You could download the Forbes app from app store and start using it.Forbes recently launched it’s PWA, which would give you same experiences. Same goes for Twitter as well. Twitter improved it’s user experience by introducing PWA and it’s just awesome.

Architecture of PWA:

PWA uses the App Shell Architecture to implement the Web App experience. This will allow the page to load with minimal HTML, CSS and JS which are required for basic web experience of any web app.

App Shell — PWA

Service Worker:

Service worker is essentially a javascript which run separately from the main thread and caches the resource, helps to provide best offline /slow network experiences. Service worker uses the Fetch and Cache API to do so. By using service worker you can take your sites to work offline.

Steps involved in implementing service workers:

  1. Registration

Service worker interacts with cache — web server — web app and the example below show how it acts via Network.

Service Worker — cache

Checklist:

Benefits of PWA:

  1. It works no matter what your network status is. Like even if you go back to stone age, it will still work. Cool.! thanks for service worker.

Use case :)

In UK, there is a newspaper rolled out PWA and here is the funny thing. If the network isn’t available they will let you play a crossword puzzle instead of giving the “page is not available” or the “Dinosaur” or the “come back later”.

PWA usage by different companies across the Globe

What next ..?

  1. Check reference section of this blog to start with PWA’s.

)

Saran

Written by

Saran

Passionate Learner | Books | Technology | Programmer | ML | Web | Data Analytics | Cloud

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade