Learn Angular 8 by building a Progressive Web App (PWA) by Vinod Kayartaya

Learn Angular 8 by building a Progressive Web App (PWA)

25 lectures - 2 hr 41 mins

What you will learn in this course?

  • Install Node, Angular CLI, Firebase tools.
  • Create a new Angular 8 app from scratch.
  • Build a production ready application.
  • Develop a real "Movie browser" Application.
  • Deploy to Google Firebase's free hosting service.
  • Understand what a PWA (Progressive Web Apps) is.
  • Test your Angular 8 application on Android phone
  • Install the Movie browser app as a desktop application
  • Run your app even when you are offline (using service workers)
  • Create web applications that look and feel like native mobile apps

Requirements

  • Basic HTML/CSS/JS knowledge
  • You should have a PC or Laptop with decent internet connection

Description

A Progressive Web App or PWA is a web application that has a set of capabilities (similar to native apps) which provide an app-like experience to users. PWAs need to meet a set of essential requirements that we'll see next. PWAs are similar to native apps but are deployed and accessible from web servers via URLs, so we don't need to go through app stores.

A PWA needs to be:

  • Progressive: Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.
  • Responsive: Fit any form factor, desktop, mobile, tablet, or whatever is next.
  • Connectivity independent: Enhanced with service workers to work offline or on low-quality networks.
  • App-like: Use the app-shell model to provide app-style navigation and interactions.
  • Fresh: Always up-to-date thanks to the service worker update process.
  • Safe: Served via HTTPS to prevent snooping and ensure content has not been tampered with.
  • Discoverable: Are identifiable as "applications" thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  • Re-engageable: Make re-engagement easy through features like push notifications.
  • Installable: Allow users to "keep" apps they find most useful on their home screen without the hassle of an app store.
  • Linkable: Easily share via URL and not require complex installation.

In detail, this course will cover everything you need to build amazing PWAs - leading to a score of 100 (out of 100) in Google's PWA auditing tool "Lighthouse".

This is completely a hands-on training, bringing all the best practices that a developer should follow in his/her projects.

What's included?

Video Icon 23 videos File Icon 1 file

Course content

Introduction
Introduction
4 mins
Characteristics of a PWA
7 mins
Software setup
Installing nodejs
4 mins
Installing Angular CLI
3 mins
Installing Firebase tools
2 mins
06-Installing VS Code.mp4
2 mins
07-Creating an account with omdbapi.com.mp4
3 mins
Download the Angular app
The Movie Browser Angular App
608 KB
Let's create the Movie Browser app
08-New Angular application.mp4
17 mins
09-Home component.mp4
19 mins
10-Header component.mp4
6 mins
11-MovieList component - Part 1.mp4
15 mins
12-Routing and Single-Page-Application.mp4
16 mins
13-Getting the list of movies based on search term.mp4
14 mins
14-MovieList component - Part 2.mp4
5 mins
15-Getting the movie details based on IMDB id.mp4
4 mins
16-MovieDetails component.mp4
18 mins
Making the app "Progressive"
17-Adding PWA to our project.mp4
4 mins
18-Walk through of the generated artifacts.mp4
2 mins
19-Creating and updating icons.mp4
8 mins
20-New Firebase hosting for our application.mp4
6 mins
21-Deploying our Angular application to Firebase hosting.mp4
4 mins
22-Accessing the MovieBrowser PWA site on Chrome.mp4
7 mins
23-PWApp on a mobile phone.mp4
2 mins

Hi. My name is Vinod

Hi, my name is Vinod, and I am a software trainer, consultant and freelance developer. I am the creator some of the highest rated courses on Udemy. In my professional career, I have trained hundreds of thousands of software engineers. Teaching is not only my profession, but also a passion. Creating online courses gives me the opportunity to reach and help students across the world.