Создание Progressive Web Apps с Vue.js

Создание Progressive Web Apps с Vue.js

От автора: хотите начать разработку 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 ..

Откройте окно терминала и введите следующее:

Или, если вы предпочитаете Yarn в качестве менеджера пакетов:

Для этого поста я предполагаю, что у вас уже установлена Vue CLI версия 3 или выше. Если вы не знаете, какая у вас версия, введите следующую команду:

Если версия ниже 3, запустите одну из приведенных выше команд, чтобы установить последнюю версию. Теперь вы готовы к работе с Vue.

После того, как вы установили CLI, запустите vue create команду, и при появлении запроса выберите параметр “Manually select features”. Далее вы увидите такой экран:

Краткое введение в использование Vue.js с NativeScript

Выберите опцию “Progressive Web App (PWA) Support”, а также любые другие функции, которые необходимы в вашем приложении. Как только вы закончите, CLI установит все зависимости и поднимет проект.

Краткое введение в использование Vue.js с NativeScript

Теперь откройте каталог приложений в любимом текстовом редакторе. Если вы просматриваете каталог, созданный CLI, то заметите несколько элементов, которые необходимы для создания PWA, включая файл manifest.json, регистрацию Service Worker, значок favicon и mobile-friendly. Некоторые из них нужно будет изменить для своего приложения, но Vue CLI только что сэкономил вам массу времени, включив эти вещи в набор.

Краткое введение в использование Vue.js с NativeScript

Проверка PWA

Когда вы создадите свое приложение, то захотите убедиться, что он готово к PWA во время разработки. К счастью, Google предоставляет потрясающий инструмент для тестирования и аудита PWA под названием Lighthouse, и этот инструмент встроен в последние версии Chrome.

Во-первых, нужно протестировать производственную сборку приложения, поэтому запустите следующую команду, которая создаст производственный дистрибутив приложения:

Теперь этот дистрибутив вы можете запустить локально с помощью следующей команды:

При запуске приложения перейдите на вкладку, в которой она запущена, и откройте инструменты Chrome dev. Затем перейдите на вкладку «Audits», затем «Perform an Audit.». После запуска инструмент будет имитировать мобильное устройство и пройдёт ряд тестов, прежде чем дать оценку и некоторые предложения по улучшению вашего приложения.

Краткое введение в использование Vue.js с NativeScript

Мое приложение ниже прошло несколько проверок, но все еще нуждается в некоторых доработках. И лучше бы мне добраться до них!

Краткое введение в использование Vue.js с NativeScript

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

Автор: Brandon Satrom

Источник: //www.telerik.com/

Редакция: Команда webformyself.

Метки:

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

Комментарии Вконтакте: