Certificate in Progressive Web Apps (PWA)

Duration: 3 Months

Level: Beginner to Intermediate

Structure: 5 Units | Theory + Practical

Training Method: Theory + Demonstration + Hands-on Coding + PWA Projects

UNIT 1: PWA Fundamentals & Modern Web Development

Theory

1. Introduction to Progressive Web Apps
2. What is a PWA?
3. PWA vs. traditional websites
4. PWA vs. native mobile applications
5. Advantages and limitations of PWAs
6. PWA architecture
7. Progressive enhancement
8. Responsive web design fundamentals
9. Mobile-first development
10. HTTPS and secure web applications
11. Browser support and compatibility
12. Introduction to modern web APIs
13. PWA development workflow
14. PWA project structure

Practical

1. Set up a PWA development environment
2. Create a basic HTML website
3. Add CSS for responsive design
4. Add JavaScript functionality
5. Create a mobile-friendly layout
6. Test the website on different screen sizes
7. Configure HTTPS/local secure development where applicable
8. Inspect the application using browser Developer Tools
9. Test browser compatibility
10. Convert a basic responsive website into a PWA-ready project

UNIT 2: Web App Manifest & Installable PWAs

Theory

1. Introduction to Web App Manifest
2. Manifest file structure
3. Application name and short name
4. Start URL
5. Display modes
6. Theme and background colours
7. Application icons
8. Maskable icons
9. Application scope
10. Installability requirements
11. Browser installation experience
12. App shortcuts
13. Splash screen concepts
14. PWA metadata and branding

Practical

1. Create a Web App Manifest
2. Add application name and description
3. Configure start URL
4. Configure display mode
5. Add theme and background settings
6. Create and add PWA icons
7. Configure application scope
8. Add app shortcuts
9. Test installation criteria
10. Install the PWA on a supported device/browser
11. Test standalone mode
12. Customize the PWA branding

UNIT 3: Service Workers, Caching & Offline Functionality

Theory

1. Introduction to Service Workers
2. Service Worker lifecycle
3. Registration and installation
4. Activation process
5. Fetch events
6. Cache Storage API
7. Static asset caching
8. Dynamic resource caching
9. Cache-first strategy
10. Network-first strategy
11. Stale-while-revalidate strategy
12. Offline-first concepts
13. Cache versioning and updates
14. Handling offline and online states
15. Service Worker security considerations

Practical

1. Create a Service Worker
2. Register the Service Worker
3. Cache static website assets
4. Implement a cache-first strategy
5. Implement a network-first strategy
6. Create an offline fallback page
7. Test the application without internet access
8. Cache images and CSS files
9. Update cache versions
10. Remove outdated caches
11. Test Service Worker lifecycle
12. Debug Service Worker issues using Developer Tools

UNIT 4: Advanced PWA Features, APIs & Performance

Theory

1. PWA capabilities and modern web APIs
2. Push notification fundamentals
3. Notification API
4. Push API concepts
5. Background processing concepts
6. Background Sync concepts
7. Web Share API
8. Geolocation API
9. Storage options
10. IndexedDB fundamentals
11. Offline data management
12. Network detection
13. PWA performance optimization
14. Lazy loading
15. Image and asset optimization
16. Core Web Vitals
17. Accessibility and PWA usability

Practical

1. Create browser notifications
2. Implement a basic notification workflow
3. Explore push notification concepts
4. Create a web-share feature where supported
5. Use browser storage
6. Store sample data using IndexedDB
7. Build offline data functionality
8. Detect online/offline status
9. Optimize images
10. Implement lazy loading
11. Measure Core Web Vitals
12. Improve PWA loading performance
13. Test accessibility and mobile usability

UNIT 5: PWA Testing, Deployment & Final Project

Theory

1. PWA development workflow
2. Application testing
3. Functional testing
4. Responsive testing
5. Offline testing
6. Installation testing
7. Service Worker debugging
8. Performance auditing
9. Lighthouse and PWA auditing
10. Security and HTTPS
11. Browser compatibility testing
12. PWA deployment concepts
13. Hosting a PWA
14. Domain configuration
15. Application updates and versioning
16. Monitoring and maintenance
17. PWA portfolio development
18. Professional PWA project presentation

Practical

