Progressive Web App Development: A Complete Guide: 2-in-1
3.9 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
63 students enrolled

Progressive Web App Development: A Complete Guide: 2-in-1

Simplify your application development and deployment by creating apps with improved capabilities
3.9 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
63 students enrolled
Created by Packt Publishing
Last updated 5/2018
English
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 9.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Complex dependency management in modern web applications with NPM
  • Building your code with Webpack
  • Styling, linting and formatting your application
  • Build web apps that look and feel like native mobile apps
  • Audit and improve a PWA with different tools
  • Increase user engagement by using push notifications
Course content
Expand all 78 lectures 09:40:06
+ Web Developer Toolbox - Essentials for Modern Web Development
22 lectures 02:37:12

This video gives an overview of entire course.

Preview 03:34

In this video, we’ll learn how to load in modules from npm.

  • Learn how to install node and npm
  • Set up a project with npm
  • Install a dependency with npm 
Preview 10:25

Learn how to install packages and run them on the command line with npm.

  • See how to install packages globally
  • Install package locally to a project
  • Use a local package on the command line 
Running Command-Line Tools
04:54

How to write scripts to automate common tasks when using npm.

  • How to write a script
  • How to run your script
  • How to use command-line dependencies inside a script 
Writing Scripts
04:20

In this video, we’ll see how to lock down specific version of your dependencies.

  • See you how npm 5 automatically creates a lock file
  • Discuss why this is useful for reproducible builds
  • See the speed improvements the lock file brings 
Locking Down Dependencies
03:58

In this video, we will look at what Webpack is and why you should use it for modern web development.

  • Look at how a Webpack project is set up
  • Talk about plugins and loaders
  • Discuss how to run Webpack for local development 
Preview 05:49

Using Webpack and Babel to use the latest JavaScript language features.

  • How to configure Babel inside your webpack config
  • Why you need Babel for modern web development
  • Discuss how debugging works with Babel 
Setting Up Babel
09:17

Configure Webpack to build SCSS (or SASS) into CSS.

  • Examine the SCSS configuration in Webpack
  • Show some examples of it working in the browser
  • Look at how the styles are loaded into the browser 
Loaders for SCSS
07:16

Using Webpack to include images into your webpack output.

  • How to configure Webpack to support images
  • How to reference our image in JavaScript
  • How it works inside the browser 
Loaders for Images
03:31

We’ll see how to compress Webpack’s output to speed up page loads for users.

  • Explain how to configure Webpack to compress assets
  • Examine the output of the webpack build
  • Discuss how much smaller the output is after compression 
Compressing Assets
04:14

We look at how to hot reload code changes straight into the browser.

  • Look at how to set up hot reload in Webpack
  • Show some examples of hot reloading in action
  • Discuss some of the common problems that happen 
Hot Reloading Code
02:54

We look at how webpack can eliminate dead code that isn’t used using Tree Shaking.

  • Cover what tree shaking is
  • How to configure webpack to tree shake
  • An example of tree shaking in action 
Tree Shaking
02:22

In this video, we will look at Neutrino, which wraps Webpack in a more user-friendly way with much less configuration.

  • Set up a Neutrino build in a few simple steps
  • Let’s examine how you can run your project in dev mode
  • Look at how to build your neutrino project for production 
Neutrino
04:40

In this video, we will take a look at Next.js and how you can use it to do a server-side webpack build.

  • Explain how Next.js can be used instead of Webpack
  • Learn how Next.js can speed up page loads
  • Set up a Next.js project 
Server-Side Rendering with Next.js
06:36

In this video, we will cover what Lodash is and why you should use it in your applications.

  • How to import Lodash into your project
  • How to use the documentation to find the functions you need
  • Examples of the most commonly used functions
Lodash
21:26

In this video, we will demonstrate moment.js – the most user friendly date time library for JavaScript.

  • Explore how to add it to the project
  • Where to find the documentation for moment.js
  • Examples of common and useful usages of moment.js 
Moment.js for Dates
10:34

We will look at modern ways to make HTTP requests without using a library and with using a library.

  • Look at how to use fetch to do HTTP requests without using a library
  • Look at Superagent to do requests with best-in-class documentation
  • Weight up the pros and cons of each approach 
HTTP Calls Using SuperAgent/Fetch
05:00

Using CSS modules to limit your CSS to certain files in your code base.

  • How to enable CSS modules using Webpack
  • Some examples of how it works
  • The benefits of using CSS modules 
CSS Modules
09:42

How to use Flexbox for easier layouts on your websites?

  • How to enable Flexbox
  • Common layouts and alignments
  • More complex wrapping examples 
Flexbox
18:22

In this video, we will look at how to ESLint is used in our codebase to apply lint rules.

  • Explore the Airbnb linting rules and documentation
  • Set up a lint on a project
  • Configure the lint with some different rules
Linting JavaScript
07:19

In this video, we will look at how you can lint CSS and Sass automatically to find errors in your SCSS code.

  • Set up stylelint to help you lint css
  • Look at the kind of errors stylelint can throw up
  • Demonstrate that it’s possible to override the rules 
Linting CSS
03:15

In this video, we will look at how prettier and stylefmt can format your code for you.

  • We some examples of how prettier corrects our code
  • Look at how stylefmt corrects our code
  • How to auto-format our code when we commit to Git 
Auto-formatting JavaScript
07:44
+ Progressive Web Application Development
56 lectures 07:02:54

This video will give you an overview about the course.

The course Overview
04:16

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?
03:38

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
02:39

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?
02:24

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
02:42

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
02:31

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
04:51

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 
Understanding App Manifest Properties
08:55

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.  
Add Properties to manifest.json
08:10

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 
Prerequisites for Installing Web App
02:22

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 
Run Android Emulator and Leverage Chrome Dev Tools for Debugging
05:23
Add Properties for Safari
03:34

In this video we will learn how to improve the user experience for IE users.

  • Add meta tags in index.html
  • Add title for installable banner for IE
  • Add icons for IE when it gets added to home screen  
Add Properties for Internet Explorer
04:18

This video aims to ensure that the learner understands callbacks and promise inside-out.

  • Define callback and explain call back hells
  • Turn callbacks to promise
  • Explore promises and race. 
Promise API
16:06

This video, aims to explain fetch api and ensure learner knows how to use it.

  • Explain Xml Http request and why we need fetch
  • Learn fetch with get method
  • Learn fetch with Post method 
Fetch API
13:15

This video, will deep dive into service worker concepts and the way that it works.

  • Understand how normal JavaScript works
  • Learn additional thread for service worker.
  • Learn how server worker works after installation
What Is a Service Worker and How it Works?
03:49

The video aims to show all possible events in service worker.

  • Learn listener to fetch event
  • Understand Push notification and background sync event
  • Introduction to service worker life cycle 
Events in Service Worker
02:55

This video aims to ensure that the user has a good and deep understanding of service worker life cycle.

  • Explore install event
  • Explore activate event
  • Understand Idle and terminated  
Service Worker Lifecycle
04:02

This video will emphasize on how scope is defined and why is so important.

  • Understand section option in server worker registration
  • Add scope to project
  • Explore different sw.js folder scope and where we define it in project.
Scope Working for a Service Worker
01:07

This video aims to show how user can create, install and listen to different event in service worker.

  • Create sw.js and put where it should be scoped
  • Listen to install and activate event and fetch
  • Check service worker in chrome dev tools 
Register, Update, and Activate SW
11:57

In this video, we will learn how an install service worker can be debugged and how skip Waiting works, as well as understand the best practices and tips.

  • Explorer Chrome dev tools
  • Understand different ways to update new service worker
  • Explore how skip Waiting works 
Debug Our Service Worker
07:49

The aim of this video is to add service worker to a project with manifest. json and show how it will appear and how we can defer it.

  • Register service worker with simple event listeners
  • Define deferred variable to postpone showing install banner prompt
  • Test application on emulator and check 
Install App Banner and Control Over it
11:17

In this video, we will learn how to connect a real device and an emulator to chrome dev tools and how to inspect on them.

  • Learn how to install real device
  • Run Emulator and find it in chrome remote devices
  • Test install app banner prompt on emulator and real device 
Debug and Test on Android Emulated Device
08:24

In this video we will practice with our project whatever we learnt about service worker.

  • Add service worker scripts to the project
  • Create sw.js file
  • Implement everything we learnt about service worker
Practice with Our Final App Project
08:06

This video aims to show how many options we have for storage in client side.

  • Learn about IndexedDB
  • Understand cache API
  • Learn about other options  
Storage Options
03:37

In this video we will go through cache api.

  • Learn about Cache API
  • Learn about Cache API documentation
  • Learn how to use cache api methods
Cache API
03:43

In this video, we will learn about pre-caching and how to store static assets in cache.

  • Learn about pre-caching strategy
  • Understand about why we need to do pre-caching in install event
  • Understanding about how it works 
