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

  • Вы можете отправить свое существующее мобильное приложение в виде веб-приложения, практически не меняя текущую конфигурацию.
  • Мы предлагаем бесплатный хостинг и пользовательские поддомены для всех пользователей.
  • Мы перестроили некоторые компоненты, чтобы они лучше работали в Интернете.

Публикация в Интернете

Публикация в Интернете включает в себя следующие шаги:

  1. Включение веб-поддержки
  2. Внесение изменений в дизайн (необязательно)
  3. Устранение ошибок
  4. Добавление общей информации
  5. Развертывание
  6. Просмотр живого веб-приложения

Включение веб-поддержки

По умолчанию мы позволяем вам запускать ваше приложение на Android и iOS без каких-либо дополнительных усилий. Но чтобы запустить и развернуть ваше приложение на Web, вам необходимо добавить поддержку платформы для Web.

Чтобы добавить поддержку платформы:

  • Нажмите на Настройки и интеграции () в навигационном меню (левая часть экрана).
  • В разделе Настройка проекта выберите Платформы.
  • Включите тумблер Web.
Включение веб-поддержки автоматически включает глубокое связывание для вашего проекта. Это поможет создать URL-адреса для каждой страницы вашего приложения.
веб 1

Внести коррективы в дизайн (необязательно)

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

Вы можете создать отдельные виджеты для разных платформ и контролировать их видимость с помощью Responsive Visibility.

Теперь вы также можете добавить отзывчивую видимость на стандартную панель Navbar и AppBar FlutterFlow.

Разрешение предупреждений о веб-совместимости

Если вы ранее создали мобильное приложение и недавно включили поддержку веб-приложений, возможно, что вы столкнетесь с предупреждениями о совместимости с веб-приложениями. Из-за различий в природе мобильных и веб-платформ некоторые виджеты и действия в FlutterFlow, включая AdMob, RevenueCat, действие Share и действие Launch Map, или ваши пользовательские виджеты могут работать не так, как ожидается, потому что они еще не поддерживаются в Интернете.

Любые известные проблемы веб-поддержки будут отображаться в виде предупреждения о поддержке платформы.

Это не помешает вам развернуть ваше приложение в Интернете, но может привести к плохому пользовательскому опыту и неожиданному поведению приложения.
В такой ситуации вы можете попытаться найти замену пакету на pub.dev (если он соответствует вашим требованиям и имеет хорошую оценку).

Важно: Убедитесь, что все используемые вами пакеты pub.dev имеют Web Support.
веб 2
веб 3

Добавление общей информации

На этом этапе вы должны предоставить общую информацию о вашем веб-приложении, выполнив следующие действия:

  • Перейдите в раздел Настройки и интеграции () из меню Навигация > Настройки приложения > Веб-публикация.
  • В разделе Общая информация введите следующие данные:
    • URL сайта: Вы можете определить URL сайта, добавив поддомен, например, mywebapp.flutterflow.app. Вы можете изменить только поддомен, т.е. часть перед flutterflow.app.

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

Совет: Количество поддоменов, зарегистрированных для одного пользователя, ограничено. Вы получите предупреждение в приложении, если приблизитесь к лимиту.

  • SEO-заголовок: Отображается на вкладке браузера во время загрузки страницы, в результатах поиска, а также когда вы делитесь URL-адресом сайта в социальных сетях (внутри карточки предварительного просмотра социальных акций). После загрузки страницы вы увидите фактическое название страницы (например, homePage, productDetails). Чтобы изменить название страницы, откройте страницу, перейдите на панель свойств и введите значение для Page Title в разделе Route Settings.
  • Social Share Image URL: Изображение с этого URL будет отображаться в карточке предварительного просмотра социальных акций (например, в карточке OpenGraph и Twitter).
  • Описание сайта: Текст, который вы хотите отобразить в карточке предварительного просмотра социальных акций и в результатах поиска.
  • Фавикон: Значок, который обычно появляется перед названием веб-приложения на вкладке браузера. Чтобы изменить его, нажмите на Upload Favicon + и загрузите значок. Вы можете сгенерировать его бесплатно здесь.
  • Водяной знак: По умолчанию кнопка с текстом «Built in FlutterFlow» появляется в качестве водяного знака в правом нижнем углу вашей страницы. Чтобы убрать его, отключите переключатель «Показывать водяной знак».
  • Заголовки отдельных страниц: Включение этой опции отобразит название текущей страницы на вкладке браузера. Для этого в настройках маршрута для всех страниц должно быть указано название страницы.
  • Разрешить показ: Если эта опция включена, мы можем показать ваш проект в нашей рассылке обновлений и на веб-сайте.
  • Разрешить индексирование в поисковых системах: По умолчанию этот параметр включен, чтобы люди находили ваш сайт через поисковые системы.
