Прогрессивное веб-приложение (PWA)
«Прогрессивное веб-приложение (PWA) - это веб-приложение, в котором используются современные веб-возможности для предоставления пользователям опыта, аналогичного нативному приложению. Эти приложения соответствуют определенным требованиям (см. Ниже), развертываются на серверах, доступны через URL-адреса и индексируются поисковыми системами ».
Прогрессивное веб-приложение (PWA) работает как любое другое обычное приложение, но с множеством дополнительных функций и меньшими хлопотами. Они быстрые, надежные и могут отлично работать в автономной среде.
Зачем нам это использовать?
Прогрессивные веб-приложения (PWA) создают очень богатый опыт для пользователей, потому что они:
- Адаптивный
PWA можно встроить в браузер настольного компьютера, мобильный телефон или экран телевизора - любой продукт, который поддерживает подключение к Интернету и поддерживает браузер.
- Надежный
Он использует технологию, называемую Service Worker, которая позволяет пользователям мгновенно загружать PWA в свою среду. PWA может обеспечить автономную поддержку приложения, и пользователь не столкнется с проблемами, связанными с сетью.
- Нет магазина приложений / Play Маркета
Пользователям не нужно посещать магазин приложений, чтобы загрузить эти прогрессивные веб-приложения. Их можно установить мгновенно и прямо из браузера. Не требует времени ожидания, так как они очень быстрые и позволяют создавать собственные приложения, такие как моделирование.
- Привлечение разработчиков и пользователей
Разработчики также могут добавлять / экспериментировать с множеством функций в файлах манифеста. Одна из самых известных функций - это повторное привлечение пользователей с помощью push-уведомлений, включенных PWA.
- Легко поделиться
Прогрессивными веб-приложениями очень легко поделиться с друзьями или коллегами. Все, чем нужно поделиться, - это URL-адрес веб-сайта / приложения. Пользователям не нужно делиться устанавливаемым apk или проходить процесс проверки с последующей загрузкой множества файлов. Все, что требуется пользователю, - это простой щелчок.
Чтобы узнать больше о прогрессивных веб-приложениях, перейдите по этой ссылке от разработчиков Google
Создание базового PWA
В этом руководстве мы собираемся создать PWA, используя только обычный JavaScript, но для этого нам нужно сначала создать обычное веб-приложение.
Прежде чем продолжить, давайте посмотрим, как будет выглядеть наш окончательный интерфейс и какие функции мы пытаемся достичь.
Окончательный интерфейс проекта
Пользовательский интерфейс будет отображать цветные поля посередине, и при нажатии на поля будут воспроизводиться короткие музыкальные клипы.
Точно так же каждая коробка производит разные музыкальные клипы. Концепция этого веб-сайта состоит в том, чтобы смешивать разную музыку и создавать свою собственную, играя с ней.
Репозиторий GitHub
Все файлы, относящиеся к этому проекту, находятся здесь: https://github.com/S-ayanide/MixCentro
Во время этого руководства вам нужно будет загрузить определенные ресурсы, которые доступны в репозитории GitHub. Если вы хотите что-то создать, изменить или изменить, я предлагаю вам сделать это после того, как вы изучите это руководство.
HTML веб-приложения
HTML для этого проекта будет очень простым. Нам понадобятся разделители для отдельных цветных пэдов, как показано, и звук для каждого из них.
Давайте посмотрим на этот фрагмент кода:
Все, что мы здесь делаем, - это присваиваем нашему заголовку и заголовку название MixCentro, так как именно это имя мы выбрали для этого веб-сайта (не стесняйтесь выбирать свое собственное).
Для работы этого проекта вам понадобятся звуки, скачайте их из упомянутого выше репозитория GitHub, который содержит все звуковые файлы.
Мы создали основной раздел «pads», который содержит «pad-top» и «pad-bottom», который ничего не делает, кроме создания Пэды, которые мы видим в пользовательском интерфейсе, разделены на две части, каждая из которых содержит по 3 пэда.
Верхняя панель называется «верхняя панель» с тремя контактными площадками, состоящими из разных звуков. Точно так же нижняя часть площадки называется «дно площадки» и также состоит из трех площадок.
Хотя style.css и index.js были импортированы, на данный момент мы их не используем.
CSS веб-приложения
Теперь мы можем создать таблицу стилей в корне каталога. Я назвал это style.css.
По умолчанию у нас есть поля и отступы по бокам экрана, в нашем случае мы этого не хотим. Итак, давайте вручную удалим все отступы и поля, которые были добавлены по умолчанию.
Поскольку мы добавили заголовки в наш HTML-файл, а у него нет фона, нам нужно сделать наш веб-сайт привлекательным и утонченным. Для этого давайте обновим стиль шрифта и улучшим его внешний вид, добавив фон, который будет хорошо сочетаться с темой.
В репозитории GitHub, упомянутом выше, вы можете найти изображение, которое уже существует для вас по пути images/bg/background.jpg Это то же изображение, что и использованное в предварительном просмотре пользовательского интерфейса.
Импорт шрифтов Google
Чтобы двигаться дальше, нам нужно выбрать красивый и тонкий шрифт для нашего веб-сайта. Чтобы выбирать из множества шрифтов, мы будем использовать Google Fonts.
Это может занять некоторое время, поскольку у всех разные предпочтения и вкусы. Выберите один шрифт и нажмите кнопку «+» в правом верхнем углу выбранного шрифта.
После того, как вы нажмете на нее, на экране появится черная полоса с надписью «Выбрано 1 семейство». При нажатии на эту полосу она расширяется и позволяет увидеть что-то похожее на это.
Детали могут немного отличаться, так как это зависит от выбранного вами шрифта, но все остальное остается прежним. Здесь мы будем использовать стандартный способ импорта шрифта, поэтому давайте скопируем весь <link href … >, указанный в сером поле.
Чтобы использовать текущий шрифт, откройте файл index.html и вставьте эту ссылку в любое место между тегами <head>.
Больше стиля
После импорта нашего шрифта пора отразить это и в главном браузере.
В моем случае я использовал семейство шрифтов «Lexend Exa», а также добавил фоновое изображение, упомянутое ранее. Чтобы сохранить непрерывный, равномерно распределенный макет, мы используем гибкий блок с содержимым, выровненным с пробелом между свойствами.
Мы также сохраняем класс под названием «прокладки», ширина которого составляет 60%, так что он занимает чуть больше половины экрана, что делает его не слишком расширенным, а также сохраняет его плотный и нежный вид.
Разделения внутри классов «pad-top» и «pad-bottom» были нацелены так, чтобы они вырастали до своей потенциальной ширины и высоты, а также сохраняли свойство flex равным 1, чтобы они проецировались вперед.
Наконец, мы назначаем разные шестнадцатеричные цвета для всех наших контактных площадок.
Добавление медиа-запросов
Наконец, мы добавляем медиа-запросы, чтобы управлять отзывчивостью нашего приложения.
В этом простом коде мы контролируем только размер наших шрифтов, которые мы уменьшаем, если размер экрана опускается ниже 480 пикселей, а также добавляем некоторый запас внизу, чтобы он выглядел лучше.
Добавить функциональность ванильного JavaScript
На данный момент у нас есть замечательный пользовательский интерфейс, но пэды не издают никаких звуков при нажатии на них. Это почему?
Наше подразделение на данный момент уже имеет звук внутри, но чтобы воспроизвести этот конкретный звук при нажатии пользователем, мы вызываем функцию play(). Вот тут и пригодится JavaScript.
Наш базовый код JavaScript был бы очень простым и состоял бы всего из 11 строк.
Вначале мы собираем звуки и пэды, сохраняя весь запрос, нацеленный на классы HTML .sounds и .pads соответственно, и сохраняем их в переменных.
Но мы хотим выполнять эту операцию всякий раз, когда окно загружается первым, поэтому мы заключаем все в window.addEventListener(‘load’).
Затем мы добавляем forEach, который проходит через все части пэдов. Он имеет два параметра: один - это пэд, который инициализируется для каждого отдельного пэда при каждом цикле, а другой - индекс, который требуется для воспроизведения звука этого конкретного пэда.
Мы используем звук из указанной выше звуковой переменной для воспроизведения файла, связанного с отдельными пэдами, с помощью функции play().
Мы используем что-то вроде currentTime = 0. Причина, по которой мы это делаем, заключается в том, что мы повторно инициализируем время обратно на ноль каждый раз, когда пэд играет, так что мы можем воспроизводить один пэд несколько раз после нескольких щелчков по одному и тому же пэду.
Поздравляем, вы только что создали веб-приложение с использованием стандартного JavaScript. Вы можете поэкспериментировать с ним или даже развернуть его в Интернете, чтобы другие могли использовать его. Но ждать! нам все еще нужно преобразовать это веб-приложение в прогрессивное. Давайте начнем.
Что такое манифест веб-приложения?
Манифест веб-приложения - это простой файл JSON, который содержит сведения о вашем прогрессивном веб-приложении и сообщает браузеру, как оно должно себя вести при установке на устройство пользователя.
Манифест может содержать такую информацию, как имя приложения (полное и краткое имя), значок приложения, URL-адрес, на который он указывает, который откроется после запуска приложения, цвета темы управления и т. Д.
Создайте файл манифеста
При создании прогрессивного веб-приложения файл манифеста важен, поскольку он контролирует поведение браузера при его установке на устройство пользователя.
Чтобы создать свой собственный манифест веб-приложения, вы можете создать новый файл и назвать его manifest.json и добавить дополнительные сведения в формате JSON. Однако есть лучший способ сделать это, используя инструменты, которые уже предоставлены нам в Интернете.
Создать манифест онлайн
В эту эпоху Интернет уже предоставляет нам множество возможностей для экономии времени, которые снова пригодятся, когда мы создаем manifest.json файл.
Вместо того, чтобы вводить все пары ключ-значение в формате JSON, просто перейдите на этот веб-сайт: https://app-manifest.firebaseapp.com/
Это генератор манифеста веб-приложения, и он требует только заполнения определенных полей ввода, и он автоматически сгенерирует для вас манифест.
На что следует обратить внимание при заполнении полей ввода:
- Дайте вашей заявке полное и короткое название.
- Цвет темы и цвет фона важны, поскольку они могут изменить версию обычного веб-приложения для браузера и сделать его более живым.
- Измените режим отображения на
‘standalone’. - На данный момент удалите «Область применения».
- Задайте для начального URL значение
‘.’, поскольку мы хотим создать PWA в самом корневом каталоге. - Справа вы увидите кнопку «ICON». Выберите изображение для использования в качестве значка приложения, а затем просто перетащите / загрузите его сюда.
Примечание. Убедитесь, что размер вашего значка не превышает разрешения 512x512 пикселей, поскольку значки масштабируются для соответствия различным устройствам.
Как только все это будет сделано, нажмите «СОЗДАТЬ .ZIP» и извлеките все содержимое zip-файла в папку своего проекта.
На этом этапе вы только что добавили файл манифеста в свой проект, но не используете его. Чтобы фактически отразить файл манифеста в вашем проекте, добавьте ссылку на него в файле index.html между тегами <head>.
<head> <link rel=”manifest” href=”manifest.json”> </head>
Альт! Теперь у вас есть готовый файл манифеста в вашем проекте.
Теперь мы добавим новые зависимости с помощью Yarn.
Что такое пряжа?
Yarn - это новый диспетчер пакетов, который заменяет существующий рабочий процесс для клиента NPM или других диспетчеров пакетов, оставаясь при этом совместимым с реестром NPM. Диспетчер пакетов служит для установки некоторых пакетов, которые служат определенной цели.
Преимущества использования пряжи
Конечно, есть и другие менеджеры пакетов, но для этого проекта мы будем использовать Yarn по нескольким причинам:
- Загрузка пакета происходит только один раз, т.е. повторная загрузка не требуется.
- Это более безопасно.
- Использует формат блокировки, который блокирует зависимости, гарантируя, что обе системы работают с одними и теми же пакетами / зависимостями.
Установка Yarn в вашу систему
Установить пряжу в вашу систему очень просто. Все, что вам нужно сделать, это посетить https://yarnpkg.com/lang/en/ и нажать Установить пряжу, , и загрузка начнется автоматически.
Просто следуйте обычным процедурам настройки, и установка Yarn начнется в вашей системе, а путь также автоматически изменится в переменных вашей среды.
Другой альтернативой этому методу является использование npm, и это тоже несложно. Если вы уже используете npm, просто откройте терминал и введите:
Чтобы проверить, была ли установка yarn успешной в вашей системе, откройте терминал и введите:
Если вы получили ответ типа 1.16.0 или что-то подобное, это означает, что Yarn успешно установлен, и все готово.
Инициализация проекта пряжи
Чтобы создать новый проект пряжи, первым делом перейдите в папку проекта в терминале и введите следующую команду:
Как только вы введете yarn init в свой терминал, вы получите много вопросов. Когда вы ответите на эти вопросы, ответ будет сохранен в package.json файле, в котором хранится вся информация.
Сначала вам будет предложено имя. В нем введите название проекта, который вы хотите сохранить. Что касается других полей, вы можете оставить их пустыми или ввести свою спецификацию, если захотите.
Очень важный вопрос, который не следует пропускать, - это точка входа. Он решает, где должна быть точка входа в наш проект. Инициализируйте его на index.js, который мы создали ранее.
По завершении этого шага вы обнаружите множество новых папок и файлов, заполненных в вашем проекте. В таком случае похлопайте себя по спине, потому что вы успешно запустили свой первый проект пряжи.
Примечание: инициализацию yarn следует выполнить после перехода в папку проекта, чтобы index.js был доступен в качестве точки входа.
Установка пакета под названием Serve
Поскольку для прогрессивного веб-приложения (PWA) требуется работающий сервер, нам нужен как минимум локальный хост для тестирования нашего приложения. Итак, нам нужно установить пакет под названием serve.
serve лучше всего работает, когда мы хотим протестировать статический сайт с помощью сервера. Мы можем проверить, как он работает на localhost, а затем отправить его в развертывание позже.
Чтобы установить serve в свой проект, мы просто набираем в терминале следующее (после перехода в папку вашего проекта):
Это добавит зависимость в ваш проект, и вы сможете просмотреть ее в файле package.json.
Чтобы запустить вашу статическую страницу на локальном сервере, нам нужно сначала запустить сервер, используя эту зависимость. Чтобы запустить сервер, введите yarn serve в своем терминале.
В вашем случае вы увидите что-то похожее, предоставив вам подробную информацию о вашем локальном хосте и сетевом адресе. Вы можете открыть любой из них, чтобы просмотреть свой статический веб-сайт, работающий на локальном сервере.
Что такое ServiceWorker?
Сервис-воркер - это разновидность веб-воркера. По сути, это файл JavaScript, который запускается отдельно от основного потока браузера, перехватывает сетевые запросы, кэширует или извлекает ресурсы из кеша и доставляет push-сообщения ».
По сути, сервис-воркер работает отдельно от основного потока и полностью независим от приложения, с которым он в настоящее время связан.
Service Worker может управлять сетевыми запросами, обрабатывать кэширование, а также обеспечивать поддержку автономных ресурсов через кеш.
Жизненный цикл сервис-воркера состоит из трех этапов:
- Регистрация
- Установка
- Активация
Регистрация ServiceWorker в первую очередь
Чтобы установить нашего Service Worker, нам необходимо сначала зарегистрировать его в нашем основном файле JavaScript, которым в нашем случае является index.js. Прежде чем продолжить, давайте создадим файл Service Worker и назовем его serviceWorker.js.
Первый шаг в жизненном цикле сервис-воркера - это регистрация:
Сначала проверяется поддержка браузером, поэтому нам нужно добавить его в наш window.addEventListener(). Затем сервис-воркер регистрируется в navigator.serviceWorker.register, который возвращает обещание, которое разрешается, когда сервис-воркер был успешно зарегистрирован.
Объем Service Worker очень важен, поскольку он определяет, какие файлы контролирует Service Worker. Другими словами, с какого пути сервис-воркер будет перехватывать запросы.
Таким образом, мы всегда предпочитаем Service Worker в корневом каталоге, чтобы он мог контролировать запросы от всех файлов в этом домене.
Создание нашего serviceWorker.js с использованием Vanilla JS
Теперь, когда у нас уже есть файл serviceWorker.js, созданный и зарегистрированный в нашем браузере, мы можем подтвердить его, открыв нашу вкладку элемента проверки и в Инструменты разработчика, перейдя в меню Приложение.
Вы обнаружите, что ваша регистрация Service Worker прошла успешно и что это также было записано в журнале сообщений вашей консоли.
Чтобы все ваши ресурсы были доступны в нашем локальном кеше, нам необходимо динамически указать путь ко всем статическим ресурсам.
Поскольку Service Worker полностью управляется событиями, нам нужно добавить такие события, как install и fetch, чтобы он выполнял их на стороне браузера.
Установить
Событие Install вызывает себя каждый раз, когда браузер обнаруживает нового Service Worker. Мы нацелены на то, чтобы вызвать Cache API, чтобы получить все наши статические ресурсы и сохранить их на будущее.
В этом случае мы называем наш кеш именем ‘static-cache’. Вы можете использовать любое имя, какое захотите, но для простоты предпочтительнее «static-cache».
Поскольку Service Worker - это низкоуровневый API, нам всегда нужно указывать ему, что делать. Если на этом этапе вы вернулись в меню Приложение в браузере и смоделировали автономную среду, вы все равно обнаружите, что ничего не происходит.
Решим эту проблему с помощью API fetch.
Принести
В Service Worker мы можем решить, как мы хотим реагировать на данное событие. Для этого мы используем метод respondWith().
В нашем случае мы хотим сначала проверить, есть ли что-то в кеше, а если нет, мы получим это из сети.
Чтобы создать наш подход кэширования, мы создаем функцию, которая сопоставляет запрос с файлами, присутствующими в самом кеше. Таким образом, запрос действует как ключ.
Теперь это возвращает либо undefined, если в кеше ничего нет, либо сам ответ кеша.
Чтобы создать подход, ориентированный на сеть, мы хотим создать динамический кеш, в который будут извлекаться все сетевые ресурсы, если они потребуются. В случае, если это не удастся, он вернется к статическому кешу.
Это будет получать любой запрос онлайн, если этого требует наш браузер, и будет добавлен с помощью метода put() в наш динамический кеш.
Теперь, когда мы заходим в меню Приложение, мы обнаруживаем два кеш-хранилища: одно статическое, а другое - динамическое, которые мы только что создали.
Теперь, если мы вернемся к нашим Service Workers и смоделируем автономную среду, установив флажок «Offline», мы не столкнемся с проблемами в Интернете, и приложение будет работать без сбоев из-за всех хранилищ кешей.
Поздравляем вас с тем, что вы сделали это здесь, теперь у вас есть собственное прогрессивное веб-приложение, которое вы можете использовать / устанавливать на всех платформах.
Чтобы установить PWA, просто разверните свой проект на онлайн-сервере (также подойдет бесплатный хостинг). Когда ваш сайт полностью загрузится, вы увидите небольшой знак + в правой части адресной строки.
Нажмите на него, чтобы увидеть, как ваш замечательный PWA установлен и работает в вашей локальной системе.
