Course 492:
Modern Web Development and Progressive Web Applications

(3 days)

 

Course Description

This course provides a hands-on guide to building Progressive Web Applications (PWAs) using modern standards and technologies. It will provide an overview of newer features in HTML, CSS, and JavaScript, and introduce responsive design techniques and CSS frameworks such as bootstrap. It will cover the key JavaScript APIs available in contemporary browsers, especially those used in building PWAs, and will look at EMCAScript features both natively in browsers and as used in transpiled Single Page Applications (SPAs). The course covers all the core features of PWA development, from Service Workers to the Cache, Fetch, IndexedDB, and Notification APIs. Attendees will gain hands-on experience with building PWAs and an understanding of PWA integration into both traditional and SPA websites.

Learning Objectives

At the end of this course, the participants will know how to:

  • Utilize HTML5 features such as semantic tags
  • Leverage CSS3 and Bootstrap for Responsive Design and a professional look and feel
  • Create reusable web components
  • Use HTML5 APIs such as Web Sockets, Drag and Drop, and Service Workers
  • Register, install, and activate Service Workers
  • Cache static and dynamic data
  • Utilize promises, async, and await in the fetch API and elsewhere
  • Save data in IndexedDB
  • Take advantage of Push Notifications

Who Should Attend

This course is designed for web developers who are looking to explore the newer web technologies and build Progressive Web Applications.

Prerequisites

Attendees must be comfortable working with JavaScript to take this class.

Course Outline

 

Chapter 1: Why HTML5?

  • The Core of Web Development: HTML, CSS, and JavaScript
  • What Is HTML5?
  • Organizing Content with Sematic Tags

Chapter 2: CSS3 and Responsive Design

  • The Role of CSS
  • New Features in CSS3
  • Responsive Design
  • Using the Bootstrap Library

Chapter 3: Modern JavaScript

  • Promises
  • Scoped Variables
  • ES6 Classes and Modules
  • The Arrow Function
  • Using Build Tools and Package Managers

Chapter 4: Web Components

  • Custom Elements
  • Shadow DOM
  • HTML Templates
  • The Lit Framework

Chapter 5: JavaScript APIs

  • Web Sockets
  • Drag and Drop
  • Web Workers
  • Fetch
  • Service Workers
  • LocalStorage
  • IndexedDB

Chapter 6: Overview of SPA Development

  • Principles of SPA Development
  • React
  • Angular

Chapter 7: Principles of PWA Development

  • Advantages of PWAs
  • PWAs vs. Native Apps
  • Core PWA Technologies
    • Service Workers
    • Fetch
    • Promises
    • Caching

Chapter 8: The Service Worker

  • What Is a Service Worker?
  • The Service Worker Lifecycle
  • Service worker Events
  • Intercepting the Fetch Event
  • Background Sync
  • Push Notifications

Chapter 9: The Fetch API

  • Making Requests
  • Reading Responses
  • Promise Chaining

Chapter 10: The Cache API

  • Caching the Application Shell
  • Cache First
  • Network First
  • Creating Fallback Content
  • Cleaning the Cache

Chapter 11: IndexedDb

  • The IndexedDB API
  • Using Promises with IndexedDB
  • Creating Databases, Types, and Indexes
  • CRUD Operations and Transactions

Chapter 12: Introducing Push Notifications

  • Display a Notification
  • Notification Options and Icons
  • Listening for Events
  • Subscribing to Push Notifications

Chapter 13: Complementary Tools and Frameworks

  • Combining PWAs and SWAs
  • Testing with Lighthouse
  • Leveraging Workbox

Please Contact Your ROI Representative to Discuss Course Tailoring!