Совет: Только пользователи Standard, Pro и Teams могут удалить водяной знак FlutterFlow.
веб 4

Развернуть

Когда вы будете готовы к развертыванию, выберите Publish (Опубликовать). Это займет примерно 2-3 минуты.

веб 5
После публикации вы можете внести любые изменения в режиме реального времени для своих пользователей, снова нажав кнопку «Опубликовать».

Если вы попытаетесь опубликовать информацию о домене, который уже занят, вы получите предупреждение, подобное этому:

веб 6

Чтобы решить эту проблему, введите другой поддомен в URL сайта и снова выберите «Опубликовать».

Если вы хотите развернуть свое веб-приложение, нажмите кнопку Unpublish внизу.

Просмотр веб-приложения в реальном времени

Чтобы посмотреть живую версию вашего приложения, вы можете щелкнуть рядом с опубликованным URL вашего сайта или щелкнуть значок предварительного просмотра () рядом с кнопкой «Publish to Web».

Вы также можете скопировать URL вашего сайта, нажав на кнопку «Копировать» (), а затем вставить его в веб-браузер.

веб 7

Добавьте пользовательские заголовки

Если вы знакомы с HTML, вы можете установить любые дополнительные заголовки (например, стиль и сценарий), которые вы хотели бы использовать в опубликованном веб-приложении. Например, добавление встроенного или внешнего javascript. Это появится внутри тега <head> вашего опубликованного приложения.

Эти заголовки используются непосредственно в index.html вашего сайта, поэтому неправильно сформированные заголовки могут вызвать неожиданное поведение (так же, как и прямое редактирование index.html).

Чтобы добавить пользовательский заголовок, введите свой тег в поле ввода Custom Headers и снова опубликуйте веб-приложение.

Вы можете проверить добавленный пользовательский заголовок, открыв окно инспекции элемента (Command+Option+i на Mac или F12 на PC) и найдя ваш тег внутри тега <head>.
веб 9
веб 8

Добавление пользовательского домена

Добавление пользовательского домена к вашему веб-приложению может придать ему более профессиональный вид и ощущение, а также облегчить запоминание и поиск для ваших пользователей. Теперь мы позволяем вам подключить собственное доменное имя к вашему веб-приложению и запустить его в кратчайшие сроки. Эта функция идеально подходит для тех, кто хочет создать сильное присутствие в Интернете и повысить узнаваемость своего бренда.

Обратите внимание,

  • Только тарифные планы Pro и Teams включают один бесплатный пользовательский домен. План Teams включает один пользовательский домен для всей команды. Если вы пользуетесь тарифным планом Standard, вам необходимо приобрести пользовательский домен, поскольку он не входит в бесплатный тарифный план.
  • Только платные тарифные планы могут приобретать домены. Пользователи Standard и Pro могут купить домен на странице своей учетной записи, а владельцы Teams могут купить его в разделе «Моя организация».

Чтобы добавить пользовательский домен:

  1. Введите URL-адрес пользовательского домена. Убедитесь, что вы ввели только имя домена (без www) и расширение (например, mywebapp.com, а не www.mywebapp.com).
  2. Теперь необходимо настроить DNS. Для этого:
    1. Зайдите на сайт, на котором вы купили домен.
    2. Откройте менеджер DNS и создайте записи, как показано в пользовательском интерфейсе. Обратите внимание, что после добавления этой записи не должно быть других записей A или AAA. Вот краткие ссылки на то, как это сделать на популярных сайтах, продающих домены. 1)Godaddy 2)Namecheap 3)Google Domains. Вот как это выглядит для нашего примера проекта в Godaddy.
    3. Нажмите кнопку Подключить.
    4. Как только домен будет подключен, снова нажмите кнопку Опубликовать.
веб 10

Изменение динамической ссылки Firebase

Мы рекомендуем вам обновить схему URL-адресов динамических ссылок Firebase до https://{ваш пользовательский поддомен}.flutterflow.app, чтобы общие ссылки корректно открывались в Интернете. Это гарантирует, что ваши динамические ссылки будут работать для пользователей на всех платформах.

веб 11

Добавление поддомена в качестве авторизованного домена (Firebase)

Если вы используете аутентификацию Firebase, вы должны добавить ваш пользовательский поддомен в качестве авторизованного домена. В противном случае социальная и телефонная авторизация не будет работать.

Чтобы включить ваш поддомен в качестве авторизованного домена:

  • Откройте консоль Firebase и нажмите на Authentication (внутри раздела Build в левом боковом меню).
  • Выберите вкладку Setting.
  • Выберите Авторизованные домены в левом боковом меню.
  • Нажмите Добавить домен.
  • Введите {your-custom-subdomain}.flutterflow.app и нажмите на кнопку add.
веб 12