What is a PWA (Progressive Web Application)?

PWA is a web application that looks and behaves like a native mobile app, while working in the browser.

Main features of PWA:

• Reliability: Works offline thanks to Service Workers.
• Performance: Loads quickly and responds to user actions.
• Installability: Users can add PWA to the device's home screen.
• Discoverability: Indexed by search engines.
• Engagement: Can send push notifications.
• Responsiveness: Adapts to any screen size.
• Security: Works only on HTTPS.

Technologies used in PWA:

• Service Workers: Proxy server between the browser and the network, allows caching resources and working offline.

  // Example of installing a Service Worker
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/service-worker.js')
        .then(registration => {
          console.log('Service Worker registered with scope:', registration.scope);
        })
        .catch(error => {
          console.log('Service Worker registration failed:', error);
        });
    });
  }
  

• Web App Manifest: JSON file with app information (name, icons, screen orientation, etc.).

  {
    "short_name": "My PWA",
    "name": "My Sample PWA",
    "icons": [
      {
        "src": "/images/icon-192x192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "/images/icon-512x512.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ],
    "start_url": "/",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#3367D6"
  }
  

• HTTPS: Ensures a secure connection.

Advantages of PWA:

• Do not require installation through app stores.
• Take up less space on the device.
• Update more easily.
• Available on all platforms with browser support.

PWA testing includes checking:

• Functionality in online and offline modes.
• Installation and operation on the home screen.
• Responsiveness on various devices.
• Push notifications.
• Service Worker operation and caching.
• App manifest.
• Performance.