PWA and Push Notifications

PWA (Progressive Web App) is a web application that a user can install on a device from a website. After installation, the PWA opens as a separate application, can work with cache, use Service Worker, and receive push notifications.

info

PWA is not a separate communication channel in Altcraft. It is a use case of Web Push for an installed web application.

Setting Up Push Notifications for PWA

Setting up push notifications for PWA is no different from setting up regular Web Push. The order of actions is the same:

Set up the resource and website — resource, Toolkit, SDK, subscription code
Set up providers — Firebase for Android, APNs for iOS

The only difference is that the manifest.json placed on the website must contain parameters that allow the browser to install the website as an application.

Manifest for PWA

Manifest is a JSON file that tells the browser how the application should be named, which icons to use, how to open, and how to display after installation.

For PWA to work, the manifest must specify:

name — full application name
short_name — short name displayed next to the icon on the Home screen
start_url — page that opens when the PWA is launched
display — display mode; for PWA, standalone is used (opening without the browser address bar)
icons — application icons; for installation on Android, icons 192×192 and 512×512 are required. Icon files must be present at the specified path.

Minimal example:

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

After creating the manifest file, it must be linked in the <head> of every page on the website. Without this line, the browser will not find the manifest and will not be able to install the website as a PWA. Make sure the path to manifest.json is specified correctly:

<link rel="manifest" href="/manifest.json">

tip

The manifest.json file is provided in the download files and Toolkit when setting up a resource in Altcraft. For PWA to work, it needs to be supplemented with the name, short_name, display, and icons parameters.

Android Specifics

On Android, PWA Push works through the standard Web Push infrastructure of the browser. Supported in Chrome, Samsung Internet, and other Chromium browsers.

Requirements:

The PWA must be installed on the device;
Firebase Cloud Messaging is used as the provider;
The manifest must contain icons 192×192 and 512×512 pixels;
Notifications are displayed in the Android system notification center.

Detailed Firebase setup is described in the article Firebase Cloud Messaging.

iOS and Safari Specifics

Starting with iOS/iPadOS 16.4, installed web applications can receive push notifications. The user must add the PWA to the Home screen and allow notifications.

Limitations:

The PWA must be added to the Home screen;
Notifications work through APNs;
The user must explicitly allow notifications;
Settings and certificates are tied to an Apple Developer Account;
Behavior may differ from Android and desktop browsers.

Detailed setup for Safari is described in the article Apple Safari.

Setting Up Push Notifications for PWA​

Manifest for PWA​

Android Specifics​

iOS and Safari Specifics​

Setting Up Push Notifications for PWA

Manifest for PWA

Android Specifics

iOS and Safari Specifics