Как посмотреть предварительную версию приложения

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

В Firebase Studio доступен предпросмотр приложения в окне рядом с редактором кода.

Как включить и настроить среду предварительного просмотра

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

1. В рабочей области откройте файл .idx/dev.nix.

   Firebase Studio автоматически генерирует этот файл при создании рабочей области и добавляет в него среды предварительного просмотра согласно выбранному шаблону. Если в репозитории кода в Firebase Studio нет этого файла, создайте его самостоятельно и задайте для атрибута idx.previews значение true. Затем добавьте необходимые параметры конфигурации, как показано в примере ниже.

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # Enable previews and customize configuration
     idx.previews = {
       enable = true;
       previews = {
         # The following object sets web previews
         web = {
           command = [
             "npm"
             "run"
             "start"
             "--"
             "--port"
             "$PORT"
             "--host"
             "0.0.0.0"
             "--disable-host-check"
           ];
           manager = "web";
           # Optionally, specify a directory that contains your web app
           # cwd = "app/client";
         };
         # The following object sets Android previews
         # Note that this is supported only on Flutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

   Полный список атрибутов Nix в Firebase Studio можно найти в разделе Nix и Firebase Studio.

2. Перезапустите среду.

   • Откройте панель команд (Cmd+Shift+P или Ctrl+Shift+P) и выполните команду Firebase Studio: Hard restart (Firebase Studio: принудительный перезапуск).
   • Когда придет уведомление о том, что конфигурация среды обновлена, нажмите Rebuild environment (Перезапустить среду).

   Когда вы измените файл dev.nix и перезапустите среду, в рабочей области появится панель предпросмотра. В зависимости от настроек вы увидите на ней вкладки Android и/или Web (Веб-версия).

Как использовать предварительный просмотр

В Firebase Studio для проектов на Flutter доступен предпросмотр в браузере Chrome и эмуляторах Android. Приложение устанавливается в среду предварительного просмотра, что позволяет полностью протестировать его прямо в рабочей области.

Как обновлять предварительные версии для Android и браузеров

Firebase Studio использует фреймворки и их функции горячей перезагрузки (например, npm run start и flutter hot-reload), чтобы ускорить внутренний цикл разработки. Ниже перечислены типы перезагрузки, которые доступны в Firebase Studio.

• Горячая перезагрузка или горячая замена модулей (HMR) выполняется автоматически при сохранении файла. Предварительная версия обновляется без перезагрузки страницы (в веб-версии) или без перезапуска или переустановки приложения (в эмуляторах). Такой подход помогает сохранять текущее состояние приложения, но может не всегда работать корректно.

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

• Принудительный перезапуск системы предпросмотра в Firebase Studio означает остановку и повторный запуск веб-сервера приложения.

Все эти варианты можно найти на панели инструментов в окне предпросмотра и на панели команд (Cmd+Shift+P на устройстве с macOS или Ctrl+Shift+P на устройстве с ChromeOS, Windows или Linux) в категории Firebase Studio.

Чтобы воспользоваться панелью инструментов предпросмотра:

1. Нажмите на значок Reload (Перезагрузить), чтобы обновить страницу. Будет выполнена полная перезагрузка. Если вам нужен другой тип, нажмите на стрелку рядом со значком перезагрузки.

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

Как поделиться предварительной версией в браузере

Чтобы получить обратную связь от других пользователей, откройте им доступ к предварительной версии приложения в браузере и отправьте им прямую ссылку на нее:

1. Чтобы открыть меню общего доступа, на панели инструментов в окне предпросмотра выберите значок Share Preview Link (Поделиться ссылкой на предварительную версию) справа от адресной строки.

2. Откройте доступ к рабочей области одним из следующих способов:

   • Сделайте предварительную версию общедоступной. Это позволит любому пользователю в интернете подключиться к вашему серверу предпросмотра, пока рабочая область активна и общедоступна.

   • Настройте доступ к рабочей области. Поделитесь ею только с выбранными вами пользователями.

3. Нажмите Copy preview URL (Скопировать URL предварительной версии), чтобы скопировать прямую ссылку на предварительную версию. Затем отправьте ее тем, от кого вы хотите получить обратную связь. Чтобы открыть предварительную версию на мобильном устройстве, воспользуйтесь QR-кодом.

Как настроить автосохранение и горячую перезагрузку

По умолчанию Firebase Studio автоматически сохраняет изменения через секунду после того, как вы закончите вводить текст, и запускает горячую перезагрузку. Вы можете указать другой интервал в настройках Firebase Studio или отключить автосохранение.

Информация по теме

• Как опубликовать приложение с помощью Firebase
• Как отслеживать показатели приложения