Pre-Caching/Static Caching
04:11

This is very short video to motivate you to write ES6 syntax.

  • Learn about const/let/var
  • Learn about arrow function
  • Understand the difference about arrow function and normal function
ES6 Overview
02:46

This video aims to show you to add assets and data into cache.

  • Learn how to add single
  • Understand about cache version
  • Learn how to add multiple file to cache and update them 
Add, Update Cache
09:41

The goal of this video is to learn how to intercept request and responded from cache

  • Intercept request in service worker
  • Understand how to respond with works
  • Learn how to respond from cache
Respond with Cache
06:03

In this video we will learn how to catch request which are not available in cache and add them to cache

  • Understand why we need dynamic cache
  • Learn how to define dynamic cache
  • Learn how to add request and respond to cache dynamically 
Dynamic Caching Upon Fetch
10:50

This video aims to explain how to respond to offline placeholders.

  • Understand the need for a placeholder
  • Learn how to replace a request
  • Learn how to add replaced image and html 
Offline Respond Placeholders
07:21

In this video, we will clean up our caches which are not in use any more in order to keep our storage clean and as useful as possible.

  • Understand why we need to cache our cache storage
  • Learn how to delete item from a cache
  • Learn to delete the old cache version when they are not in use any more.  
Remove/Cleanup Caches
13:06

In this video we will learn about the different strategies for purposes.

  • Learn about cache only and network only strategy
  • Learn about cache with update from network and network with cache fallback
  • Learn about cache and network race strategy 
Caching Strategies
14:47

This video aims to implement everything in final project and wrap up the section

  • Define our pre-cache and add static assets
  • Add dynamically to our cache
  • Implement placeholder and update our cache
Practice with Our Final App Project
12:47

In this video we will dive into IndexedDB and will write and store our data to it.

  • Understand basic about indexed DB
  • Learn to choose wrapper for indexedDB
  • Write data to indexed db with a Promised based library.
IndexedDB/Write Data
12:03

This Video helps to learn how to get access to data which has been stored in indexedDB and how to delete them.

  • Create your basic methods to get data
  • Use Promise based getData method to get data from indexedDB
  • Learn to delete items from indexedDB.
IndexedDB/Retrieve and Delete
06:16

This video aims to show 3rd party libraries which can help to create easier service worker for caching and implementing different strategy.

  • Learn about different libraries for generating service workers
  • Understand usage of Workbox
  • Learn how to start using third parties such as workbox. 
Tools to Help Create Cache and Service Worker
09:19

In this video we will implement whatever we have learnt into our final application.

  • We create write data method
  • We create getData method
  • We create delete method   
Practice with Our Final App Project
11:56

In this video, we will learn about Firebase and will setup our CLI.

  • Learn about Firebase
  • Setup our Firebase account
  • Install Firebase CLI, and run commands 
Setup Firebase CLI
04:45

In this video we will learn to clean up and install all dependencies in order to make our app ready to deploy.

  • Install dependencies
  • Understand necessary configurations
  • Learn to clean up app to be ready to deploy 
Make Our App Ready to Deploy
04:06

The goal of this video is deploy our app to Firebase and get access to host/database and functions on Firebase.

  • Make Firebase ClI ready
  • Learn how to run command to deploy
  • See process and get your live application URL. 
Deploy to Firebase
03:43

The video aim is to help students understand how background sync works.

  • Understand what is background sync
  • Understand how it works
  • Understand the whole process of background sync 
How Background Sync Helps
02:36

This video aims to show how we can register a tag/task for synchronization.

  • Access current service worker
  • Name your task/tag
  • Learn how to register your tag
Register a Synchronization Task
09:31

The goal of the video is to show one strategy to store data in client side when user is offline and sync them back when user has internet again.

  • Understand how to store data in client side
  • Get access to indexedDB and store data
  • Learn how to fix data from frontend to firebase as our backend
Storing Our Data in IndexedDB and Firebase
11:51

In this video, we will lean how to listen to our registered tag and send data to server.

  • Understand how to store data in client as not synced!
  • Listen to sync event in service worker and send data
  • Cleanup data back in client after syncing  
Syncing Data in Server Worker with Server
14:38

The goal of the video is to show another type of sync which has not been implemented in any of the browsers yet.

  • Learn what is periodic sync
  • Learn how it can help
  • Understand why we need periodic sync 
Periodic Sync
04:08

The video aims to help students understand how push notification works.

  • Understand what is push notification
  • Understand how push server works
  • Understand the whole process of push notification 
