Push: подписка, сервер и оговорки по платформам

Уведомление рисует не страница, а система: поверх других окон, в центре уведомлений, на экране блокировки. Поэтому начинается всё не с кода доски, а с разрешения человека. Спрашивают его через Notification.requestPermission(), а текущее состояние лежит в Notification.permission. Предскажите четыре строки: как и с регистрацией воркера в первой статье главы, песочница учебника отвечает здесь по-настоящему.

console.log("уведомления:", "Notification" in window);
console.log("push:", "PushManager" in window);
console.log("разрешение:", Notification.permission);

async function main() {
  const answer = await Notification.requestPermission();
  console.log("ответ на запрос:", answer);
}

main();

Имена на месте — и Notification, и PushManager. А с разрешением отказ, и настоящий: происхождение песочницы непрозрачное, и разрешать уведомления тут некому и не для кого. Третья строка при этом зависит от браузера. Chrome сразу пишет denied, а Firefox в той же песочнице — default, «ещё не спрашивали»; на сам запрос оба отвечают denied. Свойство отвечает на вопрос «что уже решено», запрос — «чем кончилась попытка», и код доски должен уметь все три ответа.

denied — окончательный ответ для сайта. Повторный requestPermission() окна уже не показывает и сразу возвращает denied; вернуть разрешение может только сам человек, в настройках сайта. Значит, спросить по-настоящему удаётся один раз, и тратить эту попытку на загрузку страницы, когда человек ещё не видел доски, — худшее из решений. У приложений для телефона правило похожее, но не одинаковое: iOS после первого отказа больше не спрашивает, Android 11 и новее — после второго; это разберём в пятой части, в статье «Разрешения: спросить, получить отказ, жить с ним».

Второе правило — спрашивать в ответ на нажатие. Как выглядит нарушение, проверим в Firefox 155 без окна. Страница спрашивает дважды: сразу при загрузке и по нажатию кнопки. Нажимает мой сценарий через WebDriver BiDi — протокол управления браузером; у Firefox это примерно то же, что протокол DevTools у Chrome.

// report() пишет строку в журнал моего сервера: консоль Firefox без окна снаружи не прочитать
const report = (o) => fetch("/report", { method: "POST", body: JSON.stringify(o) });

function ask(label) {
  let settled = false;
  setTimeout(() => { if (!settled) report({ step: label + ": ответа нет 10 с", permission: Notification.permission }); }, 10000);
  Notification.requestPermission().then((r) => { settled = true; report({ step: label, result: r, permission: Notification.permission }); });
}

ask("без нажатия");
document.querySelector("#notify").addEventListener("click", () => ask("по нажатию"));

Без нажатия Firefox не показал окна и не записал отказа: промис сразу вернул default, запрос просто проигнорирован. По нажатию ответа не было и через десять секунд — окно запроса открылось и ждёт человека, которого в браузере без окна нет. Требовать нажатия Firefox, по данным MDN о поддержке, начал с версии 72. Safari требует нажатия и на Mac, и на iPhone — WebKit пишет об этом прямо. Chrome, по тем же данным MDN, жеста не требует, а мой стенд здесь не судья: Chrome без окна на оба запроса сразу ответил denied — окна запроса у него нет, и отказывает он сам.

Разрешение спрашивают по нажатию на кнопку с понятным смыслом — «Сообщать о новых задачах», — а не при загрузке. Без нажатия запрос в одних браузерах пропадёт, а в других человек нажмёт «Блокировать» раньше, чем поймёт, о чём речь.

Разрешение — только право показывать уведомления. Чтобы сервер мог сообщить что-то закрытой доске, нужна подписка, и здесь в разговор входит третья сторона. Ваш сервер не может держать соединение с каждым телефоном: телефон спит, меняет сети, а сайтов с уведомлениями у него десятки. Поэтому устройство держит одно соединение — со службой доставки производителя браузера, общей для всех сайтов. У Chrome это служба Google, у Firefox — Mozilla, у Safari — Apple. Подписка — адрес в такой службе, по которому ваш сервер оставляет сообщение для этого браузера и этого сайта.

Вот app.js доски. Подписывается она через pushManager регистрации воркера: сообщение приходит в воркер, а не на страницу, и без воркера такой подписки нет.

