В этом руководстве я покажу, как обернуть существующее веб-приложение NuxtJS в мобильные приложения для Android и iOS с помощью CapacitorJS.
Capacitor — это нативная среда исполнения с открытым исходным кодом для создания Web Native приложений. Создавайте кроссплатформенные iOS, Android и Progressive Web Apps с помощью JavaScript, HTML и CSS.
CapacitorJS запускает ваш статический сайт в локальном браузере и показывает его пользователю. Кроме того, он имеет некоторый интерфейс между нативным и веб-контекстом для доступа к нативным функциям.
Но зачем вам это нужно, если пользователи могут зайти на ваш сайт из мобильных браузеров?
- Это более полезно для пользователей. Если пользователь часто использует ваше веб-приложение, ему проще просто нажать на значок вашего приложения, чем заходить в браузер и искать закладку вашего приложения или набирать доменное имя вашего приложения. И в Android, и в iOS есть функция «Добавить веб-сайт на главный экран». Но отдельное нативное приложение обеспечивает лучший UX.
- Канал распространения. Пользователи могут искать ваше приложение в AppStore и PlayMarket. Поэтому лучше присутствовать на всех популярных платформах, чтобы охватить больше пользователей.
- Нативные функции. Возможно, вашему веб-приложению они не нужны. Но после того, как вы создадите мобильную версию своего приложения, вы можете изменить свое мнение. По крайней мере, вы можете добавить уведомления с помощью FCM.
Думаю, мы закончили с частью «зачем?». Давайте перейдем к части «как?».
Создание фиктивного приложения NuxtJS
Чтобы упростить это руководство, я создам новое приложение Nuxt. Не стесняйтесь перейти к разделу «Установка CapacitorJS», если оно у вас уже есть.
Итак, давайте создадим приложение nuxt3, используя официальное руководство. Я буду использовать NodeJS v16 и Yarn v1.22 для установки.
Откройте терминал и запустите:
$ yarn add global nuxi
$ yarn nuxi init nuxt-mobile
$ cd nuxt-mobile
$ yarn install
Здесь мы установили nuxi Nuxt Command Line Interface, создали новый проект nuxt-mobile, и установили зависимости из package.json. Вы можете заменить nuxt-mobile на любое имя.
Далее, давайте изменим app.vue. Замените существующий файл на следующий:
<template>
<div>
<h1>Nuxt Mobile</h1>
<p>This is a basic example of a mobile app built with NuxtJS and CapacitorJS</p>
</div>
</template>
Теперь давайте посмотрим, что у нас получилось. Запустите сервер разработки:
$ yarn dev -o
Вы будете перемещены в браузер. Здесь вы увидите ваше веб-приложение.
Оно довольно пустое, но этого будет достаточно, чтобы показать, как обернуть веб-приложение в мобильное приложение.
Установка CapacitorJS
Теперь давайте добавим CapacitorJS в приложение. Я буду следовать инструкциям из официального руководства:
В корень вашего приложения установите основные npm-деплои Capacitor: основную среду выполнения JavaScript и интерфейс командной строки (CLI).
$ yarn add @capacitor/core
$ yarn add --dev @capacitor/cli
Затем инициализируйте Capacitor с помощью опросника CLI:
$ yarn cap init
CLI задаст вам вопросы о вашем пакете. Вы можете выбрать любое Name и Package (я использовал значения NuxtMobile и com.mycompany.nuxtmobile). Затем вам нужно установить директорию Web asset directory как dist. Это место назначения на статическом сайте NuxtJS. CLI сохранит эти ответы в capacitor.config.json и проверит содержимое файла.
После установки основной среды выполнения Capacitor можно установить платформы Android и iOS.
$ yarn add @capacitor/android @capacitor/ios
CapacitorJS использует статическую версию сайта. Поэтому нам необходимо ее сгенерировать:
$ yarn generate
Теперь у нас есть статический сайт, чтобы мы могли инициализировать приложения для iOS и Android:
$ yarn cap add android
$ yarn cap add ios
Эти команды создают нативные приложения в папках android и ios. Они клонируют веб-содержимое из каталога dist в каталоги ios/App/App/public и android/app/src/main/assets/public.
Каждый раз при изменении сайта необходимо запускать yarn generate для генерации нового статического сайта и npx cap sync для обновления нативных приложений.
Запуск приложения Android
Давайте запустим приложение Android. Сначала скачайте и установите AndroidStudio.
После завершения вернитесь в консоль и запустите yarn cap open android. Это откроет папку android в AndroidStudio. Здесь вы можете изменить файлы Android и запустить приложение.
Давайте добавим эмулятор для запуска. Перейдите в «Инструменты» -> «Диспетчер устройств» и нажмите «Создать устройство».
Сначала нужно выбрать «Аппаратное устройство». Основное различие между разными устройствами — это размер экрана и наличие PlayMarket. Я выберу Pixel 2, потому что у него есть PlayMarket и размер экрана 5,0″.
Затем нужно выбрать образ ОС Android. Я буду использовать Android API 33.
Наконец, нажмите ‘Next’ и ‘Finish’. После этого вы увидите новое устройство в выпадающем списке ‘Devices’.
Теперь вы можете выбрать свое устройство и нажать ‘Run’, чтобы собрать и запустить приложение:
Android Studio запустит эмулятор, соберет, установит и запустит ваше приложение:
Мы закончили с Android; давайте перейдем к части iOS.
Запуск приложения для iOS
Чтобы создать приложение для iOS, вам понадобится MacBook. Если у вас Linux или Windows, вы можете пропустить эту часть.
Во-первых, для создания и запуска приложения для iOS вам понадобится XCode. Вы можете получить его в AppStore.
После установки вернитесь в консоль и выполните команду yarn cap open ios. Эта команда откроет папку ios как проект XCode. Здесь вы можете изменить файлы и настройки приложения iOS; собрать и запустить приложение.
Теперь нам нужно выбрать устройство-эмулятор для запуска приложения. Я буду использовать iPod touch.
Затем нажмите кнопку ‘Run’. XCode создаст приложение и запустит его на устройстве.
Мы закончили с iOS-частью.
Конец
Поздравляем! В этом руководстве мы превратили новое веб-приложение NuxtJS в мобильные приложения для iOS и Android. Это очень простое веб-приложение, поэтому мы не будем загружать его в магазины 🙂 Но если у вас уже есть полнофункциональное веб-приложение, вы можете превратить его в мобильные приложения и загрузить их в PlayMarket и AppStore!
Вы можете найти исходный код проекта здесь.
Если вам нужно создать прототип веб- или мобильного приложения, загляните на наш сайт или свяжитесь со мной напрямую на LinkedIn.