Free online coursePWA Progressive Web Apps for Beginners
Duration of the online course: 4 hours and 12 minutes
New course
Learn to create Progressive Web Apps with a free online course. Gain skills in service workers, caching, offline mode, and app deployment. Perfect for beginners.
In this free course, learn about
- PWA Fundamentals and Project Setup
- Device Emulation and Platform Support
- Service Worker Basics and Lifecycle
- Auditing and Core Offline Support
- Static Caching and App Shell Strategy
- Dynamic Caching and Fallback Strategies
- Firestore Integration and Realtime Data
- Building Offline-Capable Features and Deployment
Course Description
Dive into the world of Progressive Web Apps with this free course offered by NetNinja, tailored for beginners eager to master the essentials of PWA development. As part of the Information Technology field and specializing in Web Development, this course provides a comprehensive yet concise introduction to building modern web applications that combine the best of web and mobile apps.
Throughout this course, start by understanding what Progressive Web Apps are and learn how to set up your project. Familiarize yourself with the Web App Manifest and gain experience using Android and iOS support. The course delves into the essential mechanics of Service Workers, detailing the lifecycle, registration, and events such as install and activate.
Equip yourself with the knowledge to conduct a Lighthouse Audit and handle fetch events efficiently. The course offers insights into creating install banners, managing offline modes, and pre-caching assets for a seamless user experience even when offline. Students will uncover advanced caching strategies, including cache versioning, dynamic caching, and controlling cache size.
Enhance your technical skills by integrating the Firestore Database for real-time data handling and learn how to manage offline data effectively. The course further covers UI updates, adding and deleting recipes, and deploying your application to Firebase. Test your app and explore the steps for future development to stay ahead in the fast-evolving digital landscape. This hands-on experience empowers learners to build robust, reliable PWAs ready for the digital world.
Course content
- Video class: PWA Tutorial for Beginners #1 - What Are PWA's? 07m
- Exercise: What enables offline functionality in a Progressive Web App?
- Video class: PWA Tutorial for Beginners #2- Setting up a Project 23m
- Exercise: In PWA development, why should you use a local dev server instead of opening index.html via the file protocol
- Video class: PWA Tutorial for Beginners #3 - The Web App Manifest 10m
- Exercise: Which web app manifest property controls launching the app in a native style window without browser UI?
- Video class: PWA Tutorial for Beginners #4 - Android Emulator 07m
- Exercise: Which address should you use in the Android emulator to access your computer local server running on port 5500?
- Video class: PWA Tutorial for Beginners #5 - iOS Support 02m
- Exercise: Ensuring a custom iOS home screen icon for a PWA
- Video class: PWA Tutorial for Beginners #6 - Intro to Service Workers 03m
- Exercise: What best describes a service worker in a PWA?
- Video class: PWA Tutorial for Beginners #7 - Service Worker Life-cycle 06m
- Exercise: When a new Service Worker is found after reloading, what does it do while an older one is still controlling pages?
- Video class: PWA Tutorial for Beginners #8 - Registering a Service Worker 09m
- Exercise: What determines the scope of a service worker in a PWA?
- Video class: PWA Tutorial for Beginners #9 - The Install Event 03m
- Exercise: Which service worker lifecycle event is best for pre-caching common assets for offline use?
- Video class: PWA Tutorial for Beginners #10 - The 'Activate' Event 07m
- Exercise: After editing a Service Worker in a PWA, when does the new version normally become active?
- Video class: PWA Tutorial for Beginners #11 - Lighthouse Audit 05m
- Exercise: Which condition is required for the automatic PWA install banner to appear in Chrome?
- Video class: PWA Tutorial for Beginners #12 - Fetch Events 05m
- Exercise: What does listening to the fetch event in a service worker enable?
- Video class: PWA Tutorial for Beginners #13 - The Install Banner 05m
- Exercise: Why use Chrome DevTools port forwarding when testing a PWA on an Android emulator?
- Video class: PWA Tutorial for Beginners #14 - Offline Mode Explained 05m
- Exercise: How does a PWA load content when the network is unavailable?
- Video class: PWA Tutorial for Beginners #15 - Pre-Caching Assets 12m
- Exercise: In a service worker, which method ensures the install event waits until app shell precaching completes?
- Video class: PWA Tutorial for Beginners #16 - Getting Cached Assets 12m
- Exercise: How should a Service Worker serve cached shell assets while allowing a network fallback?
- Video class: PWA Tutorial for Beginners #17 - Cache Versioning 14m
- Exercise: After updating a static file in a PWA, the page still shows old content. What should the service worker do to ensure the updated asset is used?
- Video class: PWA Tutorial for Beginners #18 - Dynamic Caching 10m
- Exercise: How should a PWA cache navigated pages to enable offline browsing without pre-caching everything?
- Video class: PWA Tutorial for Beginners #19 - Offline Fallback Page 07m
- Exercise: How should a PWA handle offline navigation to a page the user has never visited
- Video class: PWA Tutorial for Beginners #20 - Conditional Fallbacks 04m
- Exercise: Ensure fallback page is used only for HTML requests in a service worker
- Video class: PWA Tutorial for Beginners #21 - Limiting Cache Size 07m
- Exercise: How do you prevent a dynamic cache in a service worker from exceeding a set size?
- Video class: PWA Tutorial for Beginners #22 - Site Audit Refresh 03m
- Exercise: What enabled the PWA audit to show 200 responses when offline for the current page and start URL?
- Video class: PWA Tutorial for Beginners #23 - Firestore Database 08m
- Exercise: In a PWA, what is the recommended way to handle dynamic backend data for offline use?
- Video class: PWA Tutorial for Beginners #24 - Realtime Data 13m
- Exercise: In a PWA using Firestore, what is the main benefit of using onSnapshot on a collection?
- Video class: PWA Tutorial for Beginners #25 - Updating the UI 08m
- Exercise: What must be restored to ensure the app shell loads offline?
- Video class: PWA Tutorial for Beginners #26 - Offline Data 10m
- Exercise: What is the recommended way to enable safe offline data in a PWA that uses Firestore?
- Video class: PWA Tutorial for Beginners #27 - Adding Recipes 10m
- Exercise: How does a PWA using Firestore show newly added recipes while offline and then sync them when back online?
- Video class: PWA Tutorial for Beginners #28 - Deleting Recipes 11m
- Exercise: Best way to handle delete clicks for dynamic recipe items in a PWA list
- Video class: PWA Tutorial for Beginners #29 - Deploying to Firebase 05m
- Exercise: Deploying a PWA to Firebase Hosting: which CLI command publishes your app?
- Video class: PWA Tutorial for Beginners #30 - Testing the App 04m
- Exercise: Which PWA capability enables viewing cached pages offline and syncing recipe changes once the device reconnects?
- Video class: PWA Tutorial for Beginners #31 - Next Steps 03m
- Exercise: Which change allowed the app to pass the HTTPS requirement in the PWA audit after deployment?
Learn aboutProgressive Web Apps
Explore our free online course on Progressive Web Apps and learn how to build fast, reliable, and engaging experiences accessible across all devices.
Learn aboutService Workers
Explore our free online course on Service Workers and discover how to enhance web performance and offline capabilities. Enroll now to boost your skills!
Learn aboutJavaScript
Discover top free JavaScript online courses! Master JS coding, from basics to advanced concepts, with interactive lessons. Start your coding journey today!
This free course includes:
4 hours and 12 minutes of online video course
Digital certificate of course completion (Free)
Exercises to train your knowledge
100% free, from content to certificate
Ready to get started?Download the app and get started today.
Install the app now
to access the course
Over 5,000 free courses
Programming, English, Digital Marketing and much more! Learn whatever you want, for free.
Study plan with AI
Our app's Artificial Intelligence can create a study schedule for the course you choose.
From zero to professional success
Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.
You can also use the QR Code or the links below.
More free courses at Web Development
Free CourseProgressive Web Application PWA for Beginners
5
(1)
3h24m
15 exercises
Free CourseJavaScript for beginners
4.95
(19)
1h40m
2 exercises
Free CourseUmbraco CMS
4.86
(22)
6h21m
19 exercises
Free CourseFull Stack Web Development
4.83
(12)
26h16m
48 exercises
Free CourseAngular 2 for Beginners
4.79
(29)
1h02m
9 exercises
Free CourseDesign and code a landing page
4.76
(34)
4h40m
15 exercises
Free CourseJavascript
4.75
(103)
4h52m
46 exercises
Free CourseHTML and CSS
4.74
(31)
9h07m
3 exercises
Free CourseWeb Development for beginners
4.72
(794)
5h21m
30 exercises
Free CoursejQuery
4.71
(14)
9h04m
7 exercises
Free CourseProgressive Web Application PWA for Beginners
5
(1)
3h24m
15 exercises
Free CourseJavaScript for beginners
4.95
(19)
1h40m
2 exercises
Free CourseUmbraco CMS
4.86
(22)
6h21m
19 exercises
Free CourseFull Stack Web Development
4.83
(12)
26h16m
48 exercises
Free CourseAngular 2 for Beginners
4.79
(29)
1h02m
9 exercises
Free CourseDesign and code a landing page
4.76
(34)
4h40m
15 exercises
Free CourseJavascript
4.75
(103)
4h52m
46 exercises
Free CourseHTML and CSS
4.74
(31)
9h07m
3 exercises
Free CourseWeb Development for beginners
4.72
(794)
5h21m
30 exercises
Free CoursejQuery
4.71
(14)
9h04m
7 exercises
Free Ebook + Audiobooks! Learn by listening or reading!
Download the App now to have access to + 3300 free courses, exercises, certificates and lots of content without paying anything!
-
100% free online courses from start to finish
Thousands of online courses in video, ebooks and audiobooks.
-
More than 48 thousand free exercises
To test your knowledge during online courses
-
Valid free Digital Certificate with QR Code
Generated directly from your cell phone's photo gallery and sent to your email
Download our app via QR Code or the links below::.
