{"id":51,"date":"2026-03-06T12:34:57","date_gmt":"2026-03-06T12:34:57","guid":{"rendered":"https:\/\/jathumathews.uk\/mydesign\/?p=51"},"modified":"2026-03-06T12:34:57","modified_gmt":"2026-03-06T12:34:57","slug":"progressive-web-apps-what-they-are-and-how-they-work","status":"publish","type":"post","link":"https:\/\/jathumathews.uk\/mydesign\/progressive-web-apps-what-they-are-and-how-they-work\/","title":{"rendered":"Progressive Web Apps:              What They Are and How They Work"},"content":{"rendered":"\n<p><strong>H<\/strong>ave you ever been on a website and got hit with <em>&#8220;Please download our app to continue&#8221;<\/em>? Or checked your phone storage only to find some app quietly eating through 500MB you never agreed to give it? Or tried to load something underground with no signal and got absolutely nothing?<\/p>\n\n\n\n<p>These are genuinely frustrating experiences \u2014 and they&#8217;re what got me interested in Progressive Web Apps (PWAs). For my seminar, I researched PWAs and honestly, once you understand what they are, you start to wonder why every website isn&#8217;t one.<\/p>\n\n\n\n<h2 class=\"wp-block-heading is-style-default has-x-large-font-size\"><strong>So, What Even Is a PWA?<\/strong><\/h2>\n\n\n\n<p>At its core, a Progressive Web App is a website that&#8217;s been built to behave like a native mobile app. It&#8217;s not a separate framework or a different kind of technology \u2014 it&#8217;s just a regular website (HTML, CSS, and JavaScript) with two extra files added on top.<\/p>\n\n\n\n<p>The easiest way I found to think about it is this: a regular website is easy to find and share, but it&#8217;s slow, can&#8217;t work offline, and doesn&#8217;t sit on your home screen. A native app is fast, works offline, and feels polished \u2014 but you have to download it, it takes up storage, and building one for both iOS and Android separately costs a lot. A PWA sits right in the middle and gives you the best of both.<\/p>\n\n\n\n<p class=\"is-style-text-annotation has-medium-font-size is-style-text-annotation--1\"><strong>A PWA is a website that feels and behaves like a native app.<\/strong> \u2014 that&#8217;s the one-line definition I kept coming back to throughout my research.<\/p>\n\n\n\n<p>The term itself was coined by Google engineers Alex Russell and Frances Berriman back in 2015, and browser support has grown significantly since then, with Chrome, Edge, Firefox and \u2014 more recently \u2014 Safari on iOS all supporting the key features.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The 3 Superpowers of PWAs<\/h2>\n\n\n\n<p>This is the bit that clicked for me when I was putting together my presentation. PWAs don&#8217;t do everything differently \u2014 they just unlock three specific capabilities that websites normally don&#8217;t have.<\/p>\n\n\n\n<p><strong>01 \u2014 Installable<\/strong><\/p>\n\n\n\n<p>You can add a PWA to your home screen directly from the browser. No App Store, no Google Play, no waiting for a download to finish. You just tap &#8220;Add to Home Screen&#8221; and it appears like any other app icon. When you open it, the browser bar is hidden and it looks and feels completely native.<\/p>\n\n\n\n<p>This is a big deal from a user experience perspective. Every extra step between a user and your content loses you a chunk of them. PWAs remove the entire &#8220;find it on the store, download it, wait, open it&#8221; process entirely.<\/p>\n\n\n\n<p><strong>02 \u2014 Works Offline<\/strong><\/p>\n\n\n\n<p>PWAs load instantly even without an internet connection. This is made possible by something called a Service Worker (more on that in the next section), which saves key files to your device in the background. So even on the tube with no signal, or on a plane, or somewhere with a terrible connection \u2014 the app still loads.<\/p>\n\n\n\n<p>This isn&#8217;t just a nice-to-have. For global audiences where mobile data is expensive or unreliable, offline capability is genuinely transformative.<\/p>\n\n\n\n<p><strong>03 \u2014 Push Notifications<\/strong><\/p>\n\n\n\n<p>PWAs can send push notifications to users just like native apps do. This allows businesses to re-engage users with updates, reminders, or offers \u2014 without requiring them to have downloaded anything from an app store.<\/p>\n\n\n\n<p>On Android this has been supported for a while. Apple only added push notification support for PWAs on iOS in 2023, which makes this capability truly cross-platform now.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Secret Ingredient: The Service Worker<\/strong><\/h2>\n\n\n\n<p>This is the technical bit \u2014 but I promise it&#8217;s not as complicated as it sounds.<\/p>\n\n\n\n<p>A Service Worker is a JavaScript file that runs silently in the background of your browser, completely separate from the main page. The user never sees it. Think of it as a <strong>smart middleman<\/strong> sitting between your browser and the internet. Every time your browser makes a request \u2014 for a page, an image, some data \u2014 the Service Worker intercepts it first and asks: <em>&#8220;Do I already have a cached copy of this?&#8221;<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>If yes<\/strong> \u2014 it returns it instantly from the cache. No network needed. <\/li>\n\n\n\n<li><strong>If no<\/strong> \u2014 it goes to the internet, fetches it, stores a copy for next time, and returns it.<\/li>\n\n\n\n<li><strong>If there&#8217;s no internet at all<\/strong> \u2014 it falls back to whatever it has saved, so the app still loads.<\/li>\n<\/ul>\n\n\n\n<p>That&#8217;s why PWAs are so fast on repeat visits, and why they keep working without a connection.<\/p>\n\n\n\n<p>One important thing worth noting: Service Workers are <strong>HTTPS only<\/strong>. They can&#8217;t run on an insecure connection, which is a deliberate security measure to make sure that &#8220;middleman&#8221; can&#8217;t be tampered with.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Web App Manifest<\/h2>\n\n\n\n<p>The second piece of the puzzle is the Web App Manifest. This is honestly just a small JSON file \u2014 one of the least intimidating things in web development \u2014 that you link to your site. It&#8217;s basically an instruction sheet that tells the browser: <em>treat this like an app.<\/em><\/p>\n\n\n\n<p>Here&#8217;s what one looks like:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"My App\",\n  \"start_url\": \"\/\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#00BFA5\",\n  \"background_color\": \"#fff\",\n  \"icons\": &#91;\n    {\n      \"src\": \"\/icon.png\",\n      \"sizes\": \"192x192\"\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n<p>Each property does something specific:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Properties<\/strong><\/td><td><strong>What it does<\/strong><\/td><\/tr><tr><td>&#8220;name&#8221;<\/td><td>The label that appears under the icon on your home screen<\/td><\/tr><tr><td>&#8220;display&#8221;<\/td><td>Set to <code>\"standalone\"<\/code> \u2014 hides the browser bar so it looks like a real app<\/td><\/tr><tr><td>&#8220;theme_color&#8221;<\/td><td>Colours the phone&#8217;s status bar to match your brand<\/td><\/tr><tr><td>&#8220;icons&#8221;<\/td><td>The icon that appears on the home screen<\/td><\/tr><tr><td>&#8220;start_url&#8221;<\/td><td>Which page opens when the app is launched<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>You connect it to your site with a single line in the HTML <code>&lt;head><\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"manifest\" href=\"\/manifest.json\"><\/code><\/pre>\n\n\n\n<p>That&#8217;s genuinely it. Not a huge lift for what it unlocks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PWA vs Native App \u2014 How Do They Actually Compare?<\/h2>\n\n\n\n<p>One of the most useful things I put in my presentation was a straight head-to-head comparison. Here it is:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Feature<\/strong><\/td><td><strong>PWA<\/strong><\/td><td><strong>Native App<\/strong><\/td><\/tr><tr><td>Install via App Store?<\/td><td>Not needed<\/td><td>Required<\/td><\/tr><tr><td>Storage space?<\/td><td>tiny<\/td><td>Large<\/td><\/tr><tr><td>Works offline?<\/td><td>yes<\/td><td>yes<\/td><\/tr><tr><td>Push notifications?<\/td><td>yes<\/td><td>yes<\/td><\/tr><tr><td>Shareable link?<\/td><td>just a URL<\/td><td>Nope<\/td><\/tr><tr><td>Dev cost?<\/td><td>One codebase<\/td><td>IOS + Android<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>The only area where native apps still have a clear advantage is access to deeper device hardware \u2014 things like Bluetooth, NFC, or advanced camera controls. But for the vast majority of everyday apps, PWAs cover everything users actually need.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">You&#8217;ve Already Used PWAs<\/h2>\n\n\n\n<p>This was the part of my research that surprised me the most. These aren&#8217;t small experimental projects \u2014 some of the biggest brands in the world are already running PWAs, and the numbers they&#8217;ve reported back up why.<\/p>\n\n\n\n<p><strong> Twitter \/ X <\/strong>\u2014 Their PWA uses 75% less data than the native app while keeping almost all the same features. For users in markets where data is expensive, this is a significant difference. \ud83d\udcce <em><a href=\"https:\/\/developers.google.com\/web\/showcase\/2017\/twitter\">https:\/\/developers.google.com\/web\/showcase\/2017\/twitter<\/a><\/em><\/p>\n\n\n\n<p><strong> Starbucks<\/strong> \u2014 After rebuilding their web ordering experience as a PWA, daily active users placing online orders doubled. The PWA is also 99.84% smaller in size than the iOS native app. \ud83d\udcce <em><a href=\"https:\/\/formidable.com\/work\/starbucks-progressive-web-app\/\">https:\/\/formidable.com\/work\/starbucks-progressive-web-app\/<\/a><\/em><\/p>\n\n\n\n<p><strong> Pinterest<\/strong> \u2014 Pinterest saw a 60% increase in engagement after launching their PWA, along with a 40% jump in time spent on the site. \ud83d\udcce <em><a href=\"https:\/\/medium.com\/dev-channel\/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154\">https:\/\/medium.com\/dev-channel\/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154<\/a><\/em><\/p>\n\n\n\n<p><strong> Spotify<\/strong> \u2014 Their web player at <a href=\"https:\/\/open.spotify.com\">open.spotify.com<\/a> is a PWA, offering offline playback and instant loading without any installation required.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How It All Fits Together<\/h2>\n\n\n\n<p>When I was wrapping up my presentation, I wanted to give people a clear picture of how simple the building blocks actually are. It really comes down to three things working together:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML + CSS + JS<\/strong> \u2014 your normal website code, nothing new<\/li>\n\n\n\n<li><strong>Service Worker<\/strong> \u2014 handles caching, offline access, and push notifications<\/li>\n\n\n\n<li><strong>Web App Manifest<\/strong> \u2014 gives the app its name, icon, and display settings<\/li>\n<\/ul>\n\n\n\n<p>Put those three things together, serve the site over HTTPS, and you have a Progressive Web App. According to Google&#8217;s own documentation, most developers can take an existing website and turn it into a PWA in a single day.<\/p>\n\n\n\n<p><em>Google \u2014 Progressive Web Apps: <a href=\"https:\/\/web.dev\/progressive-web-apps\/\">https:\/\/web.dev\/progressive-web-apps\/<\/a><\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Takeaways<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>PWAs = websites with superpowers.<\/strong> Same core technology, just enhanced with two extra files. <\/li>\n\n\n\n<li><strong>The Service Worker<\/strong> is what makes offline mode and fast loading work. It&#8217;s a smart cache that sits between your browser and the internet. <\/li>\n\n\n\n<li><strong>The Web App Manifest<\/strong> is what makes a PWA installable \u2014 it tells the browser everything it needs to put your app on a home screen. <\/li>\n\n\n\n<li><strong>Big brands have proven it works.<\/strong> Twitter, Starbucks, Pinterest and Spotify have all seen real, measurable results from making the switch.<\/li>\n<\/ol>\n\n\n\n<p>If you&#8217;re building for the web, PWAs are worth understanding \u2014 they close a lot of the gap between what websites and native apps can do, without the cost or complexity of going fully native.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Russell, A. &amp; Berriman, F. (2015). <em>Progressive Web Apps: Escaping Tabs Without Losing Our Soul<\/em>. <a href=\"https:\/\/infrequently.org\/2015\/06\/progressive-apps-escaping-tabs-without-losing-our-soul\/\">https:\/\/infrequently.org\/2015\/06\/progressive-apps-escaping-tabs-without-losing-our-soul\/<\/a> <\/li>\n\n\n\n<li>MDN Web Docs \u2014 <em>Service Worker API<\/em>. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Service_Worker_API\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Service_Worker_API<\/a><\/li>\n\n\n\n<li>MDN Web Docs \u2014 <em>Web App Manifest<\/em>. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Manifest\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Manifest<\/a> <\/li>\n\n\n\n<li>Google Developers \u2014 <em>Progressive Web Apps<\/em>. <a href=\"https:\/\/web.dev\/progressive-web-apps\/\">https:\/\/web.dev\/progressive-web-apps\/<\/a> <\/li>\n\n\n\n<li>Google Developers \u2014 <em>Twitter Lite PWA Case Study<\/em> (2017). <a href=\"https:\/\/developers.google.com\/web\/showcase\/2017\/twitter\">https:\/\/developers.google.com\/web\/showcase\/2017\/twitter<\/a> <\/li>\n\n\n\n<li>Formidable \u2014 <em>Starbucks PWA Case Study<\/em>. <a href=\"https:\/\/formidable.com\/work\/starbucks-progressive-web-app\/\">https:\/\/formidable.com\/work\/starbucks-progressive-web-app\/<\/a> <\/li>\n\n\n\n<li>Google Dev Channel \u2014 <em>Pinterest PWA Performance Case Study<\/em>. <a href=\"https:\/\/medium.com\/dev-channel\/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154\">https:\/\/medium.com\/dev-channel\/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154<\/a> <\/li>\n\n\n\n<li>Apple Developer Documentation \u2014 <em>User Notifications<\/em> (2023). <a href=\"https:\/\/developer.apple.com\/documentation\/usernotifications\">https:\/\/developer.apple.com\/documentation\/usernotifications<\/a> <\/li>\n\n\n\n<li>W3C \u2014 <em>Service Workers Specification<\/em>. <a href=\"https:\/\/www.w3.org\/TR\/service-workers\/\">https:\/\/www.w3.org\/TR\/service-workers\/<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever been on a website and got hit with &#8220;Please download our app to continue&#8221;? Or checked your phone storage only to find some app quietly eating through 500MB you never agreed to give it? Or tried to load something underground with no signal and got absolutely nothing? These are genuinely frustrating experiences [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-51","post","type-post","status-publish","format-standard","hentry","category-article"],"_links":{"self":[{"href":"https:\/\/jathumathews.uk\/mydesign\/wp-json\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jathumathews.uk\/mydesign\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jathumathews.uk\/mydesign\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jathumathews.uk\/mydesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jathumathews.uk\/mydesign\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":1,"href":"https:\/\/jathumathews.uk\/mydesign\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/jathumathews.uk\/mydesign\/wp-json\/wp\/v2\/posts\/51\/revisions\/52"}],"wp:attachment":[{"href":"https:\/\/jathumathews.uk\/mydesign\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jathumathews.uk\/mydesign\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jathumathews.uk\/mydesign\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}