Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Vanilla JavaScript: Progressive Web Applications

via LinkedIn Learning

Overview

Create app-like experiences for the mobile web. Learn how to create progressive web apps with nothing more than Vanilla JavaScript.

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.

Syllabus

Introduction
  • Leverage your web skills for mobile development
  • What you should know
  • Using the exercise files
1. What Is a Progressive Web App?
  • A little history
  • Introduction to Progressive Web Apps
  • Choosing an editor
2. Getting Started
  • Creating a web app in NetBeans
  • Demo of the web app
  • Creating the app icon
  • Using the Android Emulator
3. The Web App Manifest
  • What is the web app manifest?
  • Set a Start URL and basic styling
  • Test the PWA in the Android Emulator
  • Test the PWA in the iOS Simulator
4. Getting Ready for Service Workers
  • Moving away from emulators
  • Intro to service workers
  • Service worker lifecycle
  • Getting started with ES6 promises
  • PWAs and Chrome DevTools
5. Service Workers
  • Registering a service worker
  • The install event and caches
  • Activating the service worker
  • Intercepting requests using Fetch
  • Install banner behavior
  • Designing the install banner
  • Implementing the install banner
  • Debugging with Chrome DevTools
  • More Chrome DevTools
  • Debugging with Safari and the iOS Simulator
6. Cleaning Up iOS Limitations
  • What's missing in the iOS implementaton
  • Web app install banner: HTML and CSS
  • Web app install banner: Update the cache
  • Web app install banner: The window.onload event
  • Demonstrating the web app install banner
  • Launch images and splash screens
  • Demonstrating launch images
7. Notifications and Push APIs
  • Introduction to notifications
  • Requesting permission to show notifications
  • Displaying a notification
  • Adding data to a notification
  • Closing a notification
  • Handling the notification click event
  • Push messaging overview
  • Adding Firebase Cloud Messaging to the project
  • Subscribing to push messaging
  • Handling push notifications
  • Sending a tickle using cURL
  • Sending data in a push message
  • Installing Mozilla's Web Push library
  • Modifying the push event handler
  • Modifying the notification click event
  • Creating the web push script
  • Testing the hosted app
8. Resources
  • What's left?
  • Browser and device support
  • PWA tools and resources
Conclusion
  • Next steps

Taught by

Tom Duffy

Related Courses

Reviews

Start your review of Vanilla JavaScript: Progressive Web Applications

Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free