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

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

к сведению

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

Опубликовать в интернете

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

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

1. Включение поддержки веба

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

Чтобы добавить поддержку платформы, перейдите в Настройки и Интеграции > Настройка проекта > Платформа > и включите переключатель Веб.

Дополнительные настройки для веба

1. Использовать оригинальную инициализацию движка: Это использует оригинальную инициализацию движка Flutter в веб-приложении, что иногда помогает улучшить время загрузки в развернутом веб-приложении.

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

   • Ничего: Если вы загружаете изображения только из своего Firebase Storage, выберите эту опцию и следуйте этим шагам здесь.
   • Развернуть с Firebase: Если изображения не хранятся в Firebase Storage, но вы используете Firebase для создания вашего приложения, выберите эту опцию и нажмите кнопку "Развернуть".
   • Пользовательский URL прокси-сервера: Если вы не используете Firebase или предпочитаете настроить свой собственный прокси-сервер CORS, вы можете указать собственный URL прокси-сервера. Если у вас его нет, вы можете создать его, следуя этим шагам здесь.

3. Импорт библиотеки Emoji: Импорт библиотеки Emoji необходим, если ваше приложение может использовать эмодзи в любом текстовом виджете. Однако это увеличит размер вашего приложения веб-версии.

к сведению

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

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

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

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

3. Решение предупреждений о совместимости с вебом

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

Любые известные проблемы Поддержки веба будут отображены как Предупреждение о поддержке платформы. Это не остановит вас от развертывания вашего приложения в интернете, но это может привести к плохому пользовательскому опыту и неожиданному поведению приложения.

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

warning

Важно: Убедитесь в том, что все пакеты pub.dev, которые вы используете, имеют поддержку для веб-платформы.

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

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

1. Перейдите в Настройки и Интеграции > Настройки приложения > Публикация в интернете.

В разделе Общие сведения введите следующие детали:

• URL сайта: Вы можете определить URL сайта, добавив субдомен, например, mywebapp.flutterflow.app. Вы можете изменить только субдомен, то есть часть перед flutterflow.app.

  warning

  • Вы можете удалить или изменить существующий субдомен, просто введя новый и нажав кнопку "Опубликовать". Обратите внимание, что изменения вашего субдомена вступят в силу только при следующей публикации.
  • Старые адреса могут перестать работать в любой момент и быть переданы другому пользователю.
  • Есть ограничение на количество субдоменов, которые можно зарегистрировать на одного пользователя. Платные пользователи могут регистрировать до 20 субдоменов. Если вы приближаетесь к лимиту, вы получите предупреждение в приложении.

• Заголовок SEO: Он отображается в предварительных просмотрах в социальных сетях и результатах поиска.

• Описание сайта: Текст, который вы хотели бы видеть в карте предварительного просмотра при обмене в социальных сетях и результатах поиска.

• Заголовок страницы: Он отображается на вкладке браузера для всех страниц вашего приложения.

• Фавикон: Иконка, которая обычно появляется перед названием веб-приложения внутри вкладки браузера. Чтобы изменить ее, щелкните на Загрузить фавикон + и загрузите иконку. Вы можете сгенерировать ее бесплатно здесь.

• Цвет строки состояния: Это для изменения цвета строки состояния при просмотре в браузере Safari на iOS и при установке в качестве PWA на мобильных устройствах.

• URL изображения для обмена в социальных сетях: Изображение по этому URL будет отображаться в карте предварительного просмотра при обмене в социальных сетях (например, в OpenGraph и карте Twitter).

• Индивидуальные заголовки страниц: Включив это, вы увидите название текущей страницы во вкладке браузера. Если вы это сделаете, убедитесь, что вы предоставите Заголовок страницы в разделе Страница > Панель свойств > Настройки маршрута.

• Показ водяного знака: По умолчанию кнопка с текстом 'Создано в FlutterFlow' появляется в качестве водяного знака в правом нижнем углу вашей страницы. Чтобы его удалить, отключите переключатель Показать водяной знак.

• Разрешить демонстрацию: Если включено, мы можем разместить ваш проект на нашем сайте.

• Разрешить индексацию поисковыми системами: Это позволяет людям находить ваш сайт через поисковые системы.

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

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

• Использовать оригинальную инициализацию движка: Это использует оригинальную инициализацию движка Flutter в веб-приложении, что иногда помогает улучшить время загрузки в развернутом веб-приложении.

к сведению

Совет: Только пользователи Стандартного, Профессионального и Командного планов могут удалить водяной знак FlutterFlow.

5. Развертывание

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

По умолчанию вы публикуете на субдомене, основанном на идентификаторе вашего проекта. Эти субдомены по умолчанию не учитываются в квоте субдоменов, и вы можете развернуть столько проектов, сколько захотите. URL будет выглядеть следующим образом: идентификатор-вашего-проекта-1234.flutterflow.app

Вы также можете изменить адрес, указав пользовательский субдоменный адрес в поле URL сайта во вкладке Настройки > Публикация в интернете, пока он доступен. На бесплатном плане вы можете иметь до 3 пользовательских субдоменных URL-адресов, а на любом из наших платных планов - до 20 пользовательских субдоменных URL-адресов.

к сведению

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

Если вы попытаетесь опубликовать на домен, который уже занят, вы получите предупреждение типа 'Ошибка резервирования субдомена: Субдомен ваш-доменное-имя уже используется другим проектом.'. Чтобы преодолеть это, введите другой субдомен в поле URL сайта и снова выберите Опубликовать.

к сведению

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

6. Просмотр живого веб-приложения

Чтобы просмотреть живую версию вашего приложения, нажмите иконку глаза рядом с кнопкой 'Опубликовать'.

---

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