Этап 4: PWA и пуши — service worker, Web Push с VAPID, баннер установки
Сервер: пакет push на webpush-go (третья и последняя прямая зависимость),
подписка устройства, правило ADR-023 «пуш только молчащему устройству и только
один» через атомарный захват push_pending, удаление подписки на 404 и 410,
TTL сутки, urgency normal. В нагрузке только {title, body, chat} — тело
собирается из константы, плейнтекст туда не попадает даже по ошибке.
Клиент: service worker с версионированным кэшем оболочки и никогда — /api/*,
push и notificationclick, подписка на VAPID-ключ сервера, запрос разрешения
после первого отправленного сообщения, разделы настроек «уведомления»
и «установить приложение», баннер установки на iOS.
ADR-045: пуш адресован получателю — по букве ADR-023 он уходил бы и молчащему
устройству отправителя с бессмысленным заголовком из собственного ника.
ADR-047: сервер ходит на endpoint подписки, который выбирает браузер. Проверка
«только https» обходилась редиректом, а имя могло смотреть внутрь сети — теперь
запрет редиректов и проверка разрешённого адреса на уровне сокета.
ADR-048: пределы отправки — недоступный push-сервис одного аккаунта больше
не съедает пуши всего сервера.
ADR-049: явно выключенные уведомления сами не включаются обратно.
Попутно: webpush-go дописывает набивку в переданный срез, а одна нагрузка
уходила всем устройствам сообщения — гонка, пойманная go test -race.
Теперь у каждого задания своя копия.
Приёмка на боевом: подписки, hasPush, чужое устройство, Origin, оболочка
из девяти файлов, Service-Worker-Allowed. Отдельно шесть непубличных адресов
и endpoint на 3 КиБ — все отбиты.
Чеклист ручной проверки на iPhone и Android — в docs/plan.md.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015DbCjVfTFq4ZFG8juD45YJ
This commit is contained in:
Claude Opus 5
@@ -12,6 +12,11 @@ export function wide() {
|
||||
return matchMedia(DESKTOP).matches;
|
||||
}
|
||||
|
||||
// INSTALL_IOS — текст про установку на iOS. Он один и тот же в баннере
|
||||
// над списком чатов и в настройках (docs/ui.md), поэтому и живёт в одном
|
||||
// месте.
|
||||
export const INSTALL_IOS = "уведомления на iOS работают только у установленного приложения: поделиться → на экран «домой»";
|
||||
|
||||
export function el(tag, className, text) {
|
||||
const node = document.createElement(tag);
|
||||
if (className) {
|
||||
|
||||
+110
-4
@@ -1,15 +1,30 @@
|
||||
// Настройки — docs/ui.md, «Настройки». На этом этапе только разделы,
|
||||
// которые уже работают: кто ты, смена пароля, выход, удаление аккаунта.
|
||||
// Уведомления, устройства, история и установка приложения — дальше по плану.
|
||||
// которые уже работают: кто ты, уведомления, установка приложения, смена
|
||||
// пароля, выход, удаление аккаунта. Устройства и история — дальше по плану.
|
||||
|
||||
import { ApiError } from "../api.js";
|
||||
import { fingerprintGroups } from "../crypto.js";
|
||||
import { button, confirmPanel, el, field, message, setError, setNote } from "./dom.js";
|
||||
import * as pwa from "../pwa.js";
|
||||
import { INSTALL_IOS, button, confirmPanel, el, field, message, setError, setNote } from "./dom.js";
|
||||
|
||||
// Состояния уведомлений и инструкция установки — docs/ui.md, «Настройки».
|
||||
const NOTIFICATIONS = {
|
||||
on: "включены",
|
||||
off: "выключены",
|
||||
denied: "запрещены в браузере",
|
||||
};
|
||||
|
||||
const INSTALL_HINT = "поделиться → на экран «домой»";
|
||||
|
||||
export function renderSettings(root, ctx) {
|
||||
root.append(head(ctx));
|
||||
const body = el("div", "body settings");
|
||||
body.append(identity(ctx), passwordBlock(ctx), exitBlock(ctx), deleteBlock(ctx));
|
||||
body.append(identity(ctx), notificationsBlock(ctx));
|
||||
const install = installBlock();
|
||||
if (install !== null) {
|
||||
body.append(install);
|
||||
}
|
||||
body.append(passwordBlock(ctx), exitBlock(ctx), deleteBlock(ctx));
|
||||
root.append(body);
|
||||
}
|
||||
|
||||
@@ -31,6 +46,97 @@ function identity(ctx) {
|
||||
return box;
|
||||
}
|
||||
|
||||
// notificationsBlock — «уведомления»: состояние и одна кнопка
|
||||
// (docs/ui.md, «Настройки»). Состояний три; «запрещены в браузере» —
|
||||
// это и отклонённое разрешение, и браузер без уведомлений, и сервер без
|
||||
// VAPID-ключа: включать нечем, кнопки нет (ADR-046).
|
||||
function notificationsBlock(ctx) {
|
||||
const box = block("уведомления");
|
||||
const status = el("p", "state", "");
|
||||
// На iOS вне установленного приложения кнопки нет: там пуши работают
|
||||
// только у приложения на экране «Домой» (ADR-011).
|
||||
const ios = pwa.iosBrowser();
|
||||
const action = button("включить");
|
||||
action.hidden = true;
|
||||
const note = message();
|
||||
if (ios) {
|
||||
box.append(status, el("p", "install", INSTALL_IOS), note);
|
||||
} else {
|
||||
box.append(status, action, note);
|
||||
}
|
||||
|
||||
let mode = "denied";
|
||||
const paint = async () => {
|
||||
if (ios) {
|
||||
status.textContent = NOTIFICATIONS.off;
|
||||
return;
|
||||
}
|
||||
mode = await pwa.notifications(await vapidKey(ctx));
|
||||
status.textContent = NOTIFICATIONS[mode];
|
||||
action.textContent = mode === "on" ? "выключить" : "включить";
|
||||
action.hidden = mode === "denied";
|
||||
};
|
||||
|
||||
action.addEventListener("click", async () => {
|
||||
if (action.disabled) {
|
||||
return;
|
||||
}
|
||||
action.disabled = true;
|
||||
setNote(note, "");
|
||||
try {
|
||||
if (mode === "on") {
|
||||
await pwa.disable();
|
||||
} else {
|
||||
await pwa.enable(await vapidKey(ctx));
|
||||
}
|
||||
} catch (err) {
|
||||
setError(note, ctx.errorText(err));
|
||||
} finally {
|
||||
action.disabled = false;
|
||||
await paint();
|
||||
}
|
||||
});
|
||||
|
||||
paint();
|
||||
return box;
|
||||
}
|
||||
|
||||
// vapidKey — публичный ключ сервера для подписки (docs/protocol.md,
|
||||
// «Публичные»). Конфигурации нет — подписаться нечем.
|
||||
async function vapidKey(ctx) {
|
||||
try {
|
||||
return (await ctx.ensureConfig()).vapidPublicKey ?? "";
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
// installBlock — «установить приложение» (docs/ui.md, «Настройки»).
|
||||
// Кнопка есть, если поймано beforeinstallprompt; на iOS вместо неё
|
||||
// инструкция. Устанавливать нечего — раздела нет.
|
||||
function installBlock() {
|
||||
const ios = pwa.iosBrowser();
|
||||
if (!ios && !pwa.installable()) {
|
||||
return null;
|
||||
}
|
||||
const box = block("установить приложение");
|
||||
if (ios) {
|
||||
box.append(el("p", "install", INSTALL_HINT));
|
||||
return box;
|
||||
}
|
||||
const action = button("установить");
|
||||
action.addEventListener("click", () => {
|
||||
// Приглашение одноразовое: показали — устанавливать этим разделом
|
||||
// больше нечего, и раздела нет (docs/ui.md, «Настройки»). Раздел
|
||||
// уходит сразу: дальше человек отвечает браузеру, а не нам, и ждать
|
||||
// его ответа кнопке незачем.
|
||||
pwa.install();
|
||||
box.remove();
|
||||
});
|
||||
box.append(action);
|
||||
return box;
|
||||
}
|
||||
|
||||
function passwordBlock(ctx) {
|
||||
const box = block("сменить пароль");
|
||||
const form = el("form", "form");
|
||||
|
||||
+27
-1
@@ -1,7 +1,8 @@
|
||||
// Каркас: сайдбар со списком чатов и место под экран — docs/ui.md, «Каркас»
|
||||
// и «Список чатов».
|
||||
|
||||
import { el, mark } from "./dom.js";
|
||||
import * as pwa from "../pwa.js";
|
||||
import { INSTALL_IOS, clear, el, mark } from "./dom.js";
|
||||
import { mount } from "./chats.js";
|
||||
|
||||
// frame отдаёт корень, место под экран и отписку списка чатов.
|
||||
@@ -23,6 +24,12 @@ function side(ctx, active) {
|
||||
brand.append(mark(), el("span", null, "bare"));
|
||||
nav.append(brand);
|
||||
|
||||
// Баннер установки — над списком чатов (docs/ui.md, «Баннер установки»).
|
||||
// Место под него занимается сразу, содержимое приезжает из meta.
|
||||
const place = el("div", "banner-slot");
|
||||
nav.append(place);
|
||||
banner(place);
|
||||
|
||||
const list = el("div", "list");
|
||||
const add = el("button", "item item--new", "+ новый чат");
|
||||
add.type = "button";
|
||||
@@ -41,3 +48,22 @@ function side(ctx, active) {
|
||||
|
||||
return { nav, dispose: mount(items, ctx, active) };
|
||||
}
|
||||
|
||||
// banner — баннер установки на iOS: пуши там работают только
|
||||
// у установленного приложения (ADR-011). Крестик закрывает его насовсем.
|
||||
async function banner(place) {
|
||||
if (!pwa.iosBrowser() || await pwa.bannerHidden()) {
|
||||
return;
|
||||
}
|
||||
const box = el("div", "banner");
|
||||
box.append(el("p", "banner__text", INSTALL_IOS));
|
||||
const close = el("button", "banner__close", "×");
|
||||
close.type = "button";
|
||||
close.setAttribute("aria-label", "закрыть");
|
||||
close.addEventListener("click", () => {
|
||||
clear(place);
|
||||
pwa.hideBanner();
|
||||
});
|
||||
box.append(close);
|
||||
place.append(box);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user