Без сети: оболочка, запасная страница и честный onLine

Маршрутизатор прошлой статьи делил запросы по адресу: /assets/ — из кеша, /api/ — старое и обновить фоном, а всё остальное — «сначала сеть». Страница попала в последнюю ветку просто потому, что её адрес не начинается ни с того, ни с другого. Но запрос за страницей особенный. В коде его никто не пишет: он случается, когда человек набирает адрес, жмёт ссылку или перезагружает вкладку, и делает его браузер — раньше, чем появятся код, стили и данные. Такой запрос называют навигационным.

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

const page = new Request("https://board.example/");

console.log("метод:", page.method);
console.log("режим:", page.mode);
console.log("назначение:", JSON.stringify(page.destination));

try {
  new Request("https://board.example/", { mode: "navigate" });
} catch (error) {
  console.log("режим navigate руками:", error.name);
}

У запроса, собранного в коде, режим cors — обычный запрос за ресурсом, а destination пуст: браузер не знает, подо что пойдёт ответ. У настоящих запросов страницы там стоит script, style, image, а у навигации — document. И режим navigate конструктор не принимает вовсе. Это не причуда песочницы: такой режим ставит только сам браузер, когда ведёт вкладку на новый адрес. Подделать навигацию из кода нельзя, поэтому в миниатюрах ниже мы будем изображать её обычным полем.

Теперь главное: что будет, если на навигацию воркер не ответит вовсе. Уберём из воркера прошлой статьи последнюю ветку, «всё остальное — сначала сеть». Так воркер часто и пишут, когда цель — ускорить загрузку, а не пережить метро: ветки для /assets/ и /api/ есть, для страницы нет:

self.addEventListener("fetch", (event) => {
  if (event.request.method !== "GET") return;

  const path = new URL(event.request.url).pathname;
  if (path.startsWith("/assets/")) event.respondWith(cacheFirst(event.request));
  else if (path.startsWith("/api/")) event.respondWith(staleWhileRevalidate(event));
});

Открываем доску дважды, чтобы воркер встал у руля и набил кеш, а потом выключаем сеть и просим страницу заново. В app.js ничего нового — регистрация и отрисовка из проекта:

navigator.serviceWorker.register("/sw.js");

async function show() {
  console.log("controller:", navigator.serviceWorker.controller ? "есть" : "нет");

  const response = await fetch("/api/tasks.json");
  const data = await response.json();
  // ...рисуем карточки, как в проекте части II...
  console.log("задач на экране:", data.tasks.length);
}

show();

Ни одна навигация не дошла. Воркер при этом жив и здоров, кеш полон, код и стили в нём лежат — но запроса за страницей он не взял, и браузер повёз его сам, в сеть, которой нет. Пользователь получил свою страницу ошибки, и неважно, что половина сайта лежала у него на диске.

С последней веткой, как в прошлой статье, главная страница без сети открылась бы: «сначала сеть» нашла бы её копию в кеше — это я проверил тем же стендом. А карточка /task/17, которой в кеше нет, всё равно кончается страницей ошибки, только другой: «сначала сеть» бросает ошибку дальше, и Chrome пишет net::ERR_FAILED. Нужна своя ветка — та, что знает, что перед ней страница, и умеет отдать хоть что-то.

Если на навигационный запрос воркер не вызвал respondWith, браузер едет в сеть сам. «Воркер установлен, кеш полон» и «сайт открывается без сети» — разные утверждения, и первое не влечёт второго.

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

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

Вот sw.js доски. Главных правок с прошлой статьи три: в списке оболочки появилась запасная страница, у обработчика fetch — первая ветка, для навигации, а ветка «всё остальное — сначала сеть» ушла: страницы теперь ловит навигация, а прочим редким запросам воркер не нужен.

const VERSION = "board-v3";
const OFFLINE = "/offline.html";
const SHELL = ["/", OFFLINE, "/assets/app.3f9a1c2b.js", "/assets/board.5c7d0a11.css"];

self.addEventListener("install", (event) => {
  event.waitUntil(caches.open(VERSION).then((cache) => cache.addAll(SHELL)));
});

self.addEventListener("fetch", (event) => {
  // навигацию ловим первой и отдельно: у неё свои правила
  if (event.request.mode === "navigate") {
    event.respondWith(navigation(event.request));
    return;
  }
  if (event.request.method !== "GET") return;

  const path = new URL(event.request.url).pathname;
  if (path.startsWith("/assets/")) event.respondWith(cacheFirst(event.request));
  else if (path.startsWith("/api/")) event.respondWith(staleWhileRevalidate(event));
});

async function navigation(request) {
  const cache = await caches.open(VERSION);
  try {
    const fresh = await fetch(request);
    cache.put(request, fresh.clone());
    return fresh;
  } catch (error) {
    // сети нет: сперва этот же адрес из кеша, потом общая запасная страница
    return (await cache.match(request)) || (await cache.match(OFFLINE));
  }
}

// activate, cacheFirst и staleWhileRevalidate — из прошлой статьи, без изменений

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

$ cat board/offline.html

