English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 7h 03m | 1.67 GB
Learn the skills to build blazingly fast applications which look just like your native mobile app.
This course teaches you how to build discoverable and engaging progressive web applications (PWAs) using the Cache API to make it offline-ready and blazingly fast service workers to intercept network requests and web app manifests, thus leveraging native-like features.
We begin by introducing the core concepts of progressive web apps, explaining each of them in detail and finishing up by implementing them into a production-ready app.
A service worker is the main PWA tool. In this course, you will master the power of new APIs including the Fetch API, promises, and more. Don’t lose your users when their internet connection is lost; get hands-on with powerful caching and network request strategies to provide synchronization of data while your app is offline. Learn how to improve user engagement with your apps by adding push notifications.
We also cover app manifests in depth to let your users add your application to their mobile home screen and reopen the app as easily as tabbing on the web app icon, just as with other native mobile apps. They’ll also surf while there is no address bar; the user experience feels like a native mobile app due to the addition of a splash screen, application shell, native default color, and more.
Tools are always helpful while developing software; therefore, this course teaches you how to boost your productivity by using Workbox, to make service worker management a lot easier, and Lighthouse, to show your PWA score demonstrate and how you can achieve 100/100.
All of the topics in this course feed into a practical project which, by the end of the course, is ready to deploy to production. To ensure that the app is useful for any kind of project later and also that you can learn everything in depth, the course project is created in pure JS/CSS/HTML.
Last but not least, SPAs (Single Page Applications) are super-critical as these days they perform such a leading role in web development and building hybrid and native mobile apps. Therefore, this course dedicates a section to show you how you can use Angular, React, Ember, and Vue.js to build a progressive web application.
The course explains the concepts first and then implements what has been explained with the help of a practical project. By end of the course, you’ll not only be familiar with how PWAs work, but will also have built and deployed a production-ready app with practical tips.
What You Will Learn
- Build web apps that look and feel like native mobile apps
- Leverage new web technologies such as the Fetch API and promises.
- Audit and improve a PWA with different tools
- Convert an existing app to a PWA
- Boost your web app speed with the help of progressive enhancements and approaches.
- Increase user engagement by using push notifications
- In-depth details about service workers
- Offline storage and different caching APIs.
Table of Contents
01 The course Overview
02 What Really is a PWA
03 PWA Core Concepts
04 What is PRPL Pattern
05 Demo of Final Course Project
06 Responsive UI
07 Tools Overview and Setup
08 Understanding App Manifest Properties
09 Add Properties to manifest.json
10 Prerequisites for Installing Web App
11 Run Android Emulator and Leverage Chrome Dev Tools for Debugging
12 Add Properties for Safari
13 Add Properties for Internet Explorer
14 Promise API
15 Fetch API
16 What Is a Service Worker and How it Works
17 Events in Service Worker
18 Service Worker Lifecycle
19 Scope Working for a Service Worker
20 Register, Update, and Activate SW
21 Debug Our Service Worker
22 Install App Banner and Control Over it
23 Debug and Test on Android Emulated Device
24 Practice with Our Final App Project
25 Storage Options
26 Cache API
27 Pre-Caching_Static Caching
28 ES6 Overview
29 Add, Update Cache
30 Respond with Cache
31 Dynamic Caching Upon Fetch
32 Offline Respond Placeholders
33 Remove_Cleanup Caches
34 Caching Strategies
35 Practice with Our Final App Project
36 IndexedDB_Write Data
37 IndexedDB_Retrieve and Delete
38 Tools to Help Create Cache and Service Worker
39 Practice with Our Final App Project
40 Setup Firebase CLI
41 Make Our App Ready to Deploy
42 Deploy to Firebase
43 How Background Sync Helps
44 Register a Synchronization Task
45 Storing Our Data in IndexedDB and Firebase
46 Syncing Data in Server Worker with Server
47 Periodic Sync
48 Push Notification Fundamentals
49 Request Permission, Subscription, and Display Notification
50 Store Client Subscription and Secure It in Backend
51 Send Notification from Server and Listen from Service Worker
52 Clean Up Subscriptions
53 PWA in an Angular App
54 PWA in a React App
55 PWA in a Vue App
56 PWA in an Ember App
Resolve the captcha to access the links!