Хабрахабр

[Перевод] Разработка прогрессивного веб-приложения Nothing за 15 минут

В Google Play есть одно приложение, разработанное Chilango Lab, у которого больше миллиона загрузок и довольно высокий рейтинг. Называется оно Nothing, что можно перевести как «Ничто», и замечательно оно тем, что не делает абсолютно ничего. В нём, правда, спрятана приятная пасхалка, но это не меняет дела. Если проанализировать это приложение, то окажется, что его размер — 14 Мб, при установке оно занимает 19,24 Мб.

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

А именно, он воссоздал функционал Nothing, используя HTML, CSS и JavaScript, оформив его в виде прогрессивного веб-приложения (PWA, Progressive Web App). Ему это удалось. Основная разница между обычным Android-приложением и его PWA-копией заключается в размерах. Оно работает без подключения к интернету, вызывать его можно, как и обычное приложение, с главного экрана. Второе — 205 Кб.
Первое, напомним, занимает на устройстве 19,24 Мб.

Обычное приложение и PWA

Создание значков для Nothing

Прежде чем я расскажу вам о коде, создадим значок для PWA Nothing. Для решения этой задачи я воспользовался отличным опенсорсным инструментом Launcher Icon Generator.

Launcher Icon Generator

Программа автоматически генерирует значки различных размеров. С помощью Launcher Icon Generator мне удалось создать значок для моего варианта Nothing буквально мгновенно.

PWACompat

После того, как работа над значком была завершена, мне нужно было создать манифест веб-приложения. Благодаря ему браузер Chrome для Android покажет экран-заставку при загрузке PWA. Можно ли сделать так, чтобы такой экран появлялся и в других браузерах? Да, можно, и для этого нам понадобится библиотека PWACompat, которая позволяет реализовать именно то, что нам нужно. Её, вместе с манифестом, достаточно подключить в коде PWA:

<link rel="manifest" href="manifest.json" />
<script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js" integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA" crossorigin="anonymous"></script>

Вот как выглядит экран-заставка в браузере Safari (iOS).

Экран-заставка в Safari

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

Добавление приложения на главный экран

Одна из моих любимых возможностей PWA называется A2HS (Add to Home screen, добавить на главный экран), благодаря ей можно добавить значок для запуска приложения на главный экран. Однако начиная с Chrome 68 на Android, вместо большого A2HS-баннера, теперь выводится небольшая информационная панель с соответствующим предложением.

Прощай A2HS-баннер (Chrome 67 и более ранние версии)

Поэтому мне нужно было создать более приятный A2HS-интерфейс для PWA Nothing. В любом случае, информационная панель — это промежуточное решение, когда-то эту возможность из Chrome уберут.

Кнопка Install (слева), кнопка Install и A2HS-панель (в центре), диалоговое окно Add to Home Screen (справа)

Когда пользователь щёлкает по этой кнопке, вызывается диалоговое окно Add to Home Screen. В данном случае, если браузер поддерживает возможность добавления приложения на главный экран, он выведет, в верхней части страницы, кнопку Install.

Вот соответствующий код.

var installPromptEvent;
var btnInstall = document.querySelector('#install'); window.addEventListener('beforeinstallprompt', function (event) { event.preventDefault(); installPromptEvent = event; btnInstall.removeAttribute('disabled');
}); btnInstall.addEventListener('click', function () else { console.log('User dismissed the A2HS prompt'); } installPromptEvent = null; });
});

Если сайт соответствует критериям A2HS, то браузер вызовет событие beforeinstallprompt.

Пасхалка

Внимание, тут будет спойлер!

Собственно говоря, пасхалка PWA Nothing — это код Konami и 10-часовое видео на YouTube.

Вызов пасхалки (вверх, вверх, вниз, вниз, влево, вправо, влево, вправо и два касания)

После того, как пользователь справится с кодом, PWA откроет это видео.

Она невелика, с ней легко работать, и она, кроме прочего, поддерживает мобильные устройства. Для добавления поддержки кода Konami в моё приложение я воспользовался библиотекой Konami-JS. В частности, там, где у меня, при вводе кода, надо выполнить два касания, в исходном приложении нужно воспользоваться панелью с кнопками. Тут кроется единственное различие между моим PWA и исходным приложением для Android.

Отключение обновления страницы при протягивании

У меня, в процессе работы над приложением, возникла небольшая проблема. Когда пользователь пытается протянуть страницу вниз на мобильном устройстве, это вызывает выполнение обновления страницы (pull-to-refresh). Мне это не нужно.

Нежелательное обновление страницы

Для этого нужна лишь одна строка CSS-кода: К счастью, справиться с этой проблемой несложно.

overscroll-behavior-y: contain

Хостинг

В качестве хостинга для PWA Nothing была выбрана площадка Netlify. Это универсальная платформа для современных веб-проектов. Причина, по которой я решил разместить моё приложение на Netlify, заключается в том, что тут всё очень легко настраивается. Кроме того, всё это бесплатно.

Панель управления Netlify

Речь идёт об инструментах командной строки, о ручном развёртывании, и о непрерывном развёртывании. Для развёртывания проекта на Netlify можно воспользоваться одним из трёх методов.

▍Инструменты командной строки Netlify

Это классический способ развёртывания веб-проектов. Для того чтобы им воспользоваться, надо установить CLI Netlify, войти в свою учётную запись, инициализировать проект и развернуть его. Выглядит это так:

> brew tap netlify/netlifyctl > brew install netlifyctl
> netlifyctl login
> netlifyctl init
> netlifyctl deploy

▍Ручное развёртывание

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

Ручное развёртывание

Собственно говоря, развёртывание проекта сводится к перетаскиванию мышью его папки на веб-страницу. Мне так понравилась эта возможность, что мне бы хотелось, чтобы нечто подобное появилось бы в Firebase.

▍Непрерывное развёртывание

Сейчас я использую именно этот метод. После того, как я связал свой GitHub-репозиторий с Netlify, когда я отправляю туда код, Netlify автоматически собирает и развёртывает проект. Волшебство, не иначе.

▍HTTPS

Так как PWA должны обслуживаться по HTTPS из защищённого источника, мне нужно было обеспечить, чтобы на моём сайте был бы включен HTTPS. Мне, правда, не пришлось прилагать особых усилий в этой области, так как Netlify предоставляет бесплатный HTTPS для всех доменов, включая собственные домены пользователей.

HTTPS

Это обеспечит постоянную защиту сайта. Более того, с панели управления Netlify можно включить принудительный переход на HTTPS (HSTS).

Анализ проекта с помощью Lighthouse

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

Lighthouse

Вот полный отчёт. Моему приложению удалось набрать 97 баллов по показателю производительности и по 100 баллов по остальным показателям.

Итоги

Как видите, прогрессивное веб-приложение, которое ничего не делает, оказывается гораздо меньше Android-приложения, обладающего столь же богатой функциональностью. Здесь можно испытать PWA Nothing. А здесь можно найти его исходный код.

Уважаемые читатели! Как вы думаете, какие используемые вами приложения для Android стоило бы воссоздать в форме PWA?

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть