JavaScript: Progressive Web Applications

JavaScript: Progressive Web Applications

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 3h 45m | 532 MB

Users now expect app-like experiences from mobile sites. But how do developers make their web-based projects behave like native apps? Progressive web apps (PWAs) are the answer. They fit any form factor, can function offline, and feel like native apps—without the difficulty or expense of native app development. This course shows how to turn an existing website into a progressive web app using nothing more than Vanilla JavaScript. Instructor Tom Duffy explains how to build in offline capabilities, automated installation prompts, and notifications—features that will delight and engage your users. Plus, learn how to implement push notifications and provide features that even advanced platforms like iOS are missing.

Table of Contents

1 Leverage your web skills for mobile development
2 What you should know
3 Using the exercise files

What Is a Progressive Web App
4 A little history
5 Introduction to Progressive Web Apps
6 Choosing an editor

Getting Started
7 Creating a web app in NetBeans
8 Demo of the web app
9 Creating the app icon
10 Using the Android Emulator

The Web App Manifest
11 What is the web app manifest
12 Set a Start URL and basic styling
13 Test the PWA in the Android Emulator
14 Test the PWA in the iOS Simulator

Getting Ready for Service Workers
15 Moving away from emulators
16 Intro to service workers
17 Service worker lifecycle
18 Getting started with ES6 promises
19 PWAs and Chrome DevTools

Service Workers
20 Registering a service worker
21 The install event and caches
22 Activating the service worker
23 Intercepting requests using Fetch
24 Install banner behavior
25 Designing the install banner
26 Implementing the install banner
27 Debugging with Chrome DevTools
28 More Chrome DevTools
29 Debugging with Safari and the iOS Simulator

Cleaning Up iOS Limitations
30 What’s missing in the iOS implementaton
31 Web app install banner HTML and CSS
32 Web app install banner Update the cache
33 Web app install banner The window.onload event
34 Demonstrating the web app install banner
35 Launch images and splash screens
36 Demonstrating launch images

Notifications and Push APIs
37 Introduction to notifications
38 Requesting permission to show notifications
39 Displaying a notification
40 Adding data to a notification
41 Closing a notification
42 Handling the notification click event
43 Push messaging overview
44 Adding Firebase Cloud Messaging to the project
45 Subscribing to push messaging
46 Handling push notifications
47 Sending a tickle using cURL
48 Sending data in a push message
49 Installing Mozilla’s Web Push library
50 Modifying the push event handler
51 Modifying the notification click event
52 Creating the web push script
53 Testing the hosted app

54 What’s left
55 Browser and device support
56 PWA tools and resources

57 Next steps