Progressive Web Apps (PWA) - The Complete Guide
Progressive Web Apps (PWAs) 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.
More
"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!
So this course has a lot to offer, how do you tell if it's for you though?
It definitely is the right choice if ...
... you already are a web developer (no matter if experienced or still new to the business) and want to prepare for the future
... you enjoy working with HTML, CSS and JavaScript and want to leverage the full power the web and browser technologies have to offer
... you want to deliver the best possible experiences to your users, using technologies like web push notifications or offline support
What do you need to know to get the most out of the course?
You need to know at least the basics of HTML, CSS and JavaScript
No advanced knowledge of these technologies required though
You DON'T need to know any JavaScript framework like Angular or React - PWAs work with ANY JavaScript app, even if you don't use a framework at all (actually, that's what we'll build in the course!)
- Basic HTML, CSS and JavaScript knowledge is required
- NO experience with JavaScript frameworks is required
- Students who want to build web apps that look and behave like native mobile apps
- Students who want to build offline-ready web apps (yes, that works!)
- Anyone who wants to build web apps that offer access to the device camera, geolocation, push notifications and provide offline support
- Students who want to leverage latest browser features whilst still supporting older browsers
What you'll learn:
- Build web apps that look and feel like native mobile apps for iOS and Android
- Use service workers to build web apps that work without internet connection (offline-first)
- Leverage device features like the camera and geolocation in your web apps
- Use web push notifications to increase user engagement with your web apps
Watch Online Progressive Web Apps (PWA) - The Complete Guide
| # | Title | Duration |
|---|---|---|
| 1 | About this Course | 02:07 |
| 2 | What are Progressive Web Apps? | 03:25 |
| 3 | PWAs vs Native Mobile Apps | 06:08 |
| 4 | A Demo PWA & What We'll Build in this Course | 06:25 |
| 5 | Our First Progressive Web App | 06:28 |
| 6 | PWA Core Building Blocks | 03:20 |
| 7 | Comparing PWAs and SPAs | 03:18 |
| 8 | What is "Progressive Enhancement"? | 03:24 |
| 9 | Course Outline | 04:25 |
| 10 | Course Project Setup | 06:11 |
| 11 | How to get the Most out of this Course | 02:12 |
| 12 | Module Introduction | 01:02 |
| 13 | Using an App Manifest to Make your App Installable | 01:37 |
| 14 | Adding the Manifest | 03:41 |
| 15 | Understanding App Manifest Properties | 09:44 |
| 16 | Adding Properties to the App Manifest | 09:45 |
| 17 | PWAs and Browser Support | 02:17 |
| 18 | Using the Chrome Developer Tools | 01:36 |
| 19 | Simulating the Web App on an Emulator | 04:37 |
| 20 | Installing the Web App - Prerequisites | 02:31 |
| 21 | Adding Properties for Safari | 05:51 |
| 22 | Adding Properties for the Internet Explorer | 02:31 |
| 23 | Wrap Up | 00:29 |
| 24 | Module Introduction | 00:41 |
| 25 | Why Service Workers Are Amazing! | 04:41 |
| 26 | Understanding Service Worker Events | 06:19 |
| 27 | The Service Worker Lifecycle | 05:20 |
| 28 | Service Worker Browser Support | 01:25 |
| 29 | Registering a Service Worker | 09:27 |
| 30 | Reacting to Incoming Events (in SW) | 05:40 |
| 31 | Updating & Activating Service Workers | 03:01 |
| 32 | Non-Lifecycle Events | 04:50 |
| 33 | Getting that "App Install Banner" | 02:41 |
| 34 | Testing the App on Real Device (and Installing the App!) | 03:43 |
| 35 | Deferring the App Install Banner | 06:44 |
| 36 | Wrap Up | 01:21 |
| 37 | Module Introduction | 00:50 |
| 38 | Async Code in JavaScript | 03:55 |
| 39 | Promises - Basics | 04:41 |
| 40 | Rejecting Promises | 04:06 |
| 41 | Where we Use Promises in our Project | 02:26 |
| 42 | Fetch - Basics | 06:12 |
| 43 | Sending Post Requests via Fetch | 04:23 |
| 44 | Fetch and CORS | 03:13 |
| 45 | Comparing Fetch and Ajax | 03:05 |
| 46 | Adding Polyfills (for Legacy Browser Support) | 03:30 |
| 47 | Fetch & Service Workers | 02:06 |
| 48 | [OPTIONAL] Assignment Solution | 08:04 |
| 49 | Wrap Up | 00:57 |
| 50 | Module Introduction | 00:44 |
| 51 | Why Caching? | 03:07 |
| 52 | Understanding the Cache API | 04:01 |
| 53 | Browser Support | 01:50 |
| 54 | Adjusting the Course Project | 02:54 |
| 55 | Identifying (Pre-)Cacheable Items | 03:08 |
| 56 | Static Caching/ Precaching | 11:05 |
| 57 | Retrieving Items from the Cache | 04:56 |
| 58 | Adding & Retrieving Multiple Files (to/ from Cache) | 03:06 |
| 59 | Cache Multiple Files with addAll | 09:11 |
| 60 | Dynamic Caching - The Basics | 01:55 |
| 61 | Implementing Dynamic Caching | 07:20 |
| 62 | Handling Errors | 02:14 |
| 63 | Adding Cache Versioning | 06:57 |
| 64 | Different Cache Versions & Cleanup | 06:38 |
| 65 | Optimizing Cache Management | 02:43 |
| 66 | [OPTIONAL] Assignment Solution | 21:52 |
| 67 | Wrap Up | 00:36 |
| 68 | Module Introduction | 01:13 |
| 69 | Module Preparation: Adding a Button | 04:05 |
| 70 | Offering "Cache on Demand" | 06:52 |
| 71 | Providing an Offline Fallback Page | 06:22 |
| 72 | Strategy: Cache with Network Fallback | 01:44 |
| 73 | Strategy: Cache Only | 03:07 |
| 74 | Strategy: Network Only | 01:58 |
| 75 | Strategy: Network with Cache Fallback | 06:22 |
| 76 | Strategy: Cache then Network | 09:05 |
| 77 | Cache then Network & Dynamic Caching | 05:12 |
| 78 | Cache then Network with Offline Support | 06:00 |
| 79 | Cache Strategies & "Routing" | 03:10 |
| 80 | Applying Cache Only | 05:46 |
| 81 | [OPTIONAL] Assignment Solution | 25:53 |
| 82 | A Better Way Of Parsing Static Cache URLs | 02:41 |
| 83 | A Better Way Of Serving Fallback Files | 02:58 |
| 84 | Post Request and Cache API | 03:19 |
| 85 | Cleaning/ Trimming the Cache | 06:07 |
| 86 | Getting Rid of a Service Worker | 03:50 |
| 87 | Preparing the Project for the Next Steps | 00:29 |
| 88 | Wrap Up | 00:58 |
| 89 | Module Introduction | 01:02 |
| 90 | Understanding the Basics | 01:13 |
| 91 | Setting Up Firebase | 07:20 |
| 92 | Connecting Frontend to Backend | 08:32 |
| 93 | Dynamic Caching vs. Caching Dynamic Content | 04:52 |
| 94 | Introducing IndexedDB | 03:35 |
| 95 | IndexedDB Browser Support | 00:39 |
| 96 | Adding the IDB File | 02:32 |
| 97 | Storing Fetched Posts in IndexedDB | 13:12 |
| 98 | Using IndexedDB in the Service Worker | 03:57 |
| 99 | Reading Data from IDB | 06:41 |
| 100 | Clearing IDB & Handling Server-Client Mismatch | 03:41 |
| 101 | Implementing the Clear Database Method | 03:59 |
| 102 | Deleting Single Items from the Database | 04:06 |
| 103 | IndexedDB and Caching Strategies | 01:34 |
| 104 | Wrap Up | 00:46 |
| 105 | Module Introduction | 01:19 |
| 106 | Responsive Design in this Course | 02:52 |
| 107 | Understanding Responsive Design in our Project | 03:31 |
| 108 | CSS and Media Queries | 09:47 |
| 109 | Using Images in a Responsive Way | 08:53 |
| 110 | Adding Animations | 08:30 |
| 111 | The Viewport & Scaling | 01:47 |
| 112 | Wrap Up | 00:47 |
| 113 | Module Introduction | 01:05 |
| 114 | How does Background Sync Work? | 03:34 |
| 115 | Adding the Basic Setup to our Project | 04:05 |
| 116 | Registering a Synchronization Task | 04:38 |
| 117 | Storing our Post in IndexedDB | 06:01 |
| 118 | Adding a Fallback | 04:13 |
| 119 | Syncing Data in the Service Worker | 15:53 |
| 120 | Understanding Periodic Sync | 02:17 |
| 121 | Adding Server Side Code | 15:12 |
| 122 | Fixing Errors | 05:21 |
| 123 | Wrap Up | 00:50 |
| 124 | Module Introduction | 01:05 |
| 125 | Why we need Web Push Notifications | 01:57 |
| 126 | How Push & Notifications Work | 09:05 |
| 127 | Displaying Notifications - Some Theory First | 01:53 |
| 128 | Browser Support | 02:03 |
| 129 | Requesting Permissions | 08:08 |
| 130 | Displaying Notifications | 03:39 |
| 131 | Notifications from Within the Service Worker | 03:34 |
| 132 | Understanding Notifications' Options | 08:50 |
| 133 | Advanced Options | 02:59 |
| 134 | Adding Actions to Notifications | 02:24 |
| 135 | Reacting to Notification Interaction - Clicks | 05:22 |
| 136 | Reacting to Notification Interaction - Closing | 02:37 |
| 137 | From Notifications to Push Messages | 06:37 |
| 138 | Creating a Push Subscription | 04:33 |
| 139 | Storing Subscriptions | 10:51 |
| 140 | Connecting Server & Client (PWA) | 01:46 |
| 141 | Sending Push Messages from the Server | 09:56 |
| 142 | Listening to Push Messages | 07:40 |
| 143 | Displaying Push Notifications on a Real Device | 02:04 |
| 144 | Opening a Page upon User Interaction | 05:46 |
| 145 | Improving our Code | 04:29 |
| 146 | Wrap Up | 01:17 |
| 147 | Module Introduction | 00:56 |
| 148 | Preparing the Project | 07:29 |
| 149 | Getting DOM Access | 04:36 |
| 150 | Creating our own Polyfills | 08:05 |
| 151 | Getting the Video Image | 07:26 |
| 152 | Hooking Up the Capture Button | 06:25 |
| 153 | Storing the Image on a Server | 08:41 |
| 154 | Accepting File Upload Example with Firebase | 14:37 |
| 155 | Testing the Camera & Upload | 04:52 |
| 156 | Implementing a Fallback | 02:31 |
| 157 | Getting the User Position | 16:39 |
| 158 | Fixing Bugs | 08:47 |
| 159 | Testing the App on a Real Device | 01:44 |
| 160 | Wrap Up | 00:48 |
| 161 | Module Introduction | 01:02 |
| 162 | Understanding the Basics | 00:56 |
| 163 | Installing Workbox & Using It | 06:57 |
| 164 | Configuring Workbox Precaching | 05:03 |
| 165 | Customizing the Service Worker | 04:46 |
| 166 | Implementing Routing with the Workbox Router | 06:42 |
| 167 | Expanding Dynamic Caching | 03:32 |
| 168 | Options and Setting Up Strategies | 06:10 |
| 169 | Custom Handlers (Example: For IndexedDB) | 03:46 |
| 170 | Providing an Offline HTML Fallback | 06:48 |
| 171 | Handling Background Synchronisation and Push Notifications | 03:27 |
| 172 | Understanding the Workbox Documentation | 05:18 |
| 173 | Enhancing the Build Workflow | 06:31 |
| 174 | Running our App on a Real Server | 03:57 |
| 175 | Auditing our Webpage with Lighthouse | 04:25 |
| 176 | Wrap Up | 01:12 |
| 177 | Module Introduction | 01:19 |
| 178 | React with create-react-app | 09:30 |
| 179 | A General Note about SPAs and PWAs | 01:29 |
| 180 | Angular with the CLI | 14:40 |
| 181 | Vue with Vue CLI | 06:50 |
| 182 | Wrap Up | 01:01 |
| 183 | Course Roundup | 03:22 |
Similar courses to Progressive Web Apps (PWA) - The Complete Guide
