Progressive Web Application Development

Introduction to PWA 7 lectures 23:04 The course Overview This video will give you an overview about the course. What Really is a PWA? This video aim to show what really is PWA terms and what are the capabilities and why it’s important now. • Explain PWA term • Understand Progressively enhanced web apps • Understand reasons to do PWA PWA Core Concepts The goal of the video is to show the core concepts behinds PWA. • Understand Progressiveness, responsiveness and security • Understand, connectively independent, app-like and re-engagablility. • Understand Installation, likability and discoverability What is PRPL Pattern? In this video we will dive into theory behind PRPL pattern. • Explain Push critical resources for the initial URL route • Explain Render initial route. And Pre-cache remaining routes • Explain Lazy-load and create remaining routes on demand Demo of Final Course Project This video aims to show what will achieve as our final project by the end of the course. • Show app structure • Show default functionalities • Show requirements Responsive UI In this video we aim to show leaner that how many options we have to create responsive app. • Explore traditional gird layout • Explore Flexbox • Explore Grid CSS Tools Overview and Setup In this video we will learn how to use and setup all required tools and sources. • Explore chrome dev tools, • Explore resources and documentations • Install and setup node, npm and Android stup and run android emulator Introduction to PWA 7 lectures 23:04 The course Overview This video will give you an overview about the course. What Really is a PWA? This video aim to show what really is PWA terms and what are the capabilities and why it’s important now. • Explain PWA term • Understand Progressively enhanced web apps • Understand reasons to do PWA PWA Core Concepts The goal of the video is to show the core concepts behinds PWA. • Understand Progressiveness, responsiveness and security • Understand, connectively independent, app-like and re-engagablility. • Understand Installation, likability and discoverability What is PRPL Pattern? In this video we will dive into theory behind PRPL pattern. • Explain Push critical resources for the initial URL route • Explain Render initial route. And Pre-cache remaining routes • Explain Lazy-load and create remaining routes on demand Demo of Final Course Project This video aims to show what will achieve as our final project by the end of the course. • Show app structure • Show default functionalities • Show requirements Responsive UI In this video we aim to show leaner that how many options we have to create responsive app. • Explore traditional gird layout • Explore Flexbox • Explore Grid CSS Tools Overview and Setup In this video we will learn how to use and setup all required tools and sources. • Explore chrome dev tools, • Explore resources and documentations • Install and setup node, npm and Android stup and run android emulator The course Overview This video will give you an overview about the course. The course Overview This video will give you an overview about the course. The course Overview This video will give you an overview about the course. The course Overview This video will give you an overview about the course. This video will give you an overview about the course. This video will give you an overview about the course. What Really is a PWA? This video aim to show what really is PWA terms and what are the capabilities and why it’s important now. • Explain PWA term • Understand Progressively enhanced web apps • Understand reasons to do PWA What Really is a PWA? This video aim to show what really is PWA terms and what are the capabilities and why it’s important now. • Explain PWA term • Understand Progressively enhanced web apps • Understand reasons to do PWA What Really is a PWA? This video aim to show what really is PWA terms and what are the capabilities and why it’s important now. • Explain PWA term • Understand Progressively enhanced web apps • Understand reasons to do PWA What Really is a PWA? This video aim to show what really is PWA terms and what are the capabilities and why it’s important now. • Explain PWA term • Understand Progressively enhanced web apps • Understand reasons to do PWA This video aim to show what really is PWA terms and what are the capabilities and why it’s important now. • Explain PWA term • Understand Progressively enhanced web apps • Understand reasons to do PWA This video aim to show what really is PWA terms and what are the capabilities and why it’s important now. • Explain PWA term • Understand Progressively enhanced web apps • Understand reasons to do PWA PWA Core Concepts The goal of the video is to show the core concepts behinds PWA. • Understand Progressiveness, responsiveness and security • Understand, connectively independent, app-like and re-engagablility. • Understand Installation, likability and discoverability PWA Core Concepts The goal of the video is to show the core concepts behinds PWA. • Understand Progressiveness, responsiveness and security • Understand, connectively independent, app-like and re-engagablility. • Understand Installation, likability and discoverability PWA Core Concepts The goal of the video is to show the core concepts behinds PWA. • Understand Progressiveness, responsiveness and security • Understand, connectively independent, app-like and re-engagablility. • Understand Installation, likability and discoverability PWA Core Concepts The goal of the video is to show the core concepts behinds PWA. • Understand Progressiveness, responsiveness and security • Understand, connectively independent, app-like and re-engagablility. • Understand Installation, likability and discoverability The goal of the video is to show the core concepts behinds PWA. • Understand Progressiveness, responsiveness and security • Understand, connectively independent, app-like and re-engagablility. • Understand Installation, likability and discoverability The goal of the video is to show the core concepts behinds PWA. • Understand Progressiveness, responsiveness and security • Understand, connectively independent, app-like and re-engagablility. • Understand Installation, likability and discoverability What is PRPL Pattern? In this video we will dive into theory behind PRPL pattern. • Explain Push critical resources for the initial URL route • Explain Render initial route. And Pre-cache remaining routes • Explain Lazy-load and create remaining routes on demand What is PRPL Pattern? In this video we will dive into theory behind PRPL pattern. • Explain Push critical resources for the initial URL route • Explain Render initial route. And Pre-cache remaining routes • Explain Lazy-load and create remaining routes on demand What is PRPL Pattern? In this video we will dive into theory behind PRPL pattern. • Explain Push critical resources for the initial URL route • Explain Render initial route. And Pre-cache remaining routes • Explain Lazy-load and create remaining routes on demand What is PRPL Pattern? In this video we will dive into theory behind PRPL pattern. • Explain Push critical resources for the initial URL route • Explain Render initial route. And Pre-cache remaining routes • Explain Lazy-load and create remaining routes on demand In this video we will dive into theory behind PRPL pattern. • Explain Push critical resources for the initial URL route • Explain Render initial route. And Pre-cache remaining routes • Explain Lazy-load and create remaining routes on demand In this video we will dive into theory behind PRPL pattern. • Explain Push critical resources for the initial URL route • Explain Render initial route. And Pre-cache remaining routes • Explain Lazy-load and create remaining routes on demand Demo of Final Course Project This video aims to show what will achieve as our final project by the end of the course. • Show app structure • Show default functionalities • Show requirements Demo of Final Course Project This video aims to show what will achieve as our final project by the end of the course. • Show app structure • Show default functionalities • Show requirements Demo of Final Course Project This video aims to show what will achieve as our final project by the end of the course. • Show app structure • Show default functionalities • Show requirements Demo of Final Course Project This video aims to show what will achieve as our final project by the end of the course. • Show app structure • Show default functionalities • Show requirements This video aims to show what will achieve as our final project by the end of the course. • Show app structure • Show default functionalities • Show requirements This video aims to show what will achieve as our final project by the end of the course. • Show app structure • Show default functionalities • Show requirements Responsive UI In this video we aim to show leaner that how many options we have to create responsive app. • Explore traditional gird layout • Explore Flexbox • Explore Grid CSS Responsive UI In this video we aim to show leaner that how many options we have to create responsive app. • Explore traditional gird layout • Explore Flexbox • Explore Grid CSS Responsive UI In this video we aim to show leaner that how many options we have to create responsive app. • Explore traditional gird layout • Explore Flexbox • Explore Grid CSS Responsive UI In this video we aim to show leaner that how many options we have to create responsive app. • Explore traditional gird layout • Explore Flexbox • Explore Grid CSS In this video we aim to show leaner that how many options we have to create responsive app. • Explore traditional gird layout • Explore Flexbox • Explore Grid CSS In this video we aim to show leaner that how many options we have to create responsive app. • Explore traditional gird layout • Explore Flexbox • Explore Grid CSS Tools Overview and Setup In this video we will learn how to use and setup all required tools and sources. • Explore chrome dev tools, • Explore resources and documentations • Install and setup node, npm and Android stup and run android emulator Tools Overview and Setup In this video we will learn how to use and setup all required tools and sources. • Explore chrome dev tools, • Explore resources and documentations • Install and setup node, npm and Android stup and run android emulator Tools Overview and Setup In this video we will learn how to use and setup all required tools and sources. • Explore chrome dev tools, • Explore resources and documentations • Install and setup node, npm and Android stup and run android emulator Tools Overview and Setup In this video we will learn how to use and setup all required tools and sources. • Explore chrome dev tools, • Explore resources and documentations • Install and setup node, npm and Android stup and run android emulator In this video we will learn how to use and setup all required tools and sources. • Explore chrome dev tools, • Explore resources and documentations • Install and setup node, npm and Android stup and run android emulator In this video we will learn how to use and setup all required tools and sources. • Explore chrome dev tools, • Explore resources and documentations • Install and setup node, npm and Android stup and run android emulator Understanding Web App Manifest. 6 lectures 32:42 Understanding App Manifest Properties This video aims to show what is manifest. json and will review all properties. • Understand all manifest.json properties • Understand icons sizes and main properties as requirements for manifest.json • Explore tools which will help us to generate manifest.json and icons Add Properties to manifest.json This video aims to show how we can add manifest.json to the app and how we can add properties to it. • Add manifest.json to project • Add properties to manifest.json • Test manifest.json and see if it’s installed on dev tools. Prerequisites for Installing Web App This video aims to show the requirements for the install-banner prompt. • Explore requirements for installable banner • Discuss about time to show the banner to user • Introduce resource for more information Run Android Emulator and Leverage Chrome Dev Tools for Debugging This video aims to show how to debug a manifest.json file and what its effects on an emulator. • Debug an application mode in chrome dev tools • Run android emulator and test on chrome on android • Refresh and debug both dev tools and real device Add Properties for Safari This video aims to show more meta tags in order to bring better user experience on safari. • Add theme color in index duction to service worker life cycle Service Worker Lifecycle This video aims to...