// открытый ключ VAPID: его не прячут, он и нужен браузеру
const VAPID_PUBLIC_KEY = "BFzlD-rX_pvXrf8Jg4t0actaHftpb6TzYFuIIYCHP0uWwc8vZpMw4yYKWyAwERuQoh8UZfFWyxF_gIb2hCZ4ifE";

navigator.serviceWorker.register("/sw.js");
console.log("разрешение при загрузке:", Notification.permission);

document.querySelector("#notify").addEventListener("click", async () => {
  const permission = await Notification.requestPermission();
  console.log("ответ на запрос:", permission);
  if (permission !== "granted") return;

  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: VAPID_PUBLIC_KEY
  });

  const { endpoint, keys } = subscription.toJSON();
  console.log("служба доставки:", new URL(endpoint).origin);
  console.log("ключи:", Object.keys(keys).join(", "));

  await fetch("/api/push-subscriptions", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(subscription)
  });
});

Первое нажатие кончилось denied — это Chrome без окна отказал сам, как в опыте выше. Поэтому разрешение стенду выдал мой сценарий через протокол DevTools, командой Browser.grantPermissions; у вас на этом месте было бы окно с кнопками «Разрешить» и «Блокировать». После второго нажатия подписка готова, и её адрес ведёт на fcm.googleapis.com — в службу доставки Google. А на сервер уехало вот что:

JSON.stringify(subscription);

endpoint — тот самый адрес в службе. keys.p256dh — открытый ключ браузера: им сервер шифрует содержимое сообщения, и прочитать его сможет только этот браузер, служба везёт сообщение запечатанным. keys.auth — общий секрет для того же шифрования. expirationTime: null — срока у подписки нет, но вечной это её не делает; как подписки умирают, увидим в следующем разделе.

Повторное нажатие новой подписки не создаёт: на стенде второй subscribe вернул тот же адрес и те же ключи, а сервер получил два одинаковых POST. Поэтому сервер хранит подписки по endpoint, как по ключу, а не складывает в список.

Теперь applicationServerKey. Это открытая половина пары ключей VAPID, которую сервер доски заводит один раз. Открытая лежит прямо в app.js, прятать её незачем. Закрытая живёт только на сервере: ею он подписывает каждый запрос в службу. Служба запомнила открытый ключ при подписке и проверяет им подпись. Подписать может только владелец закрытого ключа, а проверить — любой, у кого есть открытый. Этот механизм можно пощупать прямо здесь, в примере: криптография браузера, WebCrypto, настоящая. VAPID требует подпись ECDSA на эллиптической кривой P-256 — это имена алгоритма, их браузер и принимает. Uint8Array — массив байтов, а String.fromCharCode и btoa вместе переводят байты в base64 — запись байтов латинскими буквами, цифрами и знаками + и /. Предскажите пять строк, особенно последнюю.

