0% found this document useful (0 votes)
48 views7 pages

Getting Started: Section 1

This document outlines the sections and topics that will be covered in a course on progressive web applications (PWAs). The course will cover the core building blocks of PWAs including app manifests, service workers, caching strategies, indexedDB, responsive design, background sync, push notifications, and using the Workbox library. It will also discuss how to create PWAs using frameworks like React, Angular, and Vue.

Uploaded by

olaleye_oladipo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
48 views7 pages

Getting Started: Section 1

This document outlines the sections and topics that will be covered in a course on progressive web applications (PWAs). The course will cover the core building blocks of PWAs including app manifests, service workers, caching strategies, indexedDB, responsive design, background sync, push notifications, and using the Workbox library. It will also discuss how to create PWAs using frameworks like React, Angular, and Vue.

Uploaded by

olaleye_oladipo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Section 1

- Getting Started
* What are Progressive Web Apps?
* PWAs vs Native Mobile Apps
* A Demo PWA & What We'll Build in this Course
* Our First Progressive Web App
* PWA Core Building Blocks
* Comparing PWAs and SPAs
* What is "Progressive Enhancement"?

Section 2
- Understanding the App Manifest
* Using an App Manifest to Make your App Installable
* Adding the Manifest
* Understanding App Manifest Properties
* Adding Properties to the App Manifest
* PWAs and Browser Support
* Using the Chrome Developer Tools
* Simulating the Web App on an Emulator
* Preparing the Emulated Device for ALL PWA Features
* Installing the Web App - Prerequisites
* Adding Properties for Safari
* Adding Properties for the Internet Explorer

Section 3
- The Service Workers
* Why Service Workers Are Amazing!
* Understanding Service Worker Events
* The Service Worker Lifecycle
* Service Worker Browser Support
* Registering a Service Worker
* Reacting to Incoming Events (in SW)
* Updating & Activating Service Workers
* Non-Lifecycle Events
* The App Install Banner & Chrome +
* Getting that "App Install Banner"
* Connecting Chrome Developer Tools to a Real/ Emulated Device
* Testing the App on Real Device (and Installing the App!)
* Deferring the App Install Banner

Section 4
- Promise and Fetch
* Async Code in JavaScript
* Promises - Basics
* Rejecting Promises
* Where we Use Promises in our Project
* Fetch - Basics
* Sending Post Requests via Fetch
* Fetch and CORS
* Comparing Fetch and Ajax
* Adding Polyfills (for Legacy Browser Support)
* Fetch & Service Workers

Section 5
- Service Workers - Caching
* Why Caching?
* Understanding the Cache API
* Browser Support
* Adjusting the Course Project
* Identifying (Pre-)Cacheable Items
* Static Caching/ Precaching
* Retrieving Items from the Cache
* Adding & Retrieving Multiple Files (to/ from Cache)
* Cache Multiple Files with addAll
* Dynamic Caching - The Basics
* Implementing Dynamic Caching
* Handling Errors
* Adding Cache Versioning
* Different Cache Versions & Cleanup
* Optimizing Cache Management

Section 6
- Service Workers - Advanced Caching
* Module Preparation: Adding a Button
* Offering "Cache on Demand"
* Providing an Offline Fallback Page
* Strategy: Cache with Network Fallback
* Strategy: Cache Only
* Strategy: Network Only
* Strategy: Network with Cache Fallback
* Strategy: Cache then Network
* Cache then Network & Dynamic Caching
* Cache then Network with Offline Support
* Cache Strategies & "Routing"
* Applying Cache Only
* A Better Way Of Parsing Static Cache URLs
* Making Route Matching More Precise
* A Better Way Of Serving Fallback Files
* Post Request and Cache API
* Cleaning/ Trimming the Cache
* Getting Rid of a Service Worker
* Preparing the Project for the Next Steps

Section 7
- IndexedDB and Dynamic Data
* Understanding the Basics
* Setting Up Firebase
* Connecting Frontend to Backend
* Dynamic Caching vs Caching Dynamic Content
* Introducing IndexedDB
* IndexedDB Browser Support
* Adding the IDB File
* Storing Fetched Posts in IndexedDB
* Using IndexedDB in the Service Worker
* Reading Data from IDB
* Clearing IDB & Handling Server-Client Mismatch
* Implementing the Clear Database Method
* Deleting Single Items from the Database
* IndexedDB and Caching Strategies

Section 8
- Creating a Responsive User Interface (UI)
* Responsive Design in this Course
* Understanding Responsive Design in our Project
* CSS and Media Queries
* Using Images in a Responsive Way
* Adding Animations
* The Viewport & Scaling

Section 9
- Background Sync
* How does Background Sync Work?
* Adding the Basic Setup to our Project
* Registering a Synchronization Task
* Storing our Post in IndexedDB
* Adding a Fallback
* Syncing Data in the Service Worker
* Understanding Periodic Sync
* Adding Server Side Code
* Fixing Errors

Section 10
- Web Push Notifications
* Why we need Web Push Notifications
* How Push & Notifications Work
* Displaying Notifications - Some Theory First
* Browser Support
* Requesting Permissions
* Displaying Notifications
* Notifications from Within the Service Worker
* Understanding Notifications' Options
* Advanced Options
* Adding Actions to Notifications
* Reacting to Notification Interaction - Clicks
* Reacting to Notification Interaction - Closing
* From Notifications to Push Messages
* Creating a Push Subscription
* Storing Subscriptions
* Connecting Server & Client (PWA)
* Sending Push Messages from the Server
* Listening to Push Messages
* Displaying Push Notifications on a Real Device
* Opening a Page upon User Interaction
* Improving our Code

Section 11
- Native Device Features
* Preparing the Project
* Getting DOM Access
* Creating our own Polyfills
* Getting the Video Image
* Hooking Up the Capture Button
* Storing the Image on a Server
* Accepting File Upload Example with Firebase
* Testing the Camera & Upload
* Implementing a Fallback
* Getting the User Position
* Fixing Bugs
* Testing the App on a Real Device

Section 12
- Service Worker Management with Workbox
* Understanding the Basics
* Installing Workbox & Using It
* Configuring Workbox Precaching
* Customizing the Service Worker
* Implementing Routing with the Workbox Router
* Expanding Dynamic Caching
* Options and Setting Up Strategies
* Custom Handlers (Example: For IndexedDB)
* Providing an Offline HTML Fallback
* Handling Background Synchronisation and Push Notifications
* Understanding the Workbox Documentation
* Enhancing the Build Workflow
* Running our App on a Real Server
* Auditing our Webpage with Lighthouse

Section 13
- SPAs and PWAs using Frameworks
* React with create-react-app
* Angular with the CLI
* Vue with Vue CLI
* A General Note about SPAs and PWAs

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy