Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-02-21 10:55:13 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
76b1c55befc0366a3bd4098cfdbbd38517e8dc2c
awesome-copilot/skills/create-web-form/references/progressive-web-app.md
jhauga 27149859a4 Add skill to create web forms 
Add skill to create web forms
2026-02-09 19:22:54 -05:00

212 lines
9.1 KiB
Markdown
Raw Blame History

# Progressive Web App Reference
---
## Overview: What Are Progressive Web Apps?
> Source: <https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps>
A **Progressive Web App (PWA)** is an app built using web platform technologies that provides a user experience comparable to a platform-specific (native) app. Key characteristics include:
- Runs on multiple platforms and devices from a single codebase
- Can be installed on devices like native apps
- Operates offline and in the background
- Integrates with device features and other installed apps
- Appears as a permanent feature users can launch directly from the OS
### Main Guides
| Guide | Description |
|-------|-------------|
| **What is a Progressive Web App?** | Comparison with traditional websites and platform-specific apps; introduction to main PWA features |
| **Making PWAs Installable** | Requirements for installability, device installation process, customizing the install experience |
| **Installing and Uninstalling Web Apps** | How users install and uninstall PWAs on their devices |
| **Offline and Background Operation** | Technologies enabling offline functionality, intermittent network connectivity management, background task execution |
| **Caching** | APIs for local resource caching, common caching strategies for offline functionality |
| **Best Practices for PWAs** | Cross-browser and device adaptation, accessibility, performance optimization, OS integration |
### How-To Implementation Features
| Feature | Purpose |
|---------|---------|
| Create a standalone app | Launch in a dedicated window instead of a browser tab |
| Define app icons | Customize icons for the installed PWA |
| Customize app colors | Set background and theme colors |
| Display badges | Show badges on the app icon (e.g., notification counts) |
| Expose app shortcuts | Access common actions from the OS shortcut menu |
| Share data between apps | Use OS app-sharing mechanisms |
| Trigger installation | Provide custom UI to invite user installation |
| Associate files | Connect file types to the PWA for handling |
### Core Technologies and APIs
#### Web App Manifest
- Defines PWA metadata and appearance
- Customizes deep OS integration (name, icons, display mode, colors, etc.)
#### Service Worker APIs
**Communication:**
- `Client.postMessage()` -- Service worker to PWA messaging
- Broadcast Channel API -- Two-way communication between service worker and client
**Offline Operation:**
- `Cache` API -- Persistent HTTP response storage
- `Clients` -- Document access control for service-worker-controlled documents
- `FetchEvent` -- HTTP request interception and caching
**Background Tasks:**
- Background Synchronization API -- Defer tasks until a stable network connection
- Web Periodic Background Synchronization API -- Register periodic tasks with network connectivity
- Background Fetch API -- Manage large, long-duration downloads
#### Other Essential Web APIs
| API | Purpose |
|-----|---------|
| **IndexedDB** | Client-side storage for structured data and files |
| **Badging API** | Application icon badge notifications |
| **Notifications API** | OS-level notification display |
| **Web Share API** | Share content to user-selected apps |
| **Window Controls Overlay API** | Desktop PWA window customization (hide title bar, display app over full window) |
### Essential PWA Checklist
- Installable and standalone operation
- Offline functionality via service workers
- Caching strategies implemented
- Web app manifest configured
- App icons and colors defined
- Accessible and performant
- Cross-browser compatible
- Secure (HTTPS required)
---
## Tutorials
> Source: <https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials>
These tutorials provide structured, step-by-step learning paths for building PWAs from start to finish.
### Tutorial 1: CycleTracker -- Creating Your First PWA
**Level:** Novice
A menstrual cycle tracking app that walks through the complete process of turning a web app into a PWA.
**Sub-modules:**
1. **Base HTML and CSS** -- Build the foundational web app structure
2. **Secure connection** -- Set up a testing environment with HTTPS
3. **JavaScript functionality** -- Add interactivity and application logic
4. **Manifest and iconography** -- Create and inspect a web app manifest; define icons
5. **Offline support using service workers** -- Add service workers and manage stale caches
**Topics Covered:**
- HTML, CSS, and JavaScript fundamentals for creating a functional web app
- Setting up a testing environment
- Upgrading a web app into a PWA
- Manifest development: creating and inspecting a web app manifest
- Service workers: adding service workers to the application
- Cache management: using service workers to delete stale caches
### Tutorial 2: js13kGames -- Deep Dive into PWA
**Level:** Intermediate
A game information listing app (from the js13kGames 2017 competition) that explores advanced PWA features.
**Sub-modules:**
1. **PWA structure** -- Understand app architecture and organization
2. **Offline support using service workers** -- Implement offline functionality
3. **Making PWAs installable** -- Meet installability requirements
4. **Using Notifications and Push APIs** -- Implement push notifications
5. **Progressive loading** -- Optimize loading performance
**Topics Covered:**
- PWA basics and core concepts
- Notifications and Push APIs: implementing notifications and push functionality
- App performance: optimizing PWA performance
- Advanced PWA features beyond the basics
---
## API and Manifest Reference
> Source: <https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Reference>
### Web App Manifest Members
The web app manifest describes PWA characteristics, customizes its appearance, and enables deeper OS integration. The following members can be defined in the manifest JSON file:
| Member | Status | Description |
|--------|--------|-------------|
| `name` | Standard | Full name of the application |
| `short_name` | Standard | Short name for limited-space contexts |
| `description` | Standard | Description of the application |
| `start_url` | Standard | URL that loads when the app is launched |
| `scope` | Standard | Navigation scope of the PWA |
| `display` | Standard | Display mode (fullscreen, standalone, minimal-ui, browser) |
| `display_override` | Experimental | Override display mode preferences |
| `orientation` | Standard | Default orientation for the app |
| `icons` | Standard | Array of icon objects for various contexts |
| `screenshots` | Standard | Screenshots for app stores and install UI |
| `background_color` | Standard | Background color for the splash screen |
| `theme_color` | Standard | Default theme color for the application |
| `categories` | Standard | Expected application categories |
| `id` | Standard | Unique identifier for the application |
| `shortcuts` | Standard | Quick-access shortcuts to key tasks |
| `file_handlers` | Experimental | File types the app can handle |
| `launch_handler` | Experimental | Control how the app is launched |
| `protocol_handlers` | Experimental | URL protocols the app can handle |
| `share_target` | Experimental | Define how the app receives shared data |
| `scope_extensions` | Experimental | Extend the navigation scope |
| `note_taking` | Experimental | Note-taking app integration |
| `related_applications` | Experimental | Related native applications |
| `prefer_related_applications` | Experimental | Prefer native app over PWA |
| `serviceworker` | Experimental / Non-standard | Service worker registration info |
### Service Worker APIs
#### Communication with the App
- **`Client.postMessage()`** -- Send messages from the service worker to client pages
- **Broadcast Channel API** -- Create a two-way communication channel between the service worker and the client PWA
#### Offline Operation
- **`Cache`** -- Persistent storage of HTTP responses for reuse when offline
- **`Clients`** -- Interface to access service-worker-controlled documents
- **`FetchEvent`** -- Intercept HTTP requests; enables caching or proxying responses for offline support
#### Background Operation
- **Background Synchronization API** -- Defer tasks until the network connection is stable
- **Web Periodic Background Synchronization API** -- Register periodic tasks that run with network connectivity
- **Background Fetch API** -- Manage long-duration downloads such as video and audio files
### Other Web APIs for PWAs
| API | Purpose |
|-----|---------|
| **IndexedDB** | Client-side storage for structured data and files |
| **Badging API** | Set application icon badges for notification indicators |
| **Notifications API** | Display OS-level system notifications |
| **Web Share API** | Share text, links, files, and content to user-selected apps |
| **Window Controls Overlay API** | Hide the title bar and display the app over the full window area (desktop PWAs) |
### Key MDN Reference Paths
- **Main PWA Index:** `/en-US/docs/Web/Progressive_web_apps`
- **Service Worker API:** `/en-US/docs/Web/API/Service_Worker_API`
- **Web APIs Overview:** `/en-US/docs/Web/API`
- **Web App Manifest:** `/en-US/docs/Web/Progressive_web_apps/Manifest`
Reference in New Issue View Git Blame Copy Permalink