// base64url — base64, в котором + и / заменены на - и _, а хвостовые = убраны: так ключ живёт в адресах и JSON
const toBase64Url = (bytes) =>
  btoa(String.fromCharCode(...bytes)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");

async function main() {
  const curve = { name: "ECDSA", namedCurve: "P-256" };
  const sign = { name: "ECDSA", hash: "SHA-256" };

  const board = await crypto.subtle.generateKey(curve, true, ["sign", "verify"]);
  const stranger = await crypto.subtle.generateKey(curve, true, ["sign", "verify"]);

  const raw = new Uint8Array(await crypto.subtle.exportKey("raw", board.publicKey));
  const publicKey = toBase64Url(raw);
  console.log("открытый ключ:", raw.length, "байт, первый —", raw[0]);
  console.log("applicationServerKey:", publicKey.length, "символов, начинается с", publicKey[0]);

  const claims = new TextEncoder().encode(JSON.stringify({ aud: "https://fcm.googleapis.com", sub: "mailto:push@board.example" }));
  const fromBoard = await crypto.subtle.sign(sign, board.privateKey, claims);
  const fromStranger = await crypto.subtle.sign(sign, stranger.privateKey, claims);
  console.log("подпись:", fromBoard.byteLength, "байта");

  console.log("служба проверяет подпись доски:", await crypto.subtle.verify(sign, board.publicKey, fromBoard, claims));
  console.log("служба проверяет чужую подпись:", await crypto.subtle.verify(sign, board.publicKey, fromStranger, claims));
}

main();

65 байт с четвёркой в начале — так записывают открытый ключ на кривой P-256: четвёрка означает «дальше обе координаты точки», по 32 байта. В base64url это 87 символов, и первый из них всегда B: у ключа в app.js и у p256dh в подписке — тоже. Главное в двух последних строках: подпись доски проверяется её открытым ключом, а подпись чужим ключом ту же проверку не проходит, хотя данные одинаковые. Настоящий сервер подписывает не произвольную строку, а маленький JSON со сроком годности — токен JWT, где в aud стоит адрес службы, а в sub — контакт владельца сервера.

Вот что ответила служба Google, когда я заменил на сервере пару ключей и отправил сообщение по той же подписке:

// на сервере vapid.json заменён новой парой ключей, подписка в subscriptions.json — прежняя
const stranger = await sendPush(subscription, JSON.stringify({ title: "чужой" }));
console.log("чужой ключ →", stranger.status, stranger.text.trim());

403: адрес подписки у отправителя есть, а права писать по нему нет. Утёкшая база подписок сама по себе не даёт рассылать от вашего имени.

Последний параметр — userVisibleOnly: true. Это обещание: каждое сообщение кончится видимым уведомлением. Тихий push, который будит устройство ради фоновой работы, браузеры считают и слежкой, и тратой батареи. Chrome без этого обещания не подписывает:

// в консоли DevTools страницы доски, разрешение уже выдано
navigator.serviceWorker.ready
  .then((registration) => registration.pushManager.subscribe({ userVisibleOnly: false, applicationServerKey: VAPID_PUBLIC_KEY }))
  .then(() => "подписались", (error) => error.name + ": " + error.message);

Текст ошибки сбивает с толку — «permission denied» при выданном разрешении, — и объясняет причину только предупреждение в консоли. Нарушить обещание можно и позже, просто не показав уведомление. Chrome тогда, по словам web.dev, покажет своё — «This site has been updated in the background», а Safari, по словам WebKit, за такое отзывает подписку. На стенде Chrome без окна ни того, ни другого не показал: в отдельном варианте стенда воркер нарочно ничего не показывал на три push подряд — getNotifications() пуст, а подписка жива. Так что заглушку Chrome своими глазами я не видел.

Открытый ключ VAPID — в коде страницы, закрытый — только на сервере. Потеряли закрытый — подписки придётся собирать заново: служба принимает сообщения только с подписью той пары, с которой подписывались.

Сервер отправляет сообщение POST-запросом на endpoint. Тело зашифровано ключами подписки, запрос подписан ключом VAPID, а в заголовке TTL сказано, сколько секунд сообщению разрешено ждать, если устройство без связи. Сообщение маленькое: службы обязаны принимать хотя бы 4096 байт, поэтому в push кладут заголовок и адрес, а данные доска заберёт сама, когда её откроют. Служба сразу отвечает кодом и дальше разбирается с доставкой без вас.

Соберём весь разговор миниатюрой: служба доставки, два устройства и сервер доски. Часы здесь условные — переменная clock в секундах, а не таймеры, так что порядок строк зависит только от логики. Служба, как настоящая, отвечает серверу сразу, а воркер на устройстве просыпается позже. По сценарию телефон уезжает в метро, а на ноутбуке стирают данные сайта, и подписка ноутбука умирает. Предскажите вывод, особенно последние три строки.

let clock = 0;
const at = () => "[" + clock + " с]";

function createService() {
  const routes = new Map();
  const gone = new Set();
  let waiting = [];
  let counter = 0;

  const deliver = (device, message) => Promise.resolve().then(() => device.wake(message));

  return {
    subscribe(device) {
      const endpoint = "https://push.example/" + device.name + "-" + ++counter;
      routes.set(endpoint, device);
      return endpoint;
    },
    unsubscribe(endpoint) {
      routes.delete(endpoint);
      gone.add(endpoint);
    },
    send(endpoint, message, ttl) {
      if (gone.has(endpoint)) return 410;
      const device = routes.get(endpoint);
      if (!device) return 404;
      if (device.online) deliver(device, message);
      else if (ttl > 0) waiting.push({ device, message, expires: clock + ttl });
      return 201;
    },
    connect(device) {
      device.online = true;
      const queue = waiting;
      waiting = [];
      for (const item of queue) {
        if (item.device !== device) waiting.push(item);
        else if (item.expires < clock) console.log(at(), "служба: «" + item.message.title + "» не дождалось, TTL истёк");
        else deliver(device, item.message);
      }
    }
  };
}

function createDevice(name) {
  return {
    name,
    online: true,
    wake: (message) => console.log(at(), name + ": push → уведомление «" + message.title + "»")
  };
}

async function notify(registry, service, message, ttl) {
  console.log(at(), "сервер шлёт «" + message.title + "», TTL " + ttl);
  for (const [endpoint, owner] of registry) {
    const status = service.send(endpoint, message, ttl);
    if (status === 404 || status === 410) {
      registry.delete(endpoint);
      console.log("  " + owner + " → " + status + ", подписку удалил");
    } else {
      console.log("  " + owner + " → " + status);
    }
  }
}

async function main() {
  const service = createService();
  const laptop = createDevice("ноутбук");
  const phone = createDevice("телефон");

  const registry = new Map();
  const laptopEndpoint = service.subscribe(laptop);
  registry.set(laptopEndpoint, "ноутбук");
  registry.set(service.subscribe(phone), "телефон");

  await notify(registry, service, { title: "Вас назначили на задачу 17" }, 3600);

  clock = 600;
  phone.online = false;
  service.unsubscribe(laptopEndpoint);

  await notify(registry, service, { title: "Стендап через 5 минут" }, 0);
  await notify(registry, service, { title: "Задача 17 готова" }, 3600);
  await notify(registry, service, { title: "Созвон перенесли" }, 900);

  clock = 2400;
  service.connect(phone);
  await null;
  console.log(at(), "подписок на сервере:", registry.size);
}

main();

Разберём три места. Первое: на «Стендап через 5 минут» служба ответила 201, а уведомления нет нигде. Телефон был без связи, а TTL 0 значит «доставить сейчас или никогда»: служба честно приняла сообщение и честно выбросила. Второе: «Созвон перенесли» с TTL 900 телефона не дождался — тот вернулся через 30 минут, а ждать разрешили 15. И строка службы о просроченном сообщении напечаталась раньше уведомления, хотя отправлено оно было позже: очередь служба разбирает сразу, а воркер просыпается следующим шагом. Третье: ноутбук сервер вычеркнул по первому же 410, и следующие рассылки его уже не спрашивали.

Теперь по-настоящему. К sw.js доски добавляется обработчик push:

self.addEventListener("push", (event) => {
  const message = event.data.json();
  console.log("push:", message.title);
  event.waitUntil(
    self.registration.showNotification(message.title, {
      body: message.body,
      tag: message.tag,
      data: { url: message.url }
    }).then(() => console.log("показано:", message.title))
  );
});

showNotification стоит внутри event.waitUntil, и это не украшение. Воркер разбудили ради одного события, и без waitUntil браузер вправе погасить его, не дождавшись показа; web.dev прямо требует показать уведомление до того, как выполнится промис из waitUntil. tag — имя уведомления: новое с тем же тегом заменяет прежнее, а не ложится стопкой, к этому вернёмся в задачах. В data лежит адрес, куда вести человека по нажатию. В sw.js стенда перед этим стояли ещё две строки — skipWaiting() в install и clients.claim() в activate, чтобы опыт не ждал второй загрузки; кеш и маршрутизатор из прошлых статей в нём не участвовали.

Сервер доски — мой сценарий на Node. Функция отправки sendPush в нём моя, строк на сорок: шифрование по RFC 8291 и подпись VAPID по RFC 8292 на встроенном модуле node:crypto. В настоящем проекте её не пишут, а берут из библиотеки, для Node это web-push. Сама отправка в конце — обычный fetch из части I:

// конец sendPush из webpush.mjs: шифрование encrypt() и подпись vapidHeader() — выше, на node:crypto
export async function sendPush(subscription, payload, { ttl = 60, urgency, topic } = {}) {
  const headers = {
    "Content-Encoding": "aes128gcm",
    "Content-Type": "application/octet-stream",
    TTL: String(ttl),
    Authorization: vapidHeader(subscription.endpoint)
  };
  if (urgency) headers.Urgency = urgency;
  if (topic) headers.Topic = topic;
  const response = await fetch(subscription.endpoint, { method: "POST", headers, body: encrypt(subscription, payload) });
  return { status: response.status, text: await response.text() };
}

А вот рассылка, которая её зовёт, и первый запуск:

// send.mjs: рассылка всем подписчикам доски
import fs from "node:fs";
import { sendPush } from "./webpush.mjs";

const store = new URL("./subscriptions.json", import.meta.url);
const [title, body, url, ttl] = process.argv.slice(2);
const subscriptions = JSON.parse(fs.readFileSync(store, "utf8"));
const alive = [];

for (const subscription of subscriptions) {
  const { status, text } = await sendPush(subscription, JSON.stringify({ title, body, url, tag: "task" }), { ttl: Number(ttl || 60) });
  console.log(new URL(subscription.endpoint).origin, "→", status, text.trim().slice(0, 120));
  // мертва подписка только при 404 и 410; остальные отказы временные
  if (status === 404 || status === 410) console.log("  подписка мертва, удаляю");
  else alive.push(subscription);
}

fs.writeFileSync(store, JSON.stringify(alive, null, 2));
console.log("подписок осталось:", alive.length);

$ node send.mjs "Вас назначили на задачу 17" "«Починить вход» — срок пятница" http://127.0.0.1:3378/task/17

// в консоли DevTools страницы доски, через несколько секунд после рассылки
navigator.serviceWorker.ready
  .then((registration) => registration.getNotifications())
  .then((list) => JSON.stringify(list.map((n) => ({ title: n.title, body: n.body, tag: n.tag, data: n.data }))));

Сообщение прошло весь путь: сервер получил 201, служба разбудила воркер, воркер показал уведомление, и браузер знает о нём всё — заголовок, текст, тег и адрес. Теперь страница отписывается — unsubscribe() из консоли вернул true, — и сервер рассылает следующее сообщение:

$ node send.mjs "Задача 17 готова" "«Починить вход»" http://127.0.0.1:3378/task/17

410, да ещё с объяснением словами. Отписка из кода страницы — самый простой случай: страница могла бы и сама сказать об этом серверу. Хуже, когда подписка умирает без участия страницы. Например, данные сайта стёрли или браузер их выселил вместе с регистрацией воркера, как в статье «Без сети». Тогда сервер узнает об этом только из ответа службы на следующую рассылку.

Осталось проверить на живой службе то, что в миниатюре было моделью, — TTL. Подписываю доску, закрываю браузер и, пока он закрыт, отправляю четыре сообщения. Два последних — с заголовком Topic: из ожидающих сообщений с одной темой служба хранит только последнее. Разрешение в этом опыте записано в настройки профиля: выданное через протокол DevTools живёт до закрытия браузера, и на первой попытке опыт на этом споткнулся.

// браузер закрыт; подписка та же, разрешение записано в настройки профиля
const messages = [
  ["TTL 0", { ttl: 0 }],
  ["TTL 3600", { ttl: 3600 }],
  ["topic, первое", { ttl: 3600, topic: "task-17" }],
  ["topic, второе", { ttl: 3600, topic: "task-17" }]
];

for (const [title, options] of messages) {
  const answer = await sendPush(subscription, JSON.stringify({ title, body: "опыт", tag: title, url: "http://127.0.0.1:3378/" }), options);
  console.log(`отправил «${title}» →`, answer.status, answer.text.trim());
}

201 на все четыре, а дошли два. «TTL 0» служба приняла и выбросила: браузер был закрыт, а ждать сообщению не разрешили. Что дело именно в закрытом браузере, показал контрольный прогон — при открытом браузере такое же сообщение дошло:

console.log("→", (await sendPush(subscription, JSON.stringify({ title: "TTL 0 при открытом браузере", tag: "ttl0" }), { ttl: 0 })).status);

Из двух сообщений с темой task-17 дошло второе. А порядок прихода с порядком отправки не совпал: «TTL 3600» ушло первым, а показано вторым. Строить логику на очерёдности push нельзя.

201 от службы — «принято», а не «доставлено». TTL выбирают по смыслу сообщения: «стендап через 5 минут» бессмысленно показывать через час, а «вас назначили на задачу» пригодится и завтра.

Уведомление показано, человек на него нажал. Браузер будит воркер ещё раз — событием notificationclick. Задача обработчика — привести человека туда, о чём уведомление: если карточка задачи уже открыта во вкладке, переключиться на неё, если нет — открыть новую. Вот вторая половина sw.js стенда:

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  event.waitUntil(openBoard(event.notification.data.url));
});

