Progressive Web Apps PWA The Complete Guide

Progressive Web Apps PWA The Complete Guide

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

Requirements

Basic HTML, CSS and JavaScript knowledge is required
NO experience with JavaScript frameworks is required

Description

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.”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 isHow to use an app manifest to make your web app installable on device homescreensUsing service workers to offer offline support by caching assetsAdvanced service worker usage and caching strategiesA refresher on Promises and the Fetch API as both concepts are heavily used in PWAsHow to improve user engagement by adding push notificationsA way to synchronize data in the background, even if connection is lostHow to access native device features like the camera or geolocationUsing Workbox to make service worker management easierExplanations on how to turn your next SPA project into a PWAAnd moreAll 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 supportWhat 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 JavaScriptNo advanced knowledge of these technologies required thoughYou 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!)I’d be very happy to welcome you on board of this course and start this journey together with you!Max

Overview

Section 1: Getting Started

Lecture 1 About this Course

Lecture 2 What are Progressive Web Apps?

Lecture 3 Join our Online Learning Community

Lecture 4 PWAs vs Native Mobile Apps

Lecture 5 Node.js Download

Lecture 6 A Demo PWA & What We’ll Build in this Course

Lecture 7 Our First Progressive Web App

Lecture 8 PWA Core Building Blocks

Lecture 9 Comparing PWAs and SPAs

Lecture 10 What is “Progressive Enhancement”?

Lecture 11 Course Outline

Lecture 12 Course Project Setup

Lecture 13 How to get the Most out of this Course

Section 2: Understanding the App Manifest

Lecture 14 Module Introduction

Lecture 15 Using an App Manifest to Make your App Installable

Lecture 16 Adding the Manifest

Lecture 17 Understanding App Manifest Properties

Lecture 18 Adding Properties to the App Manifest

Lecture 19 PWAs and Browser Support

Lecture 20 Using the Chrome Developer Tools

Lecture 21 Simulating the Web App on an Emulator

Lecture 22 Preparing the Emulated Device for ALL PWA Features

Lecture 23 Installing the Web App – Prerequisites

Lecture 24 Adding Properties for Safari

Lecture 25 Adding Properties for the Internet Explorer

Lecture 26 Wrap Up

Lecture 27 Useful Resources & Links

Section 3: The Service Workers

Lecture 28 Module Introduction

Lecture 29 Why Service Workers Are Amazing!

Lecture 30 Understanding Service Worker Events

Lecture 31 The Service Worker Lifecycle

Lecture 32 Service Worker Browser Support

Lecture 33 Registering a Service Worker

Lecture 34 Reacting to Incoming Events (in SW)

Lecture 35 Updating & Activating Service Workers

Lecture 36 Non-Lifecycle Events

Lecture 37 The App Install Banner & Chrome 68+

Lecture 38 Getting that “App Install Banner”

Lecture 39 Connecting Chrome Developer Tools to a Real/ Emulated Device

Lecture 40 Testing the App on Real Device (and Installing the App!)

Lecture 41 Deferring the App Install Banner

Lecture 42 Wrap Up

Lecture 43 Service Worker FAQ

Lecture 44 Useful Resources & Links

Section 4: Promise and Fetch

Lecture 45 Module Introduction

Lecture 46 Async Code in JavaScript

Lecture 47 Promises – Basics

Lecture 48 Rejecting Promises

Lecture 49 Where we Use Promises in our Project

Lecture 50 Fetch – Basics

Lecture 51 Sending Post Requests via Fetch

Lecture 52 Fetch and CORS

Lecture 53 Comparing Fetch and Ajax

Lecture 54 Adding Polyfills (for Legacy Browser Support)

Lecture 55 Fetch & Service Workers

Lecture 56 [OPTIONAL] Assignment Solution

Lecture 57 Wrap Up

Lecture 58 Useful Resources & Links

Section 5: Service Workers – Caching

Lecture 59 Module Introduction

Lecture 60 Why Caching?

Lecture 61 Understanding the Cache API

Lecture 62 Browser Support

Lecture 63 Adjusting the Course Project

Lecture 64 Identifying (Pre-)Cacheable Items

Lecture 65 Static Caching/ Precaching

Lecture 66 Retrieving Items from the Cache

Lecture 67 Adding & Retrieving Multiple Files (to/ from Cache)

Lecture 68 Cache Multiple Files with addAll

Lecture 69 Dynamic Caching – The Basics

Lecture 70 Implementing Dynamic Caching

Lecture 71 Handling Errors

Lecture 72 Adding Cache Versioning

Lecture 73 Different Cache Versions & Cleanup

Lecture 74 Optimizing Cache Management

Lecture 75 [OPTIONAL] Assignment Solution

Lecture 76 Wrap Up

Lecture 77 Useful Resources & Links

Section 6: Service Workers – Advanced Caching

Lecture 78 Module Introduction

Lecture 79 Module Preparation: Adding a Button

Lecture 80 Offering “Cache on Demand”

Lecture 81 Providing an Offline Fallback Page

Lecture 82 Strategy: Cache with Network Fallback

Lecture 83 Strategy: Cache Only

Lecture 84 Strategy: Network Only

Lecture 85 Strategy: Network with Cache Fallback

Lecture 86 Strategy: Cache then Network

Lecture 87 Cache then Network & Dynamic Caching

Lecture 88 Cache then Network with Offline Support

Lecture 89 Cache Strategies & “Routing”

Lecture 90 Applying Cache Only

Lecture 91 [OPTIONAL] Assignment Solution

Lecture 92 A Better Way Of Parsing Static Cache URLs

Lecture 93 Making Route Matching More Precise

Lecture 94 A Better Way Of Serving Fallback Files

Lecture 95 Post Request and Cache API

Lecture 96 Cleaning/ Trimming the Cache

Lecture 97 Getting Rid of a Service Worker

Lecture 98 Preparing the Project for the Next Steps

Lecture 99 Wrap Up

Lecture 100 Useful Resources & Links

Section 7: IndexedDB and Dynamic Data

Lecture 101 Module Introduction

Lecture 102 Understanding the Basics

Lecture 103 Changed Firebase Console Layout

Lecture 104 Setting Up Firebase

Lecture 105 Connecting Frontend to Backend

Lecture 106 Dynamic Caching vs. Caching Dynamic Content

Lecture 107 Introducing IndexedDB

Lecture 108 IndexedDB Browser Support

Lecture 109 Adding the IDB File

Lecture 110 Storing Fetched Posts in IndexedDB

Lecture 111 Using IndexedDB in the Service Worker

Lecture 112 Reading Data from IDB

Lecture 113 Clearing IDB & Handling Server-Client Mismatch

Lecture 114 Implementing the Clear Database Method

Lecture 115 Deleting Single Items from the Database

Lecture 116 IndexedDB and Caching Strategies

Lecture 117 Wrap Up

Lecture 118 Useful Resources & Links

Section 8: Creating a Responsive User Interface (UI)

Lecture 119 Module Introduction

Lecture 120 Responsive Design in this Course

Lecture 121 Understanding Responsive Design in our Project

Lecture 122 CSS and Media Queries

Lecture 123 Want to see more of your Images?

Lecture 124 Using Images in a Responsive Way

Lecture 125 Adding Animations

Lecture 126 The Viewport & Scaling

Lecture 127 Wrap Up

Lecture 128 Useful Resources & Links

Section 9: Background Sync

Lecture 129 Module Introduction

Lecture 130 How does Background Sync Work?

Lecture 131 Adding the Basic Setup to our Project

Lecture 132 Registering a Synchronization Task

Lecture 133 Storing our Post in IndexedDB

Lecture 134 Adding a Fallback

Lecture 135 Syncing Data in the Service Worker

Lecture 136 Understanding Periodic Sync

Lecture 137 MUST READ: Firebase Cloud Functions & Billing

Lecture 138 Adding Server Side Code

Lecture 139 Fixing Errors

Lecture 140 Wrap Up

Lecture 141 Useful Resources & Links

Section 10: Web Push Notifications

Lecture 142 Module Introduction

Lecture 143 Why we need Web Push Notifications

Lecture 144 How Push & Notifications Work

Lecture 145 Displaying Notifications – Some Theory First

Lecture 146 Browser Support

Lecture 147 Requesting Permissions

Lecture 148 Displaying Notifications

Lecture 149 Notifications from Within the Service Worker

Lecture 150 Understanding Notifications’ Options

Lecture 151 Advanced Options

Lecture 152 Adding Actions to Notifications

Lecture 153 Reacting to Notification Interaction – Clicks

Lecture 154 Reacting to Notification Interaction – Closing

Lecture 155 From Notifications to Push Messages

Lecture 156 Creating a Push Subscription

Lecture 157 Storing Subscriptions

Lecture 158 Connecting Server & Client (PWA)

Lecture 159 Sending Push Messages from the Server

Lecture 160 Listening to Push Messages

Lecture 161 Displaying Push Notifications on a Real Device

Lecture 162 Opening a Page upon User Interaction

Lecture 163 Improving our Code

Lecture 164 Wrap Up

Lecture 165 Useful Resources & Links

Section 11: Native Device Features

Lecture 166 Module Introduction

Lecture 167 Preparing the Project

Lecture 168 Getting DOM Access

Lecture 169 Creating our own Polyfills

Lecture 170 Getting the Video Image

Lecture 171 Hooking Up the Capture Button

Lecture 172 Storing the Image on a Server

Lecture 173 Accepting File Upload Example with Firebase

Lecture 174 MUST READ: Required Changes to Cloud Function Code

Lecture 175 Testing the Camera & Upload

Lecture 176 Implementing a Fallback

Lecture 177 Getting the User Position

Lecture 178 Fixing Bugs

Lecture 179 Testing the App on a Real Device

Lecture 180 Wrap Up

Lecture 181 Useful Resources & Links

Section 12: Service Worker Management with Workbox

Lecture 182 Module Introduction

Lecture 183 Understanding the Basics

Lecture 184 The Workbox Version Used In This Course

Lecture 185 Installing Workbox & Using It

Lecture 186 Configuring Workbox Precaching

Lecture 187 Customizing the Service Worker

Lecture 188 Implementing Routing with the Workbox Router

Lecture 189 Expanding Dynamic Caching

Lecture 190 Options and Setting Up Strategies

Lecture 191 Custom Handlers (Example: For IndexedDB)

Lecture 192 Providing an Offline HTML Fallback

Lecture 193 Handling Background Synchronisation and Push Notifications

Lecture 194 Understanding the Workbox Documentation

Lecture 195 Enhancing the Build Workflow

Lecture 196 Running our App on a Real Server

Lecture 197 Auditing our Webpage with Lighthouse

Lecture 198 Wrap Up

Lecture 199 Useful Resources & Links

Section 13: SPAs and PWAs

Lecture 200 Module Introduction

Lecture 201 React with create-react-app

Lecture 202 A General Note about SPAs and PWAs

Lecture 203 Angular with the CLI

Lecture 204 Vue with Vue CLI

Lecture 205 Wrap Up

Lecture 206 Useful Resources & Links

Section 14: Course Roundup

Lecture 207 Course Roundup

Lecture 208 Bonus: More Content!

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

Course Information:

Udemy | English | 15h 51m | 7.45 GB
Created by: Academind by Maximilian Schwarzmüller

You Can See More Courses in the Developer >> Greetings from CourseDown.com