Ссылка на доску здесь не для красоты: доска-то в кеше лежит, и человеку есть куда уйти с тупиковой страницы. Стили берутся те же, с хешем в имени, — они в оболочке, значит, запасная страница не будет выглядеть как документ из девяностых.

Что происходит при первой загрузке, видно в журнале сервера:

$ node serve.mjs board 3304

Первые шесть строк — обычная загрузка: страница, код, стили, данные, favicon.ico с честным 404 и sw.js, который запросила регистрация. А дальше те же файлы едут по второму разу, и с ними offline.html, которого страница не просила ни разу. Это addAll в install набивает кеш: запасная страница скачана заранее, в этом весь смысл.

Соберём эту ветку миниатюрой — поддельная сеть, кеш и все три стратегии с прошлой статьи уже лежат на странице примера.

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

const OFFLINE = "https://board.example/offline.html";

// браузер сам помечает навигационный запрос режимом "navigate";
// конструктор Request такой режим не принимает, поэтому здесь mode — обычное поле
const isNavigation = (request) => request.mode === "navigate";

async function precache(cache, network, urls) {
  for (const url of urls) {
    cache.put({ method: "GET", url }, await network.fetch(url));
  }
  console.log("в кеше оболочка:", cache.keys().length);
}

async function navigationFirst(request, cache, network, ms) {
  try {
    const fresh = await withTimeout(network.fetch(request.url), ms);
    cache.put(request, fresh);
    return { body: fresh, from: "сеть" };
  } catch (error) {
    const hit = cache.match(request);
    if (hit) return { body: hit, from: "кеш" };

    const spare = cache.match({ method: "GET", url: OFFLINE });
    if (spare) return { body: spare, from: "запасная страница" };
    return { body: "страницу рисует браузер", from: "воркеру ответить нечем" };
  }
}

async function handleFetch(request, cache, network) {
  if (isNavigation(request)) return navigationFirst(request, cache, network, 200);
  if (request.method !== "GET") {
    return { body: await network.fetch(request.url), from: "сеть, мимо кеша" };
  }
  const strategy = chooseStrategy(request);
  if (strategy === networkFirst) return networkFirst(request, cache, network, 200);
  return strategy(request, cache, network);
}

async function main() {
  const cache = createCache();
  const network = createNetwork();

  await precache(cache, network, [
    "https://board.example/",
    OFFLINE,
    "https://board.example/assets/app.3f9a1c2b.js"
  ]);

  const home = { method: "GET", url: "https://board.example/", mode: "navigate" };
  const card = { method: "GET", url: "https://board.example/task/17", mode: "navigate" };
  const js = { method: "GET", url: "https://board.example/assets/app.3f9a1c2b.js", mode: "cors" };

  const ask = async (label, request) => {
    const answer = await handleFetch(request, cache, network);
    console.log(label + ":", answer.body, "|", answer.from);
  };

  await ask("1 доска", home);

  network.setMode("offline");

  await ask("2 доска", home);
  await ask("3 карточка", card);
  await ask("4 код", js);
}

main();

Второй запрос — доска из кеша: её адрес лежал в оболочке. Третий — карточка, которую никогда не открывали: в кеше её нет, и вместо страницы ошибки приезжает запасная. Четвёртый напоминает, что остальные ветки никуда не делись и код по-прежнему берётся из кеша молча.

Порядок двух последних проверок стоит проговорить. Сначала спрашиваем кеш про этот самый адрес и только потом достаём общую заглушку: человеку, который вчера открывал /task/17, лучше показать вчерашнюю карточку, чем честное «ничего нет». А если в кеше пусто и запасной страницы не нашлось, отдавать нечего: в настоящем воркере respondWith получит undefined, и браузер покажет страницу ошибки. Обратите внимание, что это не то же самое, что вовсе не вызвать respondWith, как в начале статьи: там запрос возвращается браузеру и при живой сети доезжает, а здесь он уже отдан воркеру, и ответ «ничего» кончается ошибкой даже при работающей сети (в Chrome — net::ERR_FAILED). Потому запасную и кладут в оболочку.

Теперь то же самое по-настоящему. Доска с новым sw.js открывается дважды с сетью, потом я гашу сервер и вдобавок выключаю сеть самой вкладке и воркеру — уйти наружу некуда, отвечать может только кеш.

$ node drive.mjs http://127.0.0.1:3304/ "загрузка 3, доска без сети" offline
$ node drive.mjs http://127.0.0.1:3304/task/17 "загрузка 4, карточка без сети" offline

Доска открылась без сети целиком, со всеми тремя задачами: страницу и код отдал кеш, данные — тоже, их положила туда стратегия «отдать старое и обновить фоном» ещё при загрузках с сетью. А /task/17, которого в кеше не было, встретил не динозавр, а наша запасная страница — это видно по заголовку вкладки.

«Открывается без сети» проверяют на свежей вкладке, набрав адрес заново, а не кнопками «назад» и «вперёд»: страница, которую вы только что смотрели, может вернуться из кеша «назад-вперёд», и это будет не ваш воркер. А сеть у себя на localhost проще всего «выключить», остановив сервер: выключенный Wi-Fi тут не поможет, до петли запросы доходят и без него.

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