async function openBoard(url) {
  const tabs = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
  const tab = tabs.find((client) => client.url === url);
  if (tab) return tab.focus();
  return self.clients.openWindow(url);
}

close() первым делом убирает само уведомление: на него уже отреагировали. clients.matchAll возвращает вкладки сайта, а includeUncontrolled: true добавляет те, которыми воркер пока не управляет, — вспомните первую загрузку из первой статьи главы. focus() переключает на найденную вкладку, openWindow() открывает новую. И снова waitUntil: воркер должен дожить до конца этой работы.

Нажать на уведомление в Chrome без окна нечем, поэтому сам обработчик нажатия стенд не проверил. Зато он проверил, почему весь этот код живёт именно здесь. Я позвал openWindow и focus из консоли воркера — не в ответ на нажатие:

// в консоли DevTools самого воркера — не из обработчика нажатия
"воркер: " + self.location.href;
self.clients.matchAll({ type: "window" })
  .then((tabs) => "вкладок: " + tabs.length + " — " + tabs.map((tab) => tab.url).join(", "));
self.clients.openWindow("/task/17")
  .then((client) => "открыл " + client.url, (error) => "openWindow: " + error.name + ": " + error.message);
self.clients.matchAll({ type: "window" })
  .then((tabs) => tabs[0].focus())
  .then((client) => "фокус " + client.url, (error) => "focus: " + error.name + ": " + error.message);