Project 1 – Installable PWA

1. Select a website/app concept
2. Create responsive pages
3. Add Web App Manifest
4. Create application icons
5. Configure installation settings
6. Create Service Worker
7. Cache essential resources
8. Create offline fallback
9. Test installation
10. Test offline functionality

Project 2 – Offline-First PWA

1. Plan application requirements
2. Design mobile interface
3. Create application pages
4. Implement Service Worker
5. Create caching strategy
6. Store data locally
7. Implement offline functionality
8. Handle online/offline states
9. Test data synchronization concepts
10. Optimize application performance

FINAL PROJECT – Complete Progressive Web Application

Step 1: Planning

1. Select a real-world PWA idea
2. Define target users
3. Identify application requirements
4. Create sitemap/app structure
5. Prepare UI wireframes

Step 2: UI Development

1. Build responsive interface
2. Create navigation
3. Design mobile-first layouts
4. Add interactive elements
5. Apply consistent branding

Step 3: PWA Configuration

1. Create Web App Manifest
2. Add icons
3. Configure start URL
4. Configure display settings
5. Test installation

Step 4: Offline Functionality

1. Create Service Worker
2. Cache application resources
3. Implement caching strategy
4. Create offline fallback
5. Test offline functionality

Step 5: Advanced Features

1. Add local data storage
2. Implement notifications where appropriate
3. Add Web Share or other suitable APIs
4. Add online/offline detection
5. Improve user experience

Step 6: Optimization & Launch

1. Optimize images and assets
2. Improve loading performance
3. Check Core Web Vitals
4. Perform accessibility testing
5. Test across browsers/devices
6. Conduct security checks
7. Deploy the PWA
8. Test installation after deployment
9. Prepare project documentation
10. Present the completed PWA

3-Month Course Progression

MONTH 1 – PWA Foundations & Installation

Unit 1: PWA Fundamentals & Modern Web Development

Unit 2: Web App Manifest & Installable PWAs

Students learn:

• PWA concepts
• Responsive design
• Mobile-first development
• Web App Manifest
• App icons
• Installation
• Standalone mode
• PWA project structure

Practical Project: Build an installable responsive PWA.

MONTH 2 – Offline & Advanced PWA Development

Unit 3: Service Workers, Caching & Offline Functionality

Unit 4: Advanced PWA Features, APIs & Performance

Students learn:

• Service Workers
• Cache Storage
• Offline functionality
• Caching strategies
• Notifications
• IndexedDB
• Web APIs
• Performance optimization
• Core Web Vitals

Practical Project: Build an offline-first PWA with local data storage.

MONTH 3 – Testing, Optimization & Deployment

Unit 5: PWA Testing, Deployment & Final Project

Students complete the professional workflow:

Idea → Requirements → UI Design → Responsive Development → Manifest → Service Worker → Caching → Offline Support → APIs → Testing → Performance → Security → Deployment → Maintenance

Final Assessment

Theory Examination

Students will be assessed on:

• PWA fundamentals
• Responsive web design
• Web App Manifest
• Service Workers
• Cache Storage
• Offline functionality
• Caching strategies
• Web APIs
• IndexedDB
• Notifications
• Performance
• Security
• Testing
• Deployment

Practical Examination

Students should demonstrate:

1. Create a responsive web application
2. Configure a Web App Manifest
3. Add application icons
4. Register a Service Worker
5. Cache website resources
6. Create an offline fallback
7. Test offline functionality
8. Implement local data storage
9. Optimize PWA performance
10. Prepare and deploy the application

Final Project

Create a complete Progressive Web App such as:

• Offline learning application
• To-do/task management PWA
• Restaurant/menu PWA
• Event management PWA
• News/content PWA
• Business/service PWA
• Shopping/catalog PWA
• Student information PWA

The final project should demonstrate:

Responsive UI + Web Manifest + Installability + Service Worker + Caching + Offline Functionality + Local Storage/IndexedDB + Suitable Web APIs + Performance Optimization + Testing + Secure Deployment

Student Portfolio

Students can showcase:

• Responsive PWA
• Installable web application
• Offline-first project
• Service Worker implementation
• Caching strategies
• Local data storage project
• Notification/API integration
• Performance optimization report
• Final deployed PWA