Учебное пособие по прогрессивному веб-приложению: создайте свое первое PWA

Опубликовано: 2020-06-23

Оглавление

Сделано самим Google и в настоящее время внедряется на популярные платформы, такие как Windows 10, PWA может делать многие вещи, которые ранее были эксклюзивными для нативных приложений, включая такие функции, как push-уведомления, привлекательный интерфейс приложения, автономные возможности, установка приложений и т. д. .

И именно поэтому появление PWA больше не должно быть мгновенным, поскольку теперь это полномасштабное крупномасштабное движение, которое может коренным образом изменить Интернет, каким мы его знаем. Для новичков еще не поздно познакомиться с этой новой технологией, поскольку процесс создания PWA теперь стал намного проще, чем раньше, и подходит для таких заинтересованных неспециалистов, как вы.

В целях лучшего обучения сегодня мы собираемся создать полнофункциональную PWA с использованием React, Node.js и Firebase.

Предпосылки

Версия Node.js >= 8.10
версия npm >= 5.6

Примечания : версия npm не должна быть проблемой, так как ваша установка Node.js всегда поставляется с последней версией менеджера пакетов npm .

1. Создайте SPA с `create-react-app`

Во-первых, нам нужно что-то надежное для работы, и create-react-app — идеальный инструмент для этой цели.

 npx создать-реагировать-приложение мой-PWA
cd my-pwa
запуск нпм

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

Подавать через HTTPS

HTTPS — это новый стандарт для Интернета, и с появлением PWA он становится все более популярным. Обычно PWA должны обслуживаться через HTTPS, так как сами сервис-воркеры не могут без него работать; но поскольку мы работаем в локальной среде, в этом нет необходимости.

2. Заставьте его работать в автономном режиме

По умолчанию сервис-воркеры из create-react-app должны быть предварительно настроены для обработки автономного кэширования и загрузки контента, когда у пользователя нет подключения или при последующих посещениях.

Проще говоря, сервис-воркер — это JavaScript-скрипт, который выполняется в отдельном от страницы потоке, и из-за этого у него нет никакого доступа к структуре DOM. Этот новый подход порождает более прогрессивные, повышающие производительность функции, поскольку сервисные работники теперь не только обрабатывают все типичные функции PWA (автономные возможности, push-уведомления и т. д.), но и играют большую роль в облегчении тяжелых вычислений. вашего сайта в отдельной ветке.

Чтобы установить сервис-воркеров на PWA, вам нужно взглянуть на /src/index.js .

В index.js найдите эту строку

 serviceWorker.unregister()

Измените unregister() на register() , и ваши сервис-воркеры будут автоматически зарегистрированы, когда вы запустите my-pwa в производственном режиме . Не рекомендуется включать сервис-воркеры в режиме разработки, так как это может привести к случаям, когда PWA загружает только кэшированные ресурсы и не включает последние локальные изменения.

Чтобы запустить my-pwa в рабочем режиме:

 npm запустить сборку
npx обслуживать сборку

После этого откройте Chrome и перейдите на localhost:5000 , проверьте его, и теперь вы увидите, что сервисные работники правильно работают на вкладке « Приложение ».

И в категории « Хранилище кэша » вы хотите проверить, правильно ли кэшируется автономный контент вашего сайта.

Примечания . Существует обходной путь для регистрации сервис-воркеров в нерабочем режиме. Это достигается удалением строки process.env.NODE_ENV === 'production' из src/serviceWorker.js .

Если вы хотите углубиться в это и создать своих собственных сервис-воркеров с нуля, не полагаясь на предварительно настроенные конфигурации React, у нас есть вы. В этом руководстве мы покажем вам, как создать автономное прогрессивное веб-приложение из простого веб-приложения.

3. Настройте добавление на главный экран

Если до сих пор все было сделано правильно, вы должны увидеть небольшой значок установки (+) при запуске рабочей сборки вашего my-pwa .

Установить ПВА — Установка PWA на несколько устройств с помощью Magento PWA от SimiCart

Поскольку все делается автоматически для вас, вам, вероятно, интересно, как все это стало возможным. Не волнуйтесь, именно поэтому мы здесь.

Чтобы сделать ваш PWA A2HS (Добавить на главный экран) готовым, нам нужен manifest.json . manifest.json , поставляемый с вашим create-react-app , представляет собой очень простой файл JSON, который определяет, как значки вашего приложения отображаются для пользователя, и определяет внешний вид экрана-заставки. Чтобы настроить их, измените существующий файл в /public/manifest.json .

 {
  "short_name": "Мой первый PWA",
  "name": "Создать простой PWA",
  "значки": [
    {
      "src": "favicon.ico",
      "размеры": "64x64 32x32 24x24 16x16",
      "type": "изображение/значок x"
    },
    {
      "источник": "logo192.png",
      "тип": "изображение/png",
      "размеры": "192x192"
    },
    {
      "источник": "logo512.png",
      "тип": "изображение/png",
      "Размеры": "512x512"
    }
  ],
  "start_url": ".",
  "дисплей": "автономный",
  "тема_цвет": "#000000",
  "background_color": "#ffffff"
}

Большая часть материала здесь в значительной степени не требует пояснений, но если вы захотите больше узнать о manifest.json и событиях, которые приводят к установке PWA, мы написали об этом статью. Не забудьте проверить это.

Примечания . Чтобы manifest.json работал, его необходимо включить в index.html . По умолчанию create-react-app уже должно было сделать это за вас.

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Когда у вас есть PWA, зарегистрированный в сервис-воркерах и соответствующий manifest.json , beforeinstallpromt будет запущен, как только пользователь запустит ваше приложение, запрашивая разрешение на установку вашего PWA на домашний экран пользователя.

Однако следует отметить, что мы только поверхностно знакомимся с процессом A2HS (Добавить на главный экран), и нам еще многое предстоит узнать. Мы считаем, что лучший способ научиться чему-либо — это создать его с нуля, поэтому мы подготовили для вас краткое руководство об этой специфической функции PWA. Руководство проведет вас через несколько важных частей событий установки PWA.

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

4. Настройте push-уведомления

Браузеры прошли долгий путь в поддержке push-уведомлений. Недавно Chrome даже представил триггеры уведомлений, позволяющие отображать уведомления в режиме полета. Это огромный шаг вперед для push-уведомлений.

Триггеры уведомлений Chrome — *Новое в Chrome 80: **триггеры** уведомлений позволяют получать уведомления даже в режиме полета.*

И к настоящему моменту вам должно быть интересно, где та часть, которая использует Firebase в этом руководстве. Вот оно. В этой части вы узнаете о процессе интеграции push-уведомлений в PWA с использованием Firebase, в частности о встроенной в него функции облачных сообщений , которая позволяет отправлять сообщения с использованием HTTPS-запросов.

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

Вывод

И это все для полного PWA. Не стесняйтесь задавать нам любые вопросы, если вы чувствуете, что застряли в какой-либо части учебника, и мы постараемся ответить на него!

Читать далее:
Как интегрировать PWA в Magento 2