Вкладка есть, но переключиться на неё воркеру не дали, и новое окно открыть — тоже: InvalidAccessError. Иначе любой сайт с подпиской мог бы по push выдёргивать человека из его дел. Право на окно браузер даёт ненадолго и только в ответ на действие человека; для push-уведомления такое действие — нажатие на него. Соберём модель: createClients на странице примера повторяет это правило. Предскажите вывод трёх нажатий и одной попытки открыть доску прямо из push.

async function openBoard(clients, url) {
  const tabs = await clients.matchAll({ type: "window", includeUncontrolled: true });
  const tab = tabs.find((client) => client.url === url);
  if (tab) return tab.focus();
  return clients.openWindow(url);
}

async function main() {
  const clients = createClients(["https://board.example/task/17"]);

  const onClick = (event) => openBoard(clients, event.notification.data.url);

  await clients.click(onClick, { title: "Задача 17 готова", data: { url: "https://board.example/task/17" } });
  await clients.click(onClick, { title: "Новая задача 42", data: { url: "https://board.example/task/42" } });
  await clients.click(onClick, { title: "Новая задача 42", data: { url: "https://board.example/task/42" } });

  console.log("push сразу открывает доску, без нажатия:");
  try {
    await openBoard(clients, "https://board.example/task/99");
  } catch (error) {
    console.log("  " + error.name);
  }
}

