Build a Progressive Web App (PWA) that feels like an iOS & Android App, using Device Camera, Push Notifications, and more
About This Video
Build a Progressive Web App (PWA) that feels like an iOS & Android App, using Device Camera, Push Notifications, and more
About This Video
In Detail
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" is simply a term that summarizes all the features that allow 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! 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!
Chapter 1 : Getting Started
About this Course 00:02:07
What are Progressive Web Apps? 00:03:24
PWAs vs Native Mobile Apps 00:06:07
A Demo PWA & What We’ll Build in this Course 00:06:24
Our First Progressive Web App 00:06:28
PWA Core Building Blocks 00:03:20
Comparing PWAs and SPAs 00:03:18
What is “Progressive Enhancement” 00:03:23
Course Outline 00:04:24
Course Project Setup 00:06:10
How to get the Most out of this Course 00:02:11
Chapter 2 : Understanding the App Manifest
Module Introduction 00:01:02
Using an App Manifest to Make your App Installable 00:01:36
Adding the Manifest 00:03:41
Understanding App Manifest Properties 00:09:43
Adding Properties to the App Manifest 00:09:44
PWAs and Browser Support 00:02:17
Using the Chrome Developer Tools 00:01:36
Simulating the Web App on an Emulator 00:04:37
Installing the Web App – Prerequisites 00:02:30
Adding Properties for Safari 00:05:51
Adding Properties for the Internet Explorer 00:02:31
Wrap Up 00:00:28
Chapter 3 : The Service Workers
Module Introduction 00:00:41
Why Service Workers Are Amazing! 00:04:41
Understanding Service Worker Events 00:06:19
The Service Worker Lifecycle 00:05:20
Service Worker Browser Support 00:01:24
Registering a Service Worker 00:09:26
Reacting to Incoming Events (in SW) 00:05:40
Updating & Activating Service Workers 00:03:00
Non-Lifecycle Events 00:04:50
Getting that “App Install Banner” 00:02:40
Testing the App on Real Device (and Installing the App!) 00:03:43
Deferring the App Install Banner 00:06:43
Wrap Up 00:01:21
Chapter 4 : Promise and Fetch
Module Introduction 00:00:49
Async Code in JavaScript 00:03:55
Promises – Basics 00:04:40
Rejecting Promises 00:04:06
Where we Use Promises in our Project 00:02:26
Fetch – Basics 00:06:12
Sending Post Requests via Fetch 00:04:23
Fetch and CORS 00:03:12
Comparing Fetch and Ajax 00:03:04
Adding Polyfills (for Legacy Browser Support) 00:03:30
Fetch & Service Workers 00:02:06
Wrap Up 00:00:56
Chapter 5 : Service Workers – Caching
Module Introduction 00:00:44
Why Caching? 00:03:06
Understanding the Cache API 00:04:00
Browser Support 00:01:50
Adjusting the Course Project 00:02:53
Identifying (Pre-) Cacheable Items 00:03:07
Static Caching/ Precaching 00:11:05
Retrieving Items from the Cache 00:04:56
Adding & Retrieving Multiple Files (to/ from Cache) 00:03:06
Cache Multiple Files with addAll 00:09:11
Dynamic Caching - The Basics 00:01:54
Implementing Dynamic Caching 00:07:19
Handling Errors 00:02:14
Adding Cache Versioning 00:06:56
Different Cache Versions & Cleanup 00:06:37
Optimizing Cache Management 00:02:42
Wrap Up 00:00:35
Chapter 6 : Service Workers - Advanced Caching
Module Introduction 00:01:12
Module Preparation: Adding a Button 00:04:04
Offering “Cache on Demand” 00:06:51
Providing an Offline Fallback Page 00:06:21
Strategy: Cache with Network Fallback 00:01:44
Strategy: Cache Only 00:03:07
Strategy: Network Only 00:01:58
Strategy: Network with Cache Fallback 00:06:22
Strategy: Cache then Network 00:09:05
Cache then Network & Dynamic Caching 00:05:11
Cache then Network with Offline Support 00:05:59
Cache Strategies & “Routing” 00:03:10
Applying Cache Only 00:05:46
A Better Way of Parsing Static Cache URLs 00:02:40
A Better Way of Serving Fallback Files 00:02:58
Post Request and Cache API 00:03:18
Cleaning/ Trimming the Cache 00:06:07
Getting Rid of a Service Worker 00:03:49
Preparing the Project for the Next Steps 00:00:29
Wrap Up 00:00:57
Chapter 7 : IndexedDB and Dynamic Data
Module Introduction 00:01:01
Understanding the Basics 00:01:12
Setting up Firebase 00:07:19
Connecting Frontend to Backend 00:08:32
Dynamic Caching vs. Caching Dynamic Content 00:04:51
Introducing IndexedDB 00:03:35
IndexedDB Browser Support 00:00:39
Adding the IDB File 00:02:31
Storing Fetched Posts in IndexedDB 00:13:12
Using IndexedDB in the Service Worker 00:03:57
Reading Data from IDB 00:06:40
Clearing IDB & Handling Server-Client Mismatch 00:03:41
Implementing the Clear Database Method 00:03:58
Deleting Single Items from the Database 00:04:06
IndexedDB and Caching Strategies 00:01:34
Wrap Up 00:00:46
Chapter 8 : Creating a Responsive User Interface (UI)
Module Introduction 00:01:19
Responsive Design in this Course 00:02:52
Understanding Responsive Design in our Project 00:03:30
CSS and Media Queries 00:09:46
Using Images in a Responsive Way 00:08:52
Adding Animations 00:08:30
The Viewport & Scaling 00:01:47
Wrap Up 00:00:46
Chapter 9 : Background Sync
Module Introduction 00:01:04
How does Background Sync Work? 00:03:34
Adding the Basic Setup to our Project 00:04:04
Registering a Synchronization Task 00:04:37
Storing our Post in IndexedDB 00:06:01
Adding a Fallback 00:04:12
Syncing Data in the Service Worker 00:15:53
Understanding Periodic Sync 00:02:16
Adding Server Side Code 00:15:11
Fixing Errors 00:05:21
Wrap Up 00:00:49
Chapter 10 : Web Push Notifications
Module Introduction 00:01:04
Why we need Web Push Notifications 00:01:56
How Push & Notifications Work 00:09:05
Displaying Notifications - Some Theory First 00:01:52
Browser Support 00:02:02
Requesting Permissions 00:08:07
Displaying Notifications 00:03:38
Notifications from Within the Service Worker 00:03:33
Understanding Notifications’ Options 00:08:49
Advanced Options 00:02:58
Adding Actions to Notifications 00:02:23
Reacting to Notification Interaction – Clicks 00:05:22
Reacting to Notification Interaction – Closing 00:02:37
From Notifications to Push Messages 00:06:36
Creating a Push Subscription 00:04:32
Storing Subscriptions 00:10:51
Connecting Server & Client (PWA) 00:01:45
Sending Push Messages from the Server 00:09:56
Listening to Push Messages 00:07:39
Displaying Push Notifications on a Real Device 00:02:04
Opening a Page upon User Interaction 00:05:45
Improving our Code 00:04:28
Wrap Up 00:01:16
Chapter 11 : Native Device Features
Module Introduction 00:00:56
Preparing the Project 00:07:29
Getting DOM Access 00:04:36
Creating our own Polyfills 00:08:04
Getting the Video Image 00:07:25
Hooking Up the Capture Button 00:06:25
Storing the Image on a Server 00:08:40
Accepting File Upload Example with Firebase 00:14:36
Testing the Camera & Upload 00:04:51
Implementing a Fallback 00:02:31
Getting the User Position 00:16:39
Fixing Bugs 00:08:46
Testing the App on a Real Device 00:01:44
Wrap Up 00:00:47
Chapter 12 : Service Worker Management with Workbox
Module Introduction 00:01:01
Understanding the Basics 00:00:56
Installing Workbox & Using It 00:06:57
Configuring Workbox Precaching 00:05:03
Customizing the Service Worker 00:04:45
Implementing Routing with the Workbox Router 00:06:41
Expanding Dynamic Caching 00:03:31
Options and Setting up Strategies 00:06:09
Custom Handlers (Example: For IndexedDB) 00:03:46
Providing an Offline HTML Fallback 00:06:47
Handling Background Synchronization and Push Notifications 00:03:26
Understanding the Workbox Documentation 00:05:18
Enhancing the Build Workflow 00:06:31
Running our App on a Real Server 00:03:56
Auditing our Webpage with Lighthouse 00:04:25
Wrap Up 00:01:11
Chapter 13 : SPAs and PWAs
Module Introduction 00:01:18
React with create-react-app 00:09:30
A General Note about SPAs and PWAs 00:01:29
Angular with the CLI 00:16:35
Vue with Vue CLI 00:06:49
Wrap Up 00:01:00
Chapter 14 : Course Roundup
Course Roundup 00:03:21