{"id":222,"date":"2025-03-06T22:03:03","date_gmt":"2025-03-06T22:03:03","guid":{"rendered":"https:\/\/ridj.uk\/content\/?p=222"},"modified":"2025-03-26T12:22:45","modified_gmt":"2025-03-26T12:22:45","slug":"report-on-the-progressive-web-app-pwa-presentation","status":"publish","type":"post","link":"https:\/\/ridj.uk\/content\/2025\/03\/06\/report-on-the-progressive-web-app-pwa-presentation\/","title":{"rendered":"Article on Progressive Web App (PWA)"},"content":{"rendered":"\n<div style=\"height:44px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>This article focuses on the key points about Progressive Web Apps (PWAs) that was delivered on the 19th of February. A PWA is a modern web technology that bridges the gap between traditional websites and native mobile applications. The objective was to introduce key concepts, features, and implementation techniques of PWAs while highlighting their benefits for web developers and users alike.<\/p>\n\n\n\n<p>Find the slides below.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/Untitled.pdf\" type=\"application\/pdf\" style=\"width:100%;height:400px\" aria-label=\"Embed of PWA-ppt.\"><\/object><a id=\"wp-block-file--media-1473495b-9912-4b79-a828-f1863d89c03d\" href=\"https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/Untitled.pdf\">PWA-ppt<\/a><a href=\"https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/Untitled.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-1473495b-9912-4b79-a828-f1863d89c03d\">Download<\/a><\/div>\n\n\n\n<div style=\"height:74px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><strong>What is a Progressive Web App (PWA)?<\/strong> <\/h2>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>A Progressive Web App is a type of web application that is designed to provide a native app-like experience using modern web technologies. Unlike traditional websites, PWAs can function offline, load quickly, and deliver push notifications, making them highly interactive and user-friendly. Since they are accessible through web browsers, they eliminate the need for app store installations, making them easier to distribute.<\/p>\n\n\n\n<div style=\"height:74px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key Features of PWAs<\/strong><\/h3>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li><strong>Progressive Enhancement<\/strong> \u2013 PWAs work for every user, regardless of the browser or device they use.<\/li>\n\n\n\n<li><strong>Responsive Design<\/strong> \u2013 They adapt seamlessly to different screen sizes and resolutions.<\/li>\n\n\n\n<li><strong>Offline Functionality<\/strong> \u2013 Through caching and service workers, PWAs can load even when there is no internet connection.<\/li>\n\n\n\n<li><strong>App-Like Experience<\/strong> \u2013 They mimic native apps with smooth interactions and transitions.<\/li>\n\n\n\n<li><strong>Push Notifications<\/strong> \u2013 PWAs can send updates to users, improving engagement.<\/li>\n\n\n\n<li><strong>Fast and Reliable<\/strong> \u2013 Efficient caching allows them to load quickly, even on slow networks.<\/li>\n\n\n\n<li><strong>Secure<\/strong> \u2013 PWAs run on HTTPS, ensuring a secure connection and preventing unauthorized access.<\/li>\n\n\n\n<li><strong>No App Store Required<\/strong> \u2013 Users can install PWAs directly from the web, bypassing app stores.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:74px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How PWAs Work<\/strong> <em>(Three main components define a PWA)<\/em><\/h3>\n\n\n\n<div style=\"height:28px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>HTTPS Protocol<\/strong> \u2013 Ensures a secure connection, protecting user data.<\/li>\n\n\n\n<li><strong>Manifest.json File<\/strong> \u2013 Contains metadata such as the app name, icons, theme colors, and display mode, helping browsers understand how the app should appear and behave.<\/li>\n\n\n\n<li><strong>Service Workers<\/strong> \u2013 These are JavaScript files that run in the background and manage caching, push notifications, and offline functionality.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:74px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Manifest.json<\/h3>\n\n\n\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The manifest.json file is a critical component of a PWA, serving as a configuration file that provides metadata about the application. It helps browsers understand how the PWA should behave when installed on a user\u2019s device, allowing for a more native app-like experience.<\/p>\n\n\n\n<div style=\"height:74px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:46% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"842\" src=\"https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/manifest-json-example-1024x842.png\" alt=\"\" class=\"wp-image-226 size-full\" srcset=\"https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/manifest-json-example-1024x842.png 1024w, https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/manifest-json-example-300x247.png 300w, https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/manifest-json-example-768x632.png 768w, https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/manifest-json-example.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><strong>Name and Short Name<\/strong>: The full and abbreviated names of the app, displayed on the home screen.<\/p>\n\n\n\n<p><strong>Start URL<\/strong>: Defines the entry point of the app when launched.<\/p>\n\n\n\n<p><strong>Display Mode<\/strong>: Controls whether the app appears in fullscreen, standalone, or browser mode.<\/p>\n\n\n\n<p><strong>Icons<\/strong>: Specifies the images used when the PWA is added to the home screen.<\/p>\n\n\n\n<p><strong>Theme and Background Colors<\/strong>: Helps set the visual styling for the splash screen and app appearance.<\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:74px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-left\">Service worker<\/h3>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Service Workers act as a middle layer between the application, the network, and the cache, enabling efficient resource management and offline functionality. As shown in the image, a Service Worker intercepts network requests from the application and determines whether to serve cached content or fetch new data from the network. This mechanism allows PWAs to load faster, function offline, and improve performance, making them a key feature of modern web applications.<\/p>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/service-worker.png\" alt=\"\" class=\"wp-image-227\" style=\"width:510px;height:auto\" srcset=\"https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/service-worker.png 1024w, https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/service-worker-300x169.png 300w, https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/service-worker-768x432.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:74px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><strong>Pros of PWAs<\/strong><\/h2>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li><strong>Increased Accessibility<\/strong> \u2013 Users can access PWAs across different devices without the need for installation.<\/li>\n\n\n\n<li><strong>Reduced Development Costs<\/strong> \u2013 Since PWAs work across platforms, developers do not need to create separate apps for iOS and Android.<\/li>\n\n\n\n<li><strong>Better Performance<\/strong> \u2013 Faster loading times and offline capabilities lead to improved user satisfaction.<\/li>\n\n\n\n<li><strong>Improved Engagement<\/strong> \u2013 Push notifications and home screen installation make users more likely to interact with the app.<\/li>\n\n\n\n<li><strong>SEO Benefits<\/strong> \u2013 Unlike native apps, PWAs are indexed by search engines, increasing their discoverability.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:74px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-left\"><strong>Examples of Successful PWAs<\/strong><\/h3>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 38%\"><div class=\"wp-block-media-text__content\">\n<p><strong>Uber<\/strong> \u2013 Provides a fast, app-like experience even on low-end devices.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"996\" height=\"656\" src=\"https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/uber-app-mockup.webp\" alt=\"\" class=\"wp-image-224 size-full\" srcset=\"https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/uber-app-mockup.webp 996w, https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/uber-app-mockup-300x198.webp 300w, https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/uber-app-mockup-768x506.webp 768w\" sizes=\"auto, (max-width: 996px) 100vw, 996px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 37%\"><div class=\"wp-block-media-text__content\">\n<p><strong>Pinterest<\/strong> \u2013 Their PWA increased engagement and reduced bounce rates.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/pinterest-pwa-1024x683.jpg\" alt=\"\" class=\"wp-image-225 size-full\" srcset=\"https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/pinterest-pwa-1024x683.jpg 1024w, https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/pinterest-pwa-300x200.jpg 300w, https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/pinterest-pwa-768x512.jpg 768w, https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/pinterest-pwa-1536x1024.jpg 1536w, https:\/\/ridj.uk\/content\/wp-content\/uploads\/2025\/03\/pinterest-pwa-2048x1365.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:74px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Progressive Web Apps are revolutionizing the way users interact with the web, offering a seamless blend of web and mobile app functionalities. With advantages like offline accessibility, push notifications, and enhanced performance, PWAs are set to become the standard for web applications. As more businesses recognize their potential, PWAs will continue to shape the future of web development, making the digital world more accessible and efficient for everyone.<\/p>\n\n\n\n<div style=\"height:74px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article focuses on the key points about Progressive Web Apps (PWAs) that was delivered on the 19th of February. A PWA is a modern web technology that bridges the gap between traditional websites and native mobile applications. The objective was to introduce key concepts, features, and implementation techniques of PWAs while highlighting their benefits [&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-222","post","type-post","status-publish","format-standard","hentry","category-my-content-task-1"],"_links":{"self":[{"href":"https:\/\/ridj.uk\/content\/wp-json\/wp\/v2\/posts\/222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ridj.uk\/content\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ridj.uk\/content\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ridj.uk\/content\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ridj.uk\/content\/wp-json\/wp\/v2\/comments?post=222"}],"version-history":[{"count":11,"href":"https:\/\/ridj.uk\/content\/wp-json\/wp\/v2\/posts\/222\/revisions"}],"predecessor-version":[{"id":245,"href":"https:\/\/ridj.uk\/content\/wp-json\/wp\/v2\/posts\/222\/revisions\/245"}],"wp:attachment":[{"href":"https:\/\/ridj.uk\/content\/wp-json\/wp\/v2\/media?parent=222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ridj.uk\/content\/wp-json\/wp\/v2\/categories?post=222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ridj.uk\/content\/wp-json\/wp\/v2\/tags?post=222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}