🎧pwa — технология (для Прогрессивных веб-приложение)

статья была создана 2022/10/09

pwa + SPA

Прогрессивное web-приложение — технология в web-разработке, которая визуально и функционально трансформирует сайт в приложение. Статистика говорит о том, что 66 % пользователей не скачивают ни одного приложения в месяц. Большую часть своего времени — примерно 85 % — пользователь проводит в пяти любимых приложениях.

PWA является гибридным решением и позволяет открыть приложение с помощью мобильного браузера. При этом полностью сохраняется функциональность нативного приложения:

• отправка push-уведомлений (кроме устройств под управлением iOS);
• работа в режиме офлайн;
• доступ к аппаратному обеспечению устройства (с ограничениями);
• установка ярлыка (иконки) на рабочий стол мобильного устройства, визуально не отличающегося от ярлыка нативного приложения, и пр.

URL источник — https://web.dev/learn/pwa/service-workers?hl=ru

Вот различные варианты обновления ресурсов:

• Полное обновление: в этом случае каждый раз, когда вы вносите в приложение изменение, даже незначительное, ваш код снова загружает все ресурсы в кеш.
• Частичное обновление: в этом подходе вы создаете метод для определения того, какие активы были обновлены, и обновляете только их, с участием пользователя или без него.
• Непрерывное обновление: с помощью этого метода ваши ресурсы будут автоматически проверяться и обновляться при каждом использовании PWA индивидуально.

Что мне следует использовать?

Вот общая рекомендация по хранению ресурсов:

• Для сетевых ресурсов, необходимых для загрузки вашего приложения, используйте API Cache Storage (часть Service Worker ).
• Для файлового контента используйте частную файловую систему Origin (OPFS).
• Для других данных используйте IndexedDB (с оберткой promises ).

Браузеры могут удалять ресурсы из-за нехватки места или после нескольких недель бездействия, если пользователь использует ваше PWA в браузере. На некоторых платформах, если пользователь установит ваше PWA, выселения не произойдет. Там, где это возможно, код может запросить постоянное хранилище через API, чтобы избежать такого вытеснения.

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then((persistent) => {
    if (persistent) {
      console.log("Данные в безопасности, браузер их не удалит без спроса.");
    } else {
      console.log("Браузер отказал в постоянном хранении.");
    }
  });
}

if (navigator.storage && navigator.storage.estimate) {
  navigator.storage.estimate().then((estimate) => {
    const usedMB = (estimate.usage / (1024 * 1024)).toFixed(2);
    const quotaMB = (estimate.quota / (1024 * 1024)).toFixed(2);
    const percent = ((estimate.usage / estimate.quota) * 100).toFixed(2);

    console.log(`Использовано: ${usedMB} МБ из ${quotaMB} МБ (${percent}%)`);
  });
}

Папка, в которой находится ваш сервис-воркер, определяет область его действия. Сервис-воркер, расположенный по адресу example.com/my-pwa/sw.js , может управлять любой навигацией по пути my-pwa или под ним, например, example.com/my-pwa/demos/ . Сервис-воркеры могут управлять только элементами (страницами, воркерами, совместно именуемыми «клиентами»), находящимися в его области действия. Эта область действия распространяется на вкладки браузера и окна PWA.

В каждой области разрешен только один сервис-воркер. Когда сервис-воркер активен и запущен, обычно доступен только один экземпляр, независимо от количества клиентов (окон PWA или вкладок браузера) в памяти.

⚠ Внимание: Расположите область действия сервис-воркера как можно ближе к корню приложения, чтобы он мог перехватывать все запросы, связанные с вашим PWA. Не помещайте его, например, в папку JavaScript и не загружайте из CDN.

В Safari реализовано более сложное управление областями действия, известное как разделы, которое влияет на работу областей действия с кросс-доменными iframe. Подробнее о реализации в WebKit см. в публикации в блоге .

Жизненный цикл

У Service Worker есть жизненный цикл, который определяет, как они устанавливаются, отдельно от установки PWA.

Жизненный цикл сервис-воркера начинается с его регистрации. Затем браузер пытается загрузить и проанализировать файл сервис-воркера. Если анализ успешен, срабатывает событие install сервис-воркера. Событие install срабатывает только один раз.

Установка Service Worker происходит незаметно, без разрешения пользователя, даже если пользователь не устанавливает PWA. API Service Worker доступен даже на платформах, не поддерживающих установку PWA, например, в Safari и Firefox на настольных устройствах.

★ Совет: Регистрация и установка сервис-воркера — это связанные, но отдельные события. Регистрация происходит, когда страница запрашивает сервис-воркер, вызывая метод register() . Установка происходит, когда зарегистрированный сервис-воркер существует, может быть проанализирован как JavaScript и не вызывает ошибок при первом выполнении.

После установки сервис-воркер необходимо активировать, прежде чем он сможет управлять своими клиентами, включая ваш PWA. Когда сервис-воркер готов управлять своими клиентами, срабатывает событие activate . Однако по умолчанию активированный сервис-воркер не может управлять страницей, на которой он зарегистрирован, пока вы не перезагрузите её или не откроете PWA снова.

Вы можете прослушивать события в глобальной области действия Service Worker, используя объект self :

serviceworker.js

// This code executes in its own worker or thread
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});

Обновление сервисного работника

Service Workers обновляются, когда браузер обнаруживает, что Service Worker, управляющий клиентом, и новая версия файла Service Worker с сервера отличаются на один байт.

⚠ Внимание: при обновлении сервис-воркера сохраните имя файла прежним. Если вы измените имя, даже добавив хэши файлов, браузер никогда не получит новую версию.

После успешной установки новый сервис-воркер ожидает активации до тех пор, пока старый сервис-воркер не перестанет управлять клиентами. Это состояние называется «ожиданием», и именно так браузер обеспечивает работу только одной версии сервис-воркера одновременно.

Обновление страницы или повторное открытие PWA не приведёт к передаче управления новому сервис-воркеру. Пользователь должен закрыть или выйти из всех вкладок и окон, использующих текущий сервис-воркер, а затем вернуться обратно, чтобы передать управление новому сервис-воркеру. Подробнее см. в разделе «Жизненный цикл сервис-воркера» .

Жизненный цикл сервисного работника — https://web.dev/articles/service-worker-lifecycle?hl=ru