Превратите веб-сайт Next.js в PWA с помощью Workbox, часть 1. Манифест веб-приложения и кэширование / поддержка в автономном режиме

Введение: PWA v.s. Родное приложение

Действительно ли нам нужно изучать собственное приложение для веб-разработчиков? Там есть

Вам нужно выучить новые языки (Java, Kotlin, Swift и т. Д.)
Согласно исследованию comScore за 2019 год, Google и Facebook доминируют в экосистеме мобильных приложений в Индонезии. Трудно заставить пользователей тратить время на новые приложения.

Тем не менее, приложения по-прежнему обеспечивают большую часть мобильного времени на всех рынках. Что мы можем сделать для веб-разработчиков?

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

Установка как родное приложение
Кэш / офлайн-поддержка
Фоновая синхронизация
Веб-push-уведомление
Родные функции устройства (камера и т. Д.)

СОДЕРЖАНИЕ

Мы уже рассказывали о разработке Next.js в нескольких темах раньше. Не стесняйтесь посещать следующие темы, если вам нужно.

Создание одностраничного приложения с помощью React и Django. Часть 8 - Реализация веб-сайта статической визуализации…
В этой статье рассказывается, как создать механизм восстановления статического содержимого для Next.js в проекте Django на… medium.com

В этой статье представлены следующие темы.

Добавить манифест веб-приложения в приложение Next.js
Включить кеширование / поддержку в автономном режиме
Введите критерии для баннера установщика приложения

Добавить манифест веб-приложения в приложение Next.js

Как сделать веб-приложение доступным для установки? Есть два шага.

Шаг 1. Введите информацию для кнопки главного экрана.

Первый шаг - создать manifest.json и поместить в него всю информацию.

Следующий снимок экрана - Android Chrome. Он показывает, что мы можем настроить значок, имя, краткое имя, цвет темы и цвет фона для PWA.

Шаг 2. Свяжите манифест приложения в заголовке.

Следующим шагом будет использование файла манифеста. Для приложения Next.js мы можем создать настраиваемый компонент и импортировать next / head.

Для Android мы можем поместить ссылку в заголовок
Для iOS используйте meta вместо ссылки.

Включить кеширование / поддержку в автономном режиме

Чтобы включить автономную поддержку, нужно выполнить четыре шага.

Шаг 1. Добавьте шаблон (sw.js) сервис-воркера с Workbox.

1. Предварительное кэширование: кешируйте список ресурсов после регистрации сервисного работника.

2. Стратегии маршрутизации (кэш выполнения)

Сначала кеш: для файлов изображений
Устаревший при повторной проверке: для файлов JS, CSS
Сначала сеть: для файлов HTML

Шаг 2. Создайте service-worker.js

Установите необходимые пакеты

npm install -s next-offline

Создайте next.config.js в корневой папке

Выполните следующую команду, чтобы создать сервис-воркер

next build && next export

Шаг 3. Зарегистрируйте сервис-воркер в компоненте React.

Поместите регистрацию и отмену регистрации в useEffect.

Шаг 4. Проверьте сервисного работника.

Мы можем открыть инструмент разработчика, чтобы обнаружить события сервис-воркера после развертывания.

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

Введите критерии для баннера установщика приложения

Chrome автоматически отображает баннер, когда приложение соответствует следующим критериям.

1. Манифест веб-приложения со следующими элементами: short_name, name, значок 144 x 144 (image / png), start_url.

2. На вашем сайте зарегистрирован сервисный работник.

3. Отключено от HTTPS

4. Посещали как минимум дважды, с промежутком не менее пяти минут между посещениями.

Демо-сайт

Ежедневное обучение непрофессионала

Ежедневное обучение ALayman
Ежедневное обучение - это статьи, задания или видео для людей, которые также самостоятельно занимаются программированием. daily-learning.herokuapp.com

использованная литература

Резюме

Спасибо за вашего пациента. Я Шон. Я работаю программистом.

Эта статья - моя заметка. Пожалуйста, не стесняйтесь давать мне совет, если есть ошибки. Жду ваших отзывов.

Страница Facebook для статей

Обыватель
Обыватель. 81 лайк. Страница с информацией о языках программирования, алгоритмах, базах данных, DevOps и… www.facebook.com

Последний побочный проект: Daily Learning