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! |