Introduction to Progressive Web Apps
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

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.

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:
- Registration
- Installation
- Activation.

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

Checklist:
Benefits of PWA:
- 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.
- Its Fast and Reliable. Offline cache helps the users to see the contents of the web app.
- Cross Browser capability.
- Usage of Mobile users has increased by large numbers in recent years. PWA’s given an opportunity to give best mobile — first experience to the users.
- Lower Data consumption.
- Native App like experience.
- Home page Download
- User engagement. Few of the companies that has used PWA, reported spike in the user engagement.
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”.

What next ..?
- Check reference section of this blog to start with PWA’s.
- Start building demo PWA’s.
- The wait is over..! Web Dev community is moving towards mobile. PWA’s are the best example of how the web can adapt to mobile designs and usage.
- Refer the use cases and learn from it.
- Don’t try to rebuild everything from whiteboard. Learn from the communities and reuse. It saves your time and money.
- Attend the meetup’s and contribute to the community. Mantra to learn anything is by teaching someone else. Check out the local GDG and other tech communities.
Reference:
Here are the few useful links for the newbies to get onboard with PWA:
