Progressive Web Apps (PWA)

This article is a definition of Progressive Web Apps – including exam questions and tags.

In a Nutshell

PWAs are web applications that behave like native apps – including offline functionality, installation, and push notifications.

Compact Technical Description

Progressive Web Apps combine the openness of the web with features of native apps. They run in the browser but can be installed on the home screen, work offline through Service Workers, and offer push notifications, caching, and data synchronization. Prerequisites: responsive design, HTTPS, Web App Manifest, and Service Worker. PWAs use modern web APIs for platform-independent app-like behavior.

Exam-Relevant Key Points

• PWA = web app with native functions
• Requires HTTPS, Service Worker, Web App Manifest
• Offline capability through caching (Cache API)
• No app store publication needed (IHK-relevant)
• Can be installed as an icon (practical relevance)
• Service Workers can pose security risks (security aspect)
• Saves development costs for separate iOS & Android (cost-effectiveness)
• Technical requirements and manifest data must be documented (documentation requirement)

Core Components

1. HTML, CSS, JavaScript
2. Service Worker (background processes)
3. Web App Manifest (.webmanifest file)
4. Cache strategies (Network First, Cache First)
5. Responsive Design
6. HTTPS requirement
7. Push Notifications
8. Background synchronization
9. Installability (Add to Homescreen)
10. Progressive Enhancement principle

Practical Example

// manifest.json
{
  "name": "Meine PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "icons": [
    { "src": "icon.png", "sizes": "192x192", "type": "image/png" }
  ]
}

Explanation: This manifest enables the PWA to appear like a native app on the device – with its own icon and startup behavior.

Advantages and Disadvantages

Advantages

• Platform-independent
• Works offline
• No app store needed
• Faster development cycle

Disadvantages

• Limited hardware access (e.g., Bluetooth, NFC)
• iOS support sometimes limited
• No store marketing (rankings, reviews)

Typical Exam Questions (with Short Answers)

1. What is a PWA? Web application with app functions like offline, push, installation.
2. Technical components? Service Worker, Web App Manifest, HTTPS.
3. Installation? Via browser with “Add to Home Screen”.
4. Advantage over native apps? No store needed, faster, platform-independent.
5. Offline usage? Through caching via Service Worker and Cache API.
6. Web App Manifest? JSON file with app name, start URL, icon.
7. Mandatory security requirement? HTTPS connection.
8. Why economically attractive? One codebase for multiple platforms, no store fees.

Most Important Sources

1. https://web.dev/progressive-web-apps/
2. https://developer.mozilla.org/de/docs/Web/Progressive_web_apps
3. https://codelabs.developers.google.com/codelabs/your-first-pwapp/