JavaScript: Modern Browser APIs

Course details

Over the past few years, new APIs and features have been proliferating through modern web browsers. These APIs can help you build amazing web apps that perform better, work offline, delight the user, and provide better user experiences overall. In this course, learn how to use standard JavaScript and a selection of modern browser APIs to improve data retrieval and storage, get better app performance, and build web pages that seamlessly integrate into your user's everyday life. Instructor Joe Marini details how to leverage modern storage capabilities in browsers, take advantage of native device user experiences, get better performance from animations and page loading, and much more.

Learning objectives
Integrating with native notifications
Caching data with the Cache API
Faster page loading with prefetch and preload
Improving animation with requestAnimationFrame
Making storage persistent on devices
Detecting network conditions and quality
Displaying page content in full-screen mode

Concepts

Introduction

Building apps with modern JavaScript
What you should know
Set up the development environment

Improving Performance

Smoother animation with requestAnimationFrame()
Faster navigation with prefetch
Prioritized loading with preload
Server communication with Beacon API
Element visibility with Intersection Observer

Better Data Management

Overview of data handling
Easier Ajax with the Fetch API
Simplified IndexedDB with localForage
localForage and multiple instances
Caching data with the Cache API
Making storage persistent
Getting device memory information

Advanced User Experiences

Native overlays with the Dialog API
Integrating with native notifications
Detecting network conditions
Using page visibility
Going full screen with content
Using full-screen events and styling
Dynamic images with CSS Paint API
Parameters with CSS Paint API

Conclusion

Next steps