{"id":21696301,"url":"https://github.com/dinanathsj29/progressive-web-apps-pwa-tutorial","last_synced_at":"2026-02-02T12:14:31.138Z","repository":{"id":121990107,"uuid":"205502812","full_name":"dinanathsj29/progressive-web-apps-pwa-tutorial","owner":"dinanathsj29","description":"Lets learn the core building block concepts and essential technologies behind Progressive Web Apps (PWA). Will cover and understand everything needed to build Progressive Web Apps (PWA) that feels like a native mobile app.","archived":false,"fork":false,"pushed_at":"2019-08-31T14:21:50.000Z","size":153,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-20T14:52:42.081Z","etag":null,"topics":["application-manifest","manifest-json","media-api","mobile-app-native-app","offline-access","progressive-enhancement","progressive-web-apps","promise-and-fetch-api","pwa-apps","pwa-training-tutorial","responsive-design","service-workers","web-push-notification"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dinanathsj29.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-31T05:58:04.000Z","updated_at":"2020-04-20T10:26:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"a491067c-d94e-45ba-8de4-df851e4dd52b","html_url":"https://github.com/dinanathsj29/progressive-web-apps-pwa-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dinanathsj29/progressive-web-apps-pwa-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fprogressive-web-apps-pwa-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fprogressive-web-apps-pwa-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fprogressive-web-apps-pwa-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fprogressive-web-apps-pwa-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinanathsj29","download_url":"https://codeload.github.com/dinanathsj29/progressive-web-apps-pwa-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fprogressive-web-apps-pwa-tutorial/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261844781,"owners_count":23218432,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["application-manifest","manifest-json","media-api","mobile-app-native-app","offline-access","progressive-enhancement","progressive-web-apps","promise-and-fetch-api","pwa-apps","pwa-training-tutorial","responsive-design","service-workers","web-push-notification"],"created_at":"2024-11-25T19:19:23.394Z","updated_at":"2026-02-02T12:14:26.095Z","avatar_url":"https://github.com/dinanathsj29.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg src=\"_images-pwa-progressive-web-apps/pwa-progressive-web-apps-logo-1.png\" alt=\"Progressive Web Apps (PWAs)\" title=\"Progressive Web Apps (PWAs)\" width=\"200\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"_images-pwa-progressive-web-apps/pwa-progressive-web-apps-logo-2.png\" alt=\"Progressive Web Apps (PWAs)\" title=\"Progressive Web Apps (PWAs)\" width=\"300\" /\u003e\n\u003c/p\u003e\n\nProgressive Web Apps (PWAs)\n=====================\n\nWelcome\n---------------------\n\nAbout the Course/Tutorial\n---------------------\n\nHello All, I'm **`Dinanath Jayaswal, Senior Front-End/UI/Web Developer and Adobe Certified Expert Professional`**, I wanna welcome you to `Progressive Web Apps (PWAs)` course. In this course/tutorial, will learn the core building block concepts and essential technologies [like `Service Workers`, `Application Manifest`, `Responsive Design`, `Geolocation API`, `Media API`, `Promise and Fetch API`, `Web Push Notification` etc.] behind Progressive Web Apps (PWAs). Will cover and understand everything needed to build Progressive Web Apps (PWAs) that feels like a native mobile app.\n\nWho this course is for? \n---------------------\n\nThe course aims to teach the core technologies behind Progressive Web Apps (PWAs).\n\nThis Course/Tutorial is ideal for:\n- Freshers and aspiring UI/Mobile/Web developers\n- Experienced UI/Mobile/Web developers (Front-End developer)\n- Experienced Technical developers\n- Technical/Team Leads\n\nThis course/Tutorial is for anyone and everyone, Almost everyone! This course is best suited for Web Developers looking to expand their skillset by building web apps that look and behave like native mobile apps.\n\nWhy learn Progressive Web Apps (PWAs)\n---------------------\n- Progressive Web Apps (PWAs) are the next hot and big thing in web development as `they bring mobile-app-like experiences to your users` without creating them with mobile SDKs and without requiring them to install an app from the Market place - Google Play Store / Apple App Store, Windows Store\n- Progressive Web Apps (PWAs) is highly trending topic allowing us to build and deliver web apps with native mobile-like  features, look \u0026 feel and behavior\n- To deliver Fast, Integrated, Reliable, Engaging `(FIRE)` and Discoverable experiences whilst still having the reach and accessibility of a web page\n\nCourse/Tutorial achievement\n---------------------\n\nCourse/Tutorial Goal\n---------------------\n\nAfter completing/attending this Course/Tutorial, participants should be able to: \n1. Understand what \u0026 why Progressive Web Apps (PWAs)\n1. Create Progressive Web Apps (PWAs) from scratch\n3. Upgrade/convert a web application to full-featured Progressive Web Apps (PWAs)\n2. Build a Web application which behaves like a native mobile app\n3. Add features such as Camera and Microphone access, Service Workers for offline support, Push Notification messages, Geo-Location and more... into a web app\n\nPrerequisites-Requirements for current course / What you need to know?\n---------------------\n\n- An understanding of basics to advanced level of `HTML5, CSS3 and JavaScript`\n- Understanding of `Web technologies`, creating web pages, websites\n- Basic knowledge of `JavaScript, TypeScript and ES6 syntax` would be beneficial and added advantage\n\n`The primary focus for this tutorial is create-convert web site/web apps to Progressive Web Apps (PWAs)`. It is advisable to view following course/tutorials to get knowledge: **HTML5** - [HTML5 Essentials Tutorial](https://github.com/dinanathsj29/html5-essentials-tutorial), CSS3 - [CSS3 Fundamentals Tutorial](https://github.com/dinanathsj29/css3-fundamentals-tutorial), **JavaScript** [JavaScript tutorial for Beginners](https://github.com/dinanathsj29/javascript-beginners-tutorial), **Typescript** [Typescript tutorial for all](https://github.com/dinanathsj29/typescript-tutorial) and **ES6** - [ES6-ECMAScript6-ECMAScript2015-tutorial](https://github.com/dinanathsj29/ES6-ECMAScript6-ECMAScript2015-tutorial) before dive deeper with Progressive Web Apps (PWAs).\n\nTopics included/covered\n=====================\n\n1. [Introduction to Progressive Web Apps (PWAs)](#1-introduction-to-progressive-web-apps-pwas)\n    - 1.1. [Questions while creating a Mobile App](#11-questions-while-creating-a-mobile-app)\n    - 1.2. [What is Progressive Web Apps (PWAs)?](#12-what-is-progressive-web-apps-pwas)\n    - 1.3. [Progressive Web Apps (PWAs) Trend](#13-progressive-web-apps-pwas-trend)\n    - 1.4. [What Progressive Web Apps (PWAs) are not?](#14-what-progressive-web-apps-pwas-are-not)\n    \n1 Introduction to Progressive Web Apps (PWAs)\n=====================\n\n1.1. Questions while creating a Mobile App\n---------------------\n\n#### \u003cdiv style=\"color:#039be5;\"\u003eWhich language to use to create Mobile App?\u003c/div\u003e\n- Java\n- Swift\n\n#### \u003cdiv style=\"color:#039be5;\"\u003eWhich Devices to cover? App works on which platform/devices?\u003c/div\u003e\n- Android\n- Apple iOS\n\n#### \u003cdiv style=\"color:#039be5;\"\u003eWhich Framework to use to create Mobile App?\u003c/div\u003e\n- React Native\n- Flutter\n- Adobe PhoneGap\n- JQuery Mobile\n- Xamarin\n\n#### \u003cdiv style=\"color:#039be5;\"\u003eWhich market plac/store to publish the app?\u003c/div\u003e\n- Google Play Store\n- Apple App Store\n- Windows Store\n\n\n1.2. What is Progressive Web Apps (PWAs)?\n---------------------\n\n\u003cdiv style=\"background-color:#4285f4; padding:10px; border-radius:3px; font-size:16px;\"\u003e\nPWA is web sites/web app created with the help of emerging web technologies (HTML5, CSS3, Vanilla JavaScript), run in the browser, experience, behave and feel much like mobile app and can access or provide mobile native features like (install on mobile home screen, Access the app when offline, Get push notifications etc.)\n\u003c/div\u003e\n\nMore than just a buzzword, a Progressive Web Apps or `PWAs are a set of guidelines to utilize modern browser features` in a way that creates a more app-like user experience.\n\nWith PWAs no need to learn `new programming language`, `new framework`!\n\u003chr/\u003e\n\nThe term Progressive Web Apps was coined by *Alex Russell* and *Frances Berriman*. In Alex’s words:\n\u003e Progressive Web Apps are just websites that took all the right vitamins\n\n\u003cdiv style=\"background-color:#4285f4; padding:10px; border-radius:3px; font-size:16px;\"\u003e\n\nA `development approach` of using a set of technologies that allows `web content to be app-like experience` including offline functionality, notifications, and device access\n\nAn `opportunity` to take these technologies and approach to `clean up and speed up current web-based projects`. All the tech involved are open standards that can be used in a pick and mix format\n\u003c/div\u003e\n\n\u003e Progressive Web Apps (PWAs) - bridging the gap between user and publisher\n\u003chr/\u003e\n\nWe can add a set of features/technologies to our WEB app/WEB page to enhance it to feel and work like a NATIVE mobile app. We can Progressively enhance our web apps to look and feel, behave like a native app\n\n- Takes advantage of the latest technologies to **`combine the best of web and mobile apps`**\n- Think of it as a website built using web technologies but which acts and feels like a mobile app\n- Recent advancements in types of browsers, availability of Service Workers, Cache and Push API's have enabled web developers to allow users to:\n  - Install web apps to their home screen\n  - Receive push notifications\n  - Work offline\n\n1.3. Progressive Web Apps (PWAs) Trend\n---------------------\n\nIt’s looking like Progressive Web Apps PWAs is a very hot topic these days, it is a standard from Google, which allows users to install and use a website as an app. In 2018, the search term `progressive web apps` is on top of popularity:\n\n\u003cp\u003e\n \u003cfigure\u003e\n \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-pwa-progressive-web-apps/1.3.1-trends-pwa.png\" alt=\"Progressive Web Apps (PWAs) Google Trends\" title=\"Progressive Web Apps (PWAs) Google Trends\" width=\"1000\" border=\"2\" /\u003e\n \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Progressive Web Apps (PWAs) Google Trends\u003c/figcaption\u003e\n \u003c/figure\u003e\n\u003c/p\u003e\n\n1.4. What Progressive Web Apps (PWAs) are not?\n---------------------\n\nProgressive Web Apps (PWAs) are not:\n- The end of all native app development\n- What every web content needs to get converted into\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fprogressive-web-apps-pwa-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinanathsj29%2Fprogressive-web-apps-pwa-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fprogressive-web-apps-pwa-tutorial/lists"}