We use analytics cookies.We use cookies to analyze site traffic and improve your experience.
Loading...
System Design Masterclass · Web Content Delivery
Free preview: the first 2 parts of this 8-part lesson.
Already bought the course? Sign in to read the whole lesson.
this lesson is part of
System Design Masterclass
Unlock this lesson and the 751 other paid lessons
$25 once, by PayPal
See the System Design courseread the rest of this lesson in
System Design Masterclass
Unlock this lesson and the 751 other paid lessons
$25 once, by PayPal
See the System Design coursein Web Content Delivery
This lesson is part of the full System Design Masterclass. Unlock it along with 769 other lessons for a one-time payment.
One-time payment by card or PayPal
Get Lifetime AccessOne-time payment: UPI, card or netbanking
Get Lifetime Access18 Foundation lessons are free, no payment needed. Try them now
It is easy and good
“It is really nice and good Please join the course”
Starbucks built a PWA for their mobile ordering experience. The result: their PWA is 99.84% smaller than their iOS app (233KB vs 148MB). It loads on 2G connections. It works offline. It is installable on the home screen with a full-screen experience, no browser chrome. And it doubled the number of daily active mobile web orders.
Pinterest built a PWA after finding that only 1% of mobile web visitors installed their native app. The PWA increased engagement by 60%, time spent on site by 40%, and ad revenue by 44%. Users who would never download a native app happily used the PWA because there was nothing to download.
A Progressive Web App is a website that behaves like a native app. It installs to the home screen. It launches in its own window without browser UI. It works offline. It sends push notifications. It loads instantly on repeat visits. And it runs on every platform (iOS, Android, Windows, macOS, ChromeOS) from a single codebase.
A PWA is not a framework or a library. It is a set of web standards that, when combined, make a website installable and app-like. Three pieces are required:
1. Web App Manifest (manifest.json). A JSON file that tells the browser this site can be installed. It contains the app name, icons (multiple sizes), theme color, background color, display mode (standalone for no browser UI, fullscreen for games), and start URL. Without it, the browser has no metadata to create a home screen shortcut.
2. Service Worker. Provides offline capability and (covered in the previous lesson). The service worker pre-caches the app shell so the app loads instantly on repeat visits. Without a service worker, the "Add to Home Screen" prompt will not appear in Chrome.
3. . Service workers only register on secure origins. No HTTPS, no service worker, no PWA. Localhost is the only exception (for development).
That is it. If your site has these three things, Chrome shows the install prompt automatically when the user visits repeatedly. No app store listing needed. No 30% commission to Apple or Google. No review process. Ship updates instantly by deploying your web app.