Создайте простое прогрессивное веб-приложение (PWA)

Предварительные требования

Node.js
Nodemon
выражать
Axios
Асинхронный / Ожидание
Https://jsonplaceholder.typicode.com/ (Fake Rest API)
Браузер Chrome

Ссылка на GitHub: https://github.com/mp5maker/progresssive-web-app

Чего вам следует ожидать?

Мы рассмотрим пример с использованием http: // localhost: 4000 /

Почему мы вообще должны использовать прогрессивное веб-приложение?

Чтобы обеспечить удобство использования нативных приложений для планшетов и мобильных устройств
Добавить офлайн-поддержку для приложения
Поддержка push-уведомлений (не рассматривается)
Многое другое

Контрольный список для прогрессивных веб-приложений

Веб-сайт должен обслуживаться через https (используйте ngrok.io, если вы хотите имитировать https для разработки)
Веб-сайт также можно обслуживать с помощью localhost
Сервис-воркер не будет работать в http
У приложения должен быть файл манифеста
У приложения должен быть рабочий сервис-воркер

Контент

Связь с обслуживающим персоналом
Файл манифеста
События сервис-воркера

Связь с обслуживающим персоналом

Жизненный цикл сервис-воркера [sw.js] отличается от жизненного цикла веб-страницы.
Следовательно, сервис-воркер [sw.js] не имеет доступа к глобальному объекту «окно».
Создайте отдельный файл сервис-воркера [sw.js]
С другой стороны, [main.js] будет иметь доступ к объекту «окно».
Мы будем регистрировать сервис-воркер [sw.js] из [main.js]

Установите несколько пакетов

npm init -y
npm install express
npm install --save-dev nodemon

2. Создайте структуру папок, как на рис. 1.

3. Простой сервер узла (index.js)

Мы могли бы увидеть страницу в localhost: 4000

npm run dev

4. Маршрут «/» = ›index.html

5. Создайте main.js в статической папке.

Определить, поддерживает ли браузер сервис-воркер или нет
Ищет sw.js
Создает список сообщений

6. Добавьте простой CSS

Вы могли бы увидеть что-то вроде этого

Файл манифеста

Вы можете увидеть свойства, которые говорят сами за себя
Проверьте свою консоль и проверьте Installability [Рис: 7], он запросит недостающие части
Вы всегда можете сгенерировать manifest.json с помощью генератора манифеста с других веб-сайтов или приложений.
Перед созданием убедитесь, что у вас есть логотип с соотношением сторон 1: 1 и размером (как минимум) 512 X 512 пикселей.
«Start_url» - это строка, которая представляет местоположение, когда пользователь нажимает значок на мобильном телефоне или планшете, куда он должен перейти в первую очередь (обычно на главный экран).
«Scope» - это строка, которая ограничивает навигацию до подкаталога сайта.
Следовательно, файлы должны быть доступны в следующих местах URL-адресов адресной строки.

start url: http://localhost:4000/
manifest url: http://localhost:4000/manifest.json
Since our scope is "/" all the files needs to be in
http://localhost:4000/
other files urls (example): http://localhost:4000/main.js

Консоль - ›Приложение -› Манифест

Маяк

Идите в консоль, затем в Маяк
Отметьте только прогрессивное веб-приложение
Создать отчет
Если есть какие-либо проблемы, исправьте это соответствующим образом

События сервис-воркера

Поскольку sw.js не имеет доступа к объекту окна и работает в другом потоке, чем main.js, нам нужно зарегистрировать sw.js из main.js
Внутри sw.js сервисный работник проходит через событие установки
В случае установки мы можем решить, какие файлы мы хотим кэшировать.
В случае активации обычно лучше удалить предыдущие или устаревшие кеши.
В событии выборки, особенно для автономного приложения, мы можем решить, как мы хотим сохранить ответ и вернуть ответ URL-адресов API.

Теперь вы можете увидеть что-то подобное в браузере Chrome.

Теперь нативный интерфейс для планшетов или мобильных устройств готов, но чтобы дать возможность работать в автономном режиме, нам нужно пойти немного глубже.

Обычное

Список кеша состоит из статических файлов
Версия статического кеша - это ключ, в котором будет сохранен весь CACHE_LIST.

Событие установки

Внутри sw.js находится кеш, который является глобальной переменной (легко доступен)
Если вы console.log в журнале кешей, вы обнаружите, что в нем есть несколько__proto__, включая delete, has, keys, match, open
Если вы console.log зарегистрируете кеш [это из caches.open], вы обнаружите, что в нем есть несколько __proto__, которые включают add, addAll, delete, keys, match, matchAll, ставить
Хранение ресурсов в CACHE_LIST

Активировать событие

В основном мы удаляем устаревшие кеши

Получить событие

Здесь мы определяем, как файлы должны обслуживаться из кеша.

const CACHE_LIST = [
 "/",
 "/index.html",
 "/main.js",
 "/main.css",
 "https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/4.5.3/css/bootstrap.min.css",      
"https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.js"
];

Только кеш

Мы можем обслуживать только файлы CACHE_LIST
Показать ошибку, если запрос не соответствует ни одному файлу из CACHE_LIST

eg: '/index.html'

Кэш, затем сеть

Если запрос совпадает с ответом CACHE_LIST
Если он недоступен в CACHE_LIST, извлеките его из API
Сохраните ответ из выборки в CACHE_LIST
Затем верните ответ

eg: 'https://unpkg.com/axios/dist/axios.min.js'

Сеть, затем кеш

Независимо от того, какой запрос, сначала получить
Если есть успешный ответ выборки, верните ответ и обновите кеш
Если есть ошибка выборки, вернуть ответ из кеша, если запрос совпадает с одним из элементов в CACHE_LIST

Я бы использовал сеть, а затем кеш здесь

Теперь приложение будет работать офлайн

Здесь, как вы можете видеть, «/ posts /», а также другие файлы изображений были кэшированы из-за того, как мы настраиваем событие выборки.

Некоторые предостережения

Процесс отладки для сервис-воркера иногда бывает утомительным
Когда вы обновите страницу, новый обновленный файл sw.js будет установлен, но не будет активирован. Следовательно, вы не сможете сразу увидеть изменения для нового sw.js.
По этой причине вам необходимо закрыть все текущие рабочие вкладки и открыть новую вкладку.
Вы также можете установить флажок обновляется при перезагрузке в консоли сервисного работника в Google Chrome.
Также не стесняйтесь нажимать Отменить регистрацию и skipWaiting и посмотреть, как это сработает для вас.
Также лучше отключить сервис-воркера во время разработки с помощью файла .env или process.env.NODE_ENV, поскольку это может помешать другой вашей работе.

Создайте простое прогрессивное веб-приложение (PWA)