Что делает ваше веб-приложение быстрее? (часть 4, Браузер и прогрессивные улучшения)
Если вы подошли непосредственно к этой истории, то предлагаю ознакомиться с частью 1, частью 2 и частью 3 этой серии.
Итак, в прошлый раз я оставил вас говоря,
«Будьте неотличимы от нативных приложений».
Как веб-разработчики, нам удалось убедить пользователей оставить собственные настольные приложения в пользу веб-приложений. Сейчас лишь немногие используют собственный почтовый клиент через Gmail. Но мы по-прежнему не можем заставить пользователя оставить родное мобильное приложение для мобильного веб-приложения.
Это связано с тем, что нативное приложение кажется более удобным, гладким и отзывчивым, чем веб-приложение. Нативное приложение имеет Push-уведомление для участия, хранилище устройства для автономного доступа и многое другое. Но это быстро меняется, поскольку Интернет может делать больше вещей, проверьте что Интернет может делать сегодня.
* Прогрессивное веб-приложение
PWA (прогрессивное веб-приложение) — это следующий шаг к тому, чтобы веб-приложение стало более родным для устройства.
PWA предоставляет вам доступ к собственным возможностям, таким как:
- Автономное хранилище (Service Worker)
- Push-уведомление (сервисный работник)
- Установить как собственный (манифест приложения)
- Открытые ссылки на приложения (манифест приложения)
Чтобы использовать PWA, вы должны использовать https
PWA имеет 2 основных Service Worker и Web App Manifest.
1. Работник службы:
Сервисные работники по сути действуют как прокси-серверы, которые находятся между веб-приложениями, браузером и сетью (если они доступны). Они предназначены, среди прочего, для обеспечения эффективного автономного взаимодействия, перехвата сетевых запросов и выполнения соответствующих действий в зависимости от доступности сети, а также для обновления активов, находящихся на сервере. Они также предоставят доступ к push-уведомлениям и API фоновой синхронизации.
Чтобы узнать больше о сервис-воркере, перейдите на MDN.
2. Манифест веб-приложения:
Манифест веб-приложения предоставляет информацию о веб-приложении в текстовом файле JSON, необходимую для загрузки веб-приложения и представления его пользователю аналогично собственному приложению (например, для установки на домашний экран устройства, предоставляя пользователям более быстрый доступ и более богатый опыт). Манифесты PWA включают его имя, автора, значок(и), версию, описание и список всех необходимых ресурсов (среди прочего).
Чтобы узнать больше о манифесте веб-приложения, перейдите по ссылке MDN.
Другие улучшения:
Как мы знаем, javascript выполняет все операции в одном потоке. Это становится проблемой при выполнении более интенсивных задач, таких как обработка изображений. Чтобы преодолеть эту ситуацию, мы можем передать эту задачу Web Worker, которая будет выполнять эту задачу в фоновом потоке. Вы не можете трогать какой-либо элемент DOM из Web Worker и передавать данные только с помощью сообщений. Чтобы узнать больше о Web Worker, перейдите на MDN.