Push Notification Fundamentals
02:13

The goal of this video is to show notification prompt and after allowing, show a notification.

  • Learn how to get permission
  • Understand how to get user choice
  • Lean how to send notification message
Request Permission, Subscription, and Display Notification
07:00

In this video we will secure our user subscription keys and store in our backend database.

  • Get Subscription information
  • Use Vapid key to secure it
  • Store new secured subscription to database 
Store Client Subscription and Secure It in Backend
14:36

In this video we will send our push notification to our subscriptions endpoint.

  • Understand how to use Web-push library
  • Send push notification to subscriptions endpoint
  • Listen to sync event in service worker and show message
Send Notification from Server and Listen from Service Worker
13:25

The video aims to show how we can delete those endpoints that are not valid anymore.

  • Understand why we need to clean up our DB
  • Understand query and filter subscription
  • Delete invalid subscriptions endpoint 
Clean Up Subscriptions
06:33

The goal of this video is to show how to setup service worker module in angular and convert an angular app to an offline angular app.

  • Understand Angular CLI and service worker module
  • Learn how to configure angular cli to leverage service worker
  • Register ngsw-worker.js and build for production
PWA in an Angular App
14:26

This video will show how you can easily leverage using create-react-app to build a progressive web app out of the web and how to do more by ejecting Webpack configuration.

  • Learn how to generate a new react app
  • Understand manifest.json and sw.js in react project.
  • Learn to eject Webpack configuration to set up more in react project
PWA in a React App
08:28

In this video, we will learn how to use Vue-cli and PWA template to make a Vue project which convers PWA principle out of the box.

  • Learn how to generate a PWA Vue app
  • Learn about Vue app structure
  • Build for production and make Vue.js app to be offline
PWA in a Vue App
08:55

In this video we are going to talk about Ember.js and use Ember cli to make a fully offline single page application.

  • Learn how to install Ember-cli and create a new project
  • Learn what is the best plugin to create a PWA app in ember ecosystem
  • Learn to configure ember-build.js to have a proper PWA while building ember app for production
PWA in an Ember App
19:04
Requirements
  • Proficient in a high-level programming language such as JavaScript, Java, or Python
Description

Description

Web development technology is moving at a very fast pace with new tools and techniques being released daily. 

With this comprehensive 2-in-1 training course, you will learn everything you need about the essential tools needed to become a better web developer. Also, build discoverable and engaging progressive web applications to make it offline-ready and tremendously fast service workers to stop network requests and web app manifests.

Contents and Overview

This training program includes 2 complete courses, carefully chosen to give you the most comprehensive training possible.

The first course, Web Developer Toolbox - Essentials for Modern Web Development, starts off by understanding Complex Dependency Management with NPM and YARN and how it will help you simplify application development and deployment. Moving along, you will cover essential tools and frameworks (such as moment.js, a modern date time calculation library) and fetch a high-speed HTTP request library, along with other relevant tools for your developer toolkit. Finally we will set up Webpack.

The second course, Progressive Web Application Development, aims at building engaging PWA’s using Cache API. This will make the web apps offline-ready. Further, we will explore fast service workers, various native-like features and get deep insights on Fetch API, Promise, and App manifest. This way, you will get well acquainted with PWA and get hands-on experience with practical projects..

By the end of this training program, you'll not only be familiar with how progressive web applications work, but will also have built and deployed a production-ready app with top notch-features.

About the Authors

  • Richard Gill is a Full Stack JavaScript developer. He runs ZDEV, a software consultancy that specializes in building websites and apps for small- and medium-sized clients. Richard has a Computer Science degree from Imperial College and started his career building technology at investment banks and hedge funds; he then moved on to consulting before founding his own development shop. Richard has spent three years working with React, React Native, and Redux to build websites and apps for real-world clients. He considers himself a generalist programmer who initially was expert in Java, C#, and Ruby on Rails before spending the last few years in a JavaScript/Node based environment. His company follows an apprenticeship model and all his staff were trained by him from scratch.
  • Majid Hajian is a software engineer with a passion for frontend technologies who has been worked over 9 years in this field. He is very involved in open source projects, he also helps to organize meetups and conferences around the world such as Vue.js, Angular and is a mobile meetup co-organizer in Oslo. Majid is also a public technical speaker, a trainer, and a blogger. If you want to get in touch with him feel free to contact him on Twitter (@mhadaily).
Who this course is for:
  • Developers and architects looking to up skill with the latest and greatest web-based technologies, and the tools required to implement them.