Progressive Web Apps (PWA) – The Complete Guide

Progressive Web Apps (PWA) – The Complete Guide

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 15 Hours | 1.96 GB

Build a Progressive Web App (PWA) that feels like an iOS & Android App, using Device Camera, Push Notifications and more

Progressive Web Apps (PWA) are the next big thing in web development as they bring mobile-app-like experiences to your users without requiring them to install an app from the app store/ play store.

You still create a web application (HTML, CSS, JavaScript) but this course will teach you how to add features such as camera access, service workers for offline support, push notifications and more. This combines the best of both worlds: You deliver fast, engaging and reliable experiences whilst still having the reach and accessibility of a web page.

“Progressive Web App” simply is a term summarizing all the features allowing you to deliver mobile-like experiences. The topic is highly trending and it also is a topic which is here to stay! Not only is it strongly promoted by Google (actually a lot of talks at Google I/O 2017, Google’s developer conference, were devoted to PWAs), it’s also quickly being adopted by big companies like Twitter or the Washington Post.

Having the skills to build and optimize these kind of web apps is already an important and highly demanded skill for modern web developers, a trend which is only going to accelerate! Therefore, learning how to build PWAs will give you a competitive edge!

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”:

  • Detailed explanation about what a PWA exactly is
  • How to use an app manifest to make your web app installable on device homescreens
  • Using service workers to offer offline support by caching assets
  • Advanced service worker usage and caching strategies
  • A refresher on Promises and the Fetch API as both concepts are heavily used in PWAs
  • How to improve user engagement by adding push notifications
  • A way to synchronize data in the background, even if connection is lost
  • How to access native device features like the camera or geolocation
  • Using Workbox to make service worker management easier
  • Explanations on how to turn your next SPA project into a PWA
  • And more

All these things are of course put into practice by building a course project. To ensure that you can apply the knowledge to ANY of your projects, the course project doesn’t assume any JavaScript framework but focuses on the core features mentioned above!

Table of Contents

Getting Started
1 About this Course
2 What are Progressive Web Apps
3 PWAs vs Native Mobile Apps
4 A Demo PWA What Well Build in this Course
5 Our First Progressive Web App
6 PWA Core Building Blocks
7 Comparing PWAs and SPAs
8 What is Progressive Enhancement
9 Course Outline
10 Course Project Setup
11 How to get the Most out of this Course

Understanding the App Manifest
12 Module Introduction
13 Using an App Manifest to Make your App Installable
14 Adding the Manifest
15 Understanding App Manifest Properties
16 Adding Properties to the App Manifest
17 PWAs and Browser Support
18 Using the Chrome Developer Tools
19 Simulating the Web App on an Emulator
20 Preparing the Emulated Device for ALL PWA Features
21 Installing the Web App – Prerequisites
22 Adding Properties for Safari
23 Adding Properties for the Internet Explorer
24 Wrap Up
25 Useful Resources Links

The Service Workers
26 Module Introduction
27 Why Service Workers Are Amazing
28 Understanding Service Worker Events
29 The Service Worker Lifecycle
30 Service Worker Browser Support
31 Registering a Service Worker
32 Reacting to Incoming Events in SW
33 Updating Activating Service Workers
34 Non-Lifecycle Events
35 Getting that App Install Banner
36 Connecting Chrome Developer Tools to a Real Emulated Device
37 Testing the App on Real Device and Installing the App
38 Deferring the App Install Banner
39 Wrap Up
40 Service Worker FAQ
41 Useful Resources Links

Promise and Fetch
42 Module Introduction
43 Async Code in JavaScript
44 Promises – Basics
45 Rejecting Promises
46 Where we Use Promises in our Project
47 Fetch – Basics
48 Sending Post Requests via Fetch
49 Fetch and CORS
50 Comparing Fetch and Ajax
51 Adding Polyfills for Legacy Browser Support
52 Fetch Service Workers
53 Wrap Up
54 Useful Resources Links

Service Workers – Caching
55 Module Introduction
56 Why Caching
57 Understanding the Cache API
58 Browser Support
59 Adjusting the Course Project
60 Identifying Pre-Cacheable Items
61 Static Caching Precaching
62 Retrieving Items from the Cache
63 Adding Retrieving Multiple Files to from Cache
64 Cache Multiple Files with addAll
65 Dynamic Caching – The Basics
66 Implementing Dynamic Caching
67 Handling Errors
68 Adding Cache Versioning
69 Different Cache Versions Cleanup
70 Optimizing Cache Management
71 Wrap Up
72 Useful Resources Links

