От автора: хотите начать разработку Progressive Web Apps с помощью Vue.js? Узнайте, как легко получить PWA, быстро созданные с помощью Vue. Если вы проводили достаточно времени онлайн или среди других веб-разработчиков, то, несомненно, слышали аббревиатуру PWA или Progressive Web App. Этот термин, первоначально использованный Google, называет класс приложений, предназначенных специально для мобильной сети и предлагающих множество преимуществ мобильных приложений (автономная поддержка, установка на главном экране), при этом сохраняя широкий охват, который только может обеспечить Интернет.
PWA были темой большого количества дискуссий в веб-мире в течение последних нескольких лет, но чаще всего это была базирующаяся концепция из-за ограниченной поддержки ключевых технологий как в Safari, так и в Edge. Однако всё изменится в 2018 году, поскольку оба браузера настроены на выпуск обновлений, поддерживающих основные строительные блоки, необходимые для PWA.
Что такое PWA?
Progressive Web Apps используют современные веб-возможности для доставки приложений пользователям, особенно на мобильных устройствах. Они развиваются от страниц вкладки браузера до погружения в топовые приложения, поддерживая низкое соединение с Интернетом в любой момент. Некоторые из основных характеристик PWA включают в себя:
Progressive работают с каждым пользователем, независимо от выбора браузера, потому что с самого начала созданы с прогрессивным улучшением.
Responsive: подходит для любого форм-фактора, рабочего стола, мобильного телефона, планшета и т.д.
Connectivity independent: усовершенствование сервиса для работы в автономном режиме или в сетях низкого качества.
App-like: использование модели оболочки приложения для обеспечения навигации и взаимодействия в стиле приложения.
Fresh: всегда обновляется благодаря процессу обновления сервис-воркера.
Safe: использование с помощью транспортного уровня для предотвращения слежения и обеспечения подлинности контента.
Discoverable: идентификация как «приложения» благодаря App Manifests и области регистрации рабочего персонала, что позволяет поисковым системам находить их.
Re-engageable: упрощает повторное включение с помощью таких функций, как push-уведомления.
Installable: позволяет пользователям «сохранять» приложения, которые они находят наиболее полезными на своем домашнем экране, без вмешательства магазина приложений.
Linkable: лёгкий обмен по URL-адресу не требующий сложной установки.
Существует много вещей, которые разработчики должны учитывать при создании PWA, в том числе для обеспечения того, чтобы ваше приложение реагировало по умолчанию, быстро и асинхронно загружалось, и чтобы все активы были объединены и минимизированы как можно лучше. Все это хорошая практика проектирования для Интернета, мобильных и прочего. Кроме того, PWA полагаются на ряд новых веб-технологий, которые делают их действительно похожими на приложения, включая Service Workers, Push Notifications и App Manifests. Полный список советов и технологий, составляющих PWA, смотрите в контрольном списке PWA от Google.
Создание PWA с Vue
Хотя создание PWA требует, чтобы вы добавляли некоторые новые технологии и разрабатывали свои приложения определенным образом, вовсе не обязательно прилагать усилия к включению этих элементов в приложение. На самом деле, если вы создаете свое приложение с помощью Vue.js, вы можете получить все, что вам нужно, от CLI, который может поднять полный стартер PWA с помощью одной команды.
Прежде чем мы начнем, нужно установить Vue CLI ..
Откройте окно терминала и введите следующее:
npm install -g @vue.cli
Или, если вы предпочитаете Yarn в качестве менеджера пакетов:
yarn global add @vue/cli
Для этого поста я предполагаю, что у вас уже установлена Vue CLI версия 3 или выше. Если вы не знаете, какая у вас версия, введите следующую команду:
vue --version
Если версия ниже 3, запустите одну из приведенных выше команд, чтобы установить последнюю версию. Теперь вы готовы к работе с Vue.
После того, как вы установили CLI, запустите vue create команду, и при появлении запроса выберите параметр “Manually select features”. Далее вы увидите такой экран:
Выберите опцию “Progressive Web App (PWA) Support”, а также любые другие функции, которые необходимы в вашем приложении. Как только вы закончите, CLI установит все зависимости и поднимет проект.
Теперь откройте каталог приложений в любимом текстовом редакторе. Если вы просматриваете каталог, созданный CLI, то заметите несколько элементов, которые необходимы для создания PWA, включая файл manifest.json, регистрацию Service Worker, значок favicon и mobile-friendly. Некоторые из них нужно будет изменить для своего приложения, но Vue CLI только что сэкономил вам массу времени, включив эти вещи в набор.
Проверка PWA
Когда вы создадите свое приложение, то захотите убедиться, что он готово к PWA во время разработки. К счастью, Google предоставляет потрясающий инструмент для тестирования и аудита PWA под названием Lighthouse, и этот инструмент встроен в последние версии Chrome.
Во-первых, нужно протестировать производственную сборку приложения, поэтому запустите следующую команду, которая создаст производственный дистрибутив приложения:
npm run build
Теперь этот дистрибутив вы можете запустить локально с помощью следующей команды:
npm run serve -s dist
При запуске приложения перейдите на вкладку, в которой она запущена, и откройте инструменты Chrome dev. Затем перейдите на вкладку «Audits», затем «Perform an Audit.». После запуска инструмент будет имитировать мобильное устройство и пройдёт ряд тестов, прежде чем дать оценку и некоторые предложения по улучшению вашего приложения.
Мое приложение ниже прошло несколько проверок, но все еще нуждается в некоторых доработках. И лучше бы мне добраться до них!
PWA определенно стало мейнстримом в 2018 году, с улучшенной поддержкой во всех мобильных браузерах вы точно захотите следить за их подходом и подумаете о том, чтобы использовать его для своего следующего приложения. И если вы используете Vue, то можете начать работу со своим следующим PWA за считанные минуты!
Автор: Brandon Satrom
Источник: https://www.telerik.com/
Редакция: Команда webformyself.