main();

Первое нажатие нашло открытую вкладку, второе открыло новую, а третье уже переключилось на неё: вкладка, открытая по второму нажатию, теперь в списке, и дубля не появилось. Последняя строка — то же правило, что на стенде: из push окно не открыть, поэтому доска показывает уведомление и ждёт, пока человек нажмёт сам. Сравнение адресов через === в openBoard пока слишком строгое — это задача в конце статьи.

Открыть или показать вкладку воркер может только в ответ на действие человека, и для push это нажатие на уведомление. Само событие push такого права не даёт.

Сводная таблица возможностей по платформам — в статье про манифест и установку, и столбец про push там уже есть. Здесь — то, что из него следует для кода доски.

Главная оговорка — iPhone и iPad. Push там есть с iOS и iPadOS 16.4, и только у веб-приложения, поставленного на экран Домой, с манифестом, где display равен standalone или fullscreen. Из вкладки Safari подписаться нельзя вовсе. Разрешения такого приложения человек потом настраивает в «Настройках» → «Уведомления», как у любого другого, с учётом режимов фокусирования. Для доски это значит, что во вкладке на iPhone кнопка «Сообщать о новых задачах» бессмысленна, честнее подсказка «сначала поставьте доску на экран». С iOS 26 на экран Домой как веб-приложение встаёт любой сайт, даже без манифеста; появляется ли у такого сайта push, я не проверял, а в источниках, которые я читал, об этом ни слова. Полагаться на это рано.

Соберём решение «что показать» функцией. Проверка «открыто как приложение» из статьи про манифест уже лежит на странице примера — ради этого места она сюда и переехала. Предскажите шесть строк; последняя, как в первом примере статьи, зависит от браузера.

function pushUi({ permission, pushInWorker, pushInWindow, appleMobile, matches, fullscreenElement }) {
  if (permission === "denied") return "подсказка «Уведомления запрещены — включите их в настройках сайта»";
  if (appleMobile && !launchedAsApp(matches, fullscreenElement)) return "подсказка «Поставьте доску на экран Домой — тогда появятся уведомления»";
  if (!pushInWorker && !pushInWindow) return "ничего: push в этом браузере нет";
  return "кнопка «Сообщать о новых задачах»";
}

const only = (mode) => (query) => query === "(display-mode: " + mode + ")";

const situations = [
  ["Chrome, вкладка", { permission: "default", pushInWorker: true, pushInWindow: false, appleMobile: false, matches: only("browser") }],
  ["Chrome, человек нажал «Блокировать»", { permission: "denied", pushInWorker: true, pushInWindow: false, appleMobile: false, matches: only("browser") }],
  ["Safari на iPhone, вкладка", { permission: "default", pushInWorker: false, pushInWindow: false, appleMobile: true, matches: only("browser") }],
  ["iPhone, запуск с экрана Домой", { permission: "default", pushInWorker: true, pushInWindow: true, appleMobile: true, matches: only("fullscreen") }],
  ["старый браузер без Push API", { permission: "default", pushInWorker: false, pushInWindow: false, appleMobile: false, matches: only("browser") }]
];

for (const [label, state] of situations) {
  console.log(label + " →", pushUi({ fullscreenElement: null, ...state }));
}

console.log("эта песочница →", pushUi({
  permission: Notification.permission,
  pushInWorker: "PushManager" in window,
  pushInWindow: "pushManager" in window,
  appleMobile: false,
  matches: (query) => window.matchMedia(query).matches,
  fullscreenElement: null
}));

На iPhone одна и та же доска даёт разные ответы во вкладке и с экрана Домой — различает их launchedAsApp, а не версия системы. Разрешение проверяется первым: при denied никакая кнопка не поможет, помочь может только подсказка, где его вернуть. Последняя строка в Chrome — подсказка про запрет, а в Firefox — кнопка, ведь там permission равен default. И это полезное напоминание: default обещает возможность спросить, а не согласие — запрос в той же песочнице, как мы видели в начале статьи, вернёт denied.

Вторая оговорка про Apple — Declarative Web Push. В iOS и iPadOS 18.4 у приложений на экране Домой и в Safari 18.5 на macOS уведомление можно показать вообще без service worker. Подписка делается через window.pushManager, прямо со страницы, а сервер присылает сообщение в стандартном виде, который система понимает сама. Формат — из статьи WebKit, содержимое — доски:

{
  "web_push": 8030,
  "notification": {
    "title": "Вас назначили на задачу 17",
    "body": "«Починить вход» — срок пятница",
    "navigate": "https://board.example/task/17",
    "lang": "ru",
    "app_badge": "1"
  }
}

8030 — номер RFC, который описывает Web Push; здесь он служит меткой формата. navigate — куда вести по нажатию, и notificationclick для этого не нужен. Если воркер у сайта всё же есть, он получает push как обычно и может показать своё уведомление вместо присланного; не показал — система покажет присланное. Зачем это понадобилось, WebKit объясняет прямо: защита от слежки стирает данные давно не посещённых сайтов, в том числе регистрацию воркера, — то самое выселение из статьи «Без сети», — и подписка, привязанная к воркеру, после этого бесполезна. В песочнице учебника "pushManager" in window и в Chrome, и в Firefox даёт false: этого пути у них нет.

Push на iPhone — это сначала «поставьте на экран Домой», и только потом кнопка. Код, который проверяет одно лишь наличие PushManager, на iPhone ошибётся.

Доска прошла всю главу. Она открывается без сети и показывает запасную страницу вместо ошибки браузера, обновляется, не ломая открытых вкладок, ставится на экран и теперь сообщает о новых задачах, даже когда закрыта. На этом кончается рассказ о том, что браузер даёт JavaScript сам: страница, события, формы, хранилище и воркер. Последняя глава части — про чужой код, который берут из npm, когда платформы мало: полка браузера. После неё в части III тот же JavaScript получит типы, и первым делом компилятор пройдётся по коду из части I.