async function serverAnswers(network) {
  try {
    await withTimeout(network.fetch("https://board.example/api/ping"), 200);
    return true;
  } catch (error) {
    return false;
  }
}

async function main() {
  const network = createNetwork();
  network.setMode("offline"); // рубильник сети — тот же, что в прошлой статье

  console.log("navigator.onLine:", navigator.onLine);
  console.log("сервер отвечает:", await serverAnswers(network));
}

main();

Две строки — и обе правдивы. navigator.onLine отвечает на вопрос про интерфейс: подключена ли машина хоть к какой-нибудь сети. За этим подключением может быть роутер без интернета, гостиничный Wi-Fi с формой входа, упавший сервер, сломанный DNS или прокси, который режет ваш домен, — во всех случаях свойство скажет true, а запрос не дойдёт.

Обратное значение надёжнее, но и оно не приговор. Как решать, «в сети» ли машина, каждая система придумывает сама: в Windows, например, это значит «удалось достучаться до проверочного сервера Microsoft», и файрвол или VPN, которые его режут, дают false при работающем интернете. А до вашего собственного localhost запрос доходит и вовсе без сети. Поэтому флаг годится на подсказку — значок в углу, надпись «похоже, связи нет», — но не на решение: решает ответ на настоящий запрос.

Надпись «нет сети» ставят после неудачного запроса, а не по значению флага. Иначе получается интерфейс, который врёт в обе стороны: обещает работу там, где её нет, и пугает пользователя там, где всё в порядке.

window.addEventListener("offline", () => console.log("событие offline, а свойство:", navigator.onLine));
window.addEventListener("online", () => console.log("событие online, а свойство:", navigator.onLine));

// события шлём сами: настоящие приходят от браузера, когда меняется интерфейс
window.dispatchEvent(new Event("offline"));
window.dispatchEvent(new Event("online"));

В прошлой статье мы сказали: запись в кеше живёт, пока её не удалит ваш код. Пора добавить вторую половину: или пока браузер не выселит данные сайта целиком.

Про своё хранилище можно спросить у navigator.storage: persisted() — защищено ли оно от выселения, persist() — просьба защитить, estimate() — сколько занято и сколько разрешено. В песочнице учебника все три отклоняются TypeError (происхождение непрозрачное, хранилища нет), поэтому дальше — листинг с выводом, снятым на доске с localhost.

async function main() {
  console.log("уже защищено:", await navigator.storage.persisted());
  console.log("попросили защиту:", await navigator.storage.persist());

  const { usage, quota } = await navigator.storage.estimate();
  console.log("занято, байт:", usage);
  console.log("разрешено, МБ:", Math.round(quota / 1024 / 1024));
  console.log("кеши сайта:", (await caches.keys()).join(", "));
}

main();

Просьбу отклонили. Ничего личного: профиль чистый, сайт открыт второй раз в жизни. Chrome решает по своим признакам — установлено ли приложение на устройство, в закладках ли сайт, разрешены ли ему уведомления, часто ли им пользуются. Safari с 17-й версии тоже решает сам, и один из его признаков — открыт ли сайт как приложение с экрана Домой. Firefox вместо эвристики спрашивает разрешение у пользователя. Общее правило одно: persist() — это просьба, а не команда, и отказ — нормальный ответ, к которому код обязан быть готов.

Восемь с небольшим килобайт — вся наша оболочка вместе с копией данных. Число в мегабайтах — оценка того, сколько браузер готов отдать этому происхождению; оно зависит от свободного места и от браузера, у вас будет другое. Дело не в цифре, а в том, что она конечна: когда на диске становится тесно, браузер начинает выселять сайты, и первым уходит тот, к кому давно не заходили.

Жёстче всех к забытым сайтам WebKit. Данные, записанные скриптом сайта в Safari, — localStorage, IndexedDB, кеши воркера и саму его регистрацию — он удаляет после семи дней пользования браузером без взаимодействия с сайтом, то есть без единого нажатия или касания на его страницах. Считаются дни, когда человек работал в Safari, а не календарные; это часть защиты от межсайтового отслеживания, а она включена по умолчанию. У сайта, поставленного на домашний экран, счёт дней свой, отдельный от Safari: пока приложением пользуются, счётчик не набегает и данные остаются на месте.

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

И последнее, чего доска пока не умеет, — работать без сети на запись. Пока сети нет, новую карточку некуда отправить, и путей два. Отложить отправку до возвращения связи умеет Background Sync, но он есть только в браузерах на Chromium, и строить на нём единственную дорогу нельзя. Значит, остаётся второй путь: складывать изменения в очередь у себя и досылать их самому, разбираясь с порядком, повторами и чужими правками. Это отдельная большая тема, и разберём мы её там, где без неё совсем никак, — в пятой части, про мобильные приложения.

Доска открывается без сети, показывает запасную страницу вместо динозавра и не верит флагу onLine. Осталась беда, которая приходит вместе с хорошей новостью: вы выпустили новую версию. Ветка навигации и запасная страница уезжают в следующую статью готовыми — там выясним, почему новый воркер неделями не может сменить старого и чем за спешку берёт skipWaiting.