English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 3h 45m | 619 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.
Topics include:
- What is a progressive web app?
- Adding a web app manifest to an existing app
- Creating icons for progressive web apps
- Registering service workers
- Cleaning up iOS limitations
- Displaying and interacting with notifications
- Subscribing to and managing push notifications
Table of Contents
Introduction
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
Resources
54 What s left
55 Browser and device support
56 PWA tools and resources
Conclusion
57 Next steps
Resolve the captcha to access the links!