Service Workers – Advanced Caching
73 Module Introduction
74 Module Preparation Adding a Button
75 Offering Cache on Demand
76 Providing an Offline Fallback Page
77 Strategy Cache with Network Fallback
78 Strategy Cache Only
79 Strategy Network Only
80 Strategy Network with Cache Fallback
81 Strategy Cache then Network
82 Cache then Network Dynamic Caching
83 Cache then Network with Offline Support
84 Cache Strategies Routing
85 Applying Cache Only
86 A Better Way Of Parsing Static Cache URLs
87 Making Route Matching More Precise
88 A Better Way Of Serving Fallback Files
89 Post Request and Cache API
90 Cleaning Trimming the Cache
91 Getting Rid of a Service Worker
92 Preparing the Project for the Next Steps
93 Wrap Up
94 Useful Resources Links

IndexedDB and Dynamic Data
95 Module Introduction
96 Understanding the Basics
97 Setting Up Firebase
98 Connecting Frontend to Backend
99 Dynamic Caching vs. Caching Dynamic Content
100 Introducing IndexedDB
101 IndexedDB Browser Support
102 Adding the IDB File
103 Storing Fetched Posts in IndexedDB
104 Using IndexedDB in the Service Worker
105 Reading Data from IDB
106 Clearing IDB Handling Server-Client Mismatch
107 Implementing the Clear Database Method
108 Deleting Single Items from the Database
109 IndexedDB and Caching Strategies
110 Wrap Up
111 Useful Resources Links

Creating a Responsive User Interface UI
112 Module Introduction
113 Responsive Design in this Course
114 Understanding Responsive Design in our Project
115 CSS and Media Queries
116 Want to see more of your Images
117 Using Images in a Responsive Way
118 Adding Animations
119 The Viewport Scaling
120 Wrap Up
121 Useful Resources Links

Background Sync
122 Module Introduction
123 How does Background Sync Work
124 Adding the Basic Setup to our Project
125 Registering a Synchronization Task
126 Storing our Post in IndexedDB
127 Adding a Fallback
128 Syncing Data in the Service Worker
129 Understanding Periodic Sync
130 Adding Server Side Code
131 Fixing Errors
132 Wrap Up
133 Useful Resources Links

Web Push Notifications
134 Module Introduction
135 Why we need Web Push Notifications
136 How Push Notifications Work
137 Displaying Notifications – Some Theory First
138 Browser Support
139 Requesting Permissions
140 Displaying Notifications
141 Notifications from Within the Service Worker
142 Understanding Notifications Options
143 Advanced Options
144 Adding Actions to Notifications
145 Reacting to Notification Interaction – Clicks
146 Reacting to Notification Interaction – Closing
147 From Notifications to Push Messages
148 Creating a Push Subscription
149 Storing Subscriptions
150 Connecting Server Client PWA
151 Sending Push Messages from the Server
152 Listening to Push Messages
153 Displaying Push Notifications on a Real Device
154 Opening a Page upon User Interaction
155 Improving our Code
156 Wrap Up
157 Useful Resources Links

Native Device Features
158 Module Introduction
159 Preparing the Project
160 Getting DOM Access
161 Creating our own Polyfills
162 Getting the Video Image
163 Hooking Up the Capture Button
164 Storing the Image on a Server
165 Accepting File Upload Example with Firebase
166 Testing the Camera Upload
167 Implementing a Fallback
168 Getting the User Position
169 Fixing Bugs
170 Testing the App on a Real Device
171 Wrap Up
172 Useful Resources Links

Service Worker Management with Workbox
173 Module Introduction
174 Understanding the Basics
175 Installing Workbox Using It
176 Configuring Workbox Precaching
177 Customizing the Service Worker
178 Implementing Routing with the Workbox Router
179 Expanding Dynamic Caching
180 Options and Setting Up Strategies
181 Custom Handlers Example For IndexedDB
182 Providing an Offline HTML Fallback
183 Handling Background Synchronisation and Push Notifications
184 Understanding the Workbox Documentation
185 Enhancing the Build Workflow
186 Running our App on a Real Server
187 Auditing our Webpage with Lighthouse
188 Wrap Up
189 Useful Resources Links

SPAs and PWAs
190 Module Introduction
191 React with create-react-app
192 A General Note about SPAs and PWAs
193 Angular with the CLI
194 Vue with Vue CLI
195 Wrap Up
196 Useful Resources Links

Course Roundup
197 Course Roundup