Working with Web Push Notifications
Published by O'Reilly Media, Inc.
Engage and retain your site and app users
More than 65% of users are able to receive push notifications from websites or progressive web apps (PWAs), but only a few solutions currently take advantage of this feature. With push notifications, you can increase reengagement by server-sending individual or broadcast messages to your users when they’re not using your web app or even the browser—all without publishing in the app stores.
Join expert Maximiliano Firtman for a hands-on, in-depth exploration of web push notifications. In two three-hour sessions on two consecutive days, you’ll discover what web push notifications are and why you should use them, and you’ll learn how to implement them in your own websites and PWAs.
What you’ll learn and how you can apply it
By the end of this live, online course, you’ll understand:
- How to create a push notification architecture for your website or PWA
- How to subscribe your users to broadcast messages, specific channels, or individual direct messages
And you’ll be able to:
- Send messages from your backend using Node.js
- Send messages from the cloud using Google Firebase
This live event is for you because...
- You’re a web developer with at least one year of JavaScript experience who needs to send messages to your users after after they have finished browsing on your site.
- You’re a PWA builder with basic experience with service workers who wants to reengage your users.
- You’re a backend web developer with a basic understanding of Node.js who wants to architect web push notifications for your company or app.
Prerequisites
- A working knowledge of JavaScript
Recommended preparation:
Web Push Notifications: Introduction (video)
Head First JavaScript Programming (video)
Materials and downloads needed:
- A computer, laptop, or other connected machine with an up-to-date copy of Google Chrome (preferred), Firefox Dev Edition, or Opera, Node.js, and the code editor of your choice installed
- A Google account (required to use Firebase)
Schedule
The time frames are only estimates and may vary according to how the class is progressing.
Day 1
Hello, web notifications (50 minutes)
- Lecture: Overview of web notifications and the Web Notifications API, the architecture of the solution, where and how to use notifications, and present and future compatibility
- Hands-on exercise: How to implement web notifications in your website or PWA
Break(10 minutes)
Ask your users for permission (50 minutes)
- Lecture: How to add push notifications to a web project—Requirements, using a basic service worker, detecting compatibility, getting an FCM ID, and asking the user for permission
- Hands-on exercise: Code your first web push notification project, debug it, and run it on Developer Tools
Break (10 minutes)
Display the notification (50 minutes)
- Lecture: How to listen for notifications received by the browser and render them on the user's screen, including basic customization and message click detection
- Hands-on exercise: Use debugging tools to see your notifications in action, emulating messages sent by the server on your device
Wrap-up and Q&A (10 minutes)
Day 2
Send messages using a custom server-side app (50 minutes)
- Lecture: How to use Node.js and npm packages (using Express) to save users' tokens locally and send them messages connecting to browsers' servers following the Web Push spec
- Hands-on exercise: Complete the working example, sending messages to users through the console in a Node.js script
Break (10 minutes)
Send messages using Google Firebase(50 minutes)
- Lecture: How to use Google Firebase’s free services to store your users' tokens, understand token refreshes, and send broadcast messages, messages by channel, or individual messages from the console
- Hands-on exercise: Subscribe users and store them in Firebase; send messages through Firebase’s messaging console
Break (10 minutes)
Notifications beyond the basics (50 minutes)
- Lecture: Advanced techniques—How to add images to your notifications, add custom actions on Android, deal with bundling, and detect if the web app is active; the options in Safari and iOS; and what's in store for the future
- Hands-on exercise: Improve the UX of your notifications and test several advanced solutions on your own device
Wrap-up and Q&A (10 minutes)
Your Instructor
Maximiliano Firtman
Max Firtman is a mobile and web developer, trainer, speaker, and writer. Max teaches mobile HTML5 and performance trainings for top companies around the world. The founder of IT training company ITMaster, Max is a well-known professional in the mobile web community. He blogs about mobile web platforms on Mobilexweb.com, keeps compatibility tables updated at Mobilehtml5.org, and has written many books, including Programming the Mobile Web (available in a second edition) and the recent High Performance Mobile Web, published by O’Reilly Media. He is a frequent speaker at conferences, including QCon, Mobilism, OSCON, Velocity, Fluent, Google Developer Day, JSConf, GOTO, AdobeCamp, and many other events around the world. Max has been widely recognized for his work in the mobile web community. He is an Adobe Community Professional, Microsoft IE User Agent, Nokia Developer Champion, and BlackBerry Elite, among other distinctions.