Modern Web Development and Progressive Web Applications
Contact us to book this course
Web and Mobile Applications
On-Site, Virtual
3 days
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
- The Core of Web Development: HTML, CSS, and JavaScript
- What Is HTML5?
- Organizing Content with Sematic Tags
- The Role of CSS
- New Features in CSS3
- Responsive Design
- Using the Bootstrap Library
- Promises
- Scoped Variables
- ES6 Classes and Modules
- The Arrow Function
- Using Build Tools and Package Managers
- Custom Elements
- Shadow DOM
- HTML Templates
- The Lit Framework
- Web Sockets
- Drag and Drop
- Web Workers
- Fetch
- Service Workers
- LocalStorage
- IndexedDB
- Principles of SPA Development
- React
- Angular
- Advantages of PWAs
- PWAs vs. Native Apps
- Core PWA Technologies
- Service Workers
- Fetch
- Promises
- Caching
- What Is a Service Worker?
- The Service Worker Lifecycle
- Service worker Events
- Intercepting the Fetch Event
- Background Sync
- Push Notifications
- Making Requests
- Reading Responses
- Promise Chaining
- Caching the Application Shell
- Cache First
- Network First
- Creating Fallback Content
- Cleaning the Cache
- The IndexedDB API
- Using Promises with IndexedDB
- Creating Databases, Types, and Indexes
- CRUD Operations and Transactions
- Display a Notification
- Notification Options and Icons
- Listening for Events
- Subscribing to Push Notifications
- Combining PWAs and SWAs
- Testing with Lighthouse
- Leveraging Workbox
