Скрыть адресную строку в прогрессивных веб-приложениях

Я разрабатываю PWA с VueJS. Я начал тестировать свое приложение на реальных устройствах (Добавить на главный экран). Мое приложение рассчитано на 100% высоту, так как оно отображает карту, как вы можете видеть:

enter image description here

Кажется, что иногда переходы, которые появляются за пределами высоты окна просмотра, заставляют адресную строку появляться вверху страницы. Для PWA, я думаю, такое поведение делает приложение менее родным, а также нарушает мой дизайн (кнопка внизу в центре и весь контейнер карты не видны, если пользователь вручную не закроет адресную строку).

enter image description here

Я пробовал кое-что, что видел в других вопросах:

  • window.scrollTo(0, 1);
  • <meta name="mobile-web-app-capable" content="yes">
  • из здесь.

Меня не волнует, не скрывает ли приложение адресную строку при посещении в веб-браузере. Но, по крайней мере, я хочу, чтобы адресная строка была скрыта, когда приложение запускается как «родное» приложение (добавляется на главный экран).

Я также попытался изменить свойство display в manifest.json с standalone на fullscreen, но безуспешно.

Я знаю, что могу изменить CSS для моей кнопки и карты, чтобы сделать их «видимыми», когда отображается адресная строка, но, как я уже сказал, это делает приложение менее родным IMO.

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

Я никогда не видел такой адресной строки из PWA, добавленной на главный экран из браузера. Похоже на вкладки Таможня. Вы случайно встраиваете PWA в собственное приложение Android или это простой PWA, добавленный с помощью Chrome? developers.google.com/web/updates/2017/10/using-twa

Anand 10.08.2018 16:56

Это PWA, добавленный на главный экран с помощью Chrome. Я использовал шаблон Vuejs PWA для создания приложения muy. github.com/vuejs-templates/pwa, и приложение обслуживается по HTTPS.

Jose Hermosilla Rodrigo 10.08.2018 17:11

Вы используете настраиваемый порт в своем URL-адресе?

Mathias 10.08.2018 17:59

Здравствуй! Я не использую настраиваемый порт для обслуживания моего приложения. Но если ему что-то нужно, я использую в своем manifest.json собственный start_url, отличный от index.html.

Jose Hermosilla Rodrigo 10.08.2018 18:16

Это имеет значение для автономного окна и Chrome. Существует известная проблема с портами в URL-адресах. Как только люди перейдут на стандарт, откроется отдельное окно без адресной строки.

Mathias 10.08.2018 18:19

Но мой URL-адрес выглядит как https://example.com/appName. Нет кастомного порта. Просто start_url в манифесте выглядит как /appName/index.html. Похоже, что это другое.

Jose Hermosilla Rodrigo 10.08.2018 19:35

Да, вероятно, это не то же самое, что проблема с настраиваемым портом, если вы не используете их где-либо в своем приложении.

Mathias 10.08.2018 19:47
19
7
12 134
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Приложение PWA показывает адресную строку, когда вы пытаетесь перемещаться по страницам за пределами scope. Например, если вы установили свою область видимости в файле manifest.json как scope: "/my-pwa/", тогда все URL-адреса страницы должны иметь такой префикс: /my-pwa/page.html.

Вы это тестировали? Это имеет смысл. Я попробую протестировать ваше решение и вернусь сюда, чтобы принять ваш ответ.

Jose Hermosilla Rodrigo 29.07.2019 16:02

Да, сейчас я работаю над PWA и столкнулся с таким же поведением.

aareeph 31.07.2019 12:29

Если я понимаю, что вам нужно, я нашел, как иметь правильный display: fullscreen на Android и iOS, и это без какого-либо пользовательского интерфейса браузера, такого как адресная строка. Как сказано, @aareeph правильно установил область видимости, а затем добавьте это в header:

<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='yes' name='mobile-web-app-capable'/>

Этот ответ работает для меня. Спасибо

Mobina Khalilzade 01.03.2021 14:06

На Android вам необходимо реализовать TWA (Trusted Web Activities), чтобы включить полноэкранный режим. Поэтому я рекомендую вам использовать для этого PWABuilder. PWABuilder уже возвращает вам назначенный файл APK и assetlink.json, который вам нужно будет загрузить на свой сервер в папку .well-known в корне вашего хоста: https://www.your-domain/.well-known/assetlink.json> Таким образом Android отобразит ваш PWA в полноэкранном режиме.

TL; DR: См. Последний абзац для решения, которое в конечном итоге решило эту проблему для меня.

У меня оставалась навигационная панель на PWA, хотя я все перепробовал, поэтому я подумал, что поделюсь всем, что сделал, что сработало и как я решил это в конечном итоге, поэтому вам не придется часами искать решения в Интернете, например Мне пришлось.

Расширяя ответ @alvaropaco, в файле .zip, который вы получаете от PWABuilder, вы должен помещаете файл assetlink.json в папку с именем .well-known непосредственно под вашим доменом. Он должен быть доступен по адресу https://www.your-domain.com/.well-known/assetlink.json, иначе панель навигации не станет скрытой. Без исключений. Прочтите README.html, поставляемый с вашим .apk:

Next steps for getting your PWA into the Google Play Store You've successfully generated a Google Play Store app package (.apk file)

for your PWA. 😎

Your next steps:

  1. Deploy assetlinks.json to your server.
  2. Test your package on an Android device or Android emulator.
  3. Upload your apk file to the Google Play Store.

Each step is explained below.

1. Deploy assetlinks.json

Your zip file contains assetlinks.json. This is a digital asset links file that proves you own your PWA's domain. Upload this file to your server at https://example.com/.well-known/assetlinks.json. (Replace example.com with your PWA's URL.)

💁‍♂️ Heads up:

Digital asset links are required for your PWA to load without the browser address bar. If you're seeing a browser address bar in your app on Android, your assetlinks.json file is missing, inaccessible, or incorrect. See our asset links helper to fix this.


Если вы нет создаете свое приложение с помощью PWABuilder; возможно, используя вместо этого пузырчатая пленка или что-то еще, вот несколько источников, которые помогут вам начать создание файла assetlinks.json:


Примечание:

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

C:\Users\Me\Desktop\app>bubblewrap build
,-----.        ,--.  ,--.  ,--.
|  |) /_,--.,--|  |-.|  |-.|  |,---.,--.   ,--,--.--.,--,--.,---.
|  .-.  |  ||  | .-. | .-. |  | .-. |  |.'.|  |  .--' ,-.  | .-. |
|  '--' '  ''  | `-' | `-' |  \   --|   .'.   |  |  \ '-'  | '-' '
`------' `----' `---' `---'`--'`----'--'   '--`--'   `--`--|  |-'
                                                           `--'
Installing Android Build Tools. Please, read and accept the license agreement
build Installing Build Tools
Error: Could not find or load main class com.android.sdklib.tool.sdkmanager.SdkManagerCli


cli ERROR undefined
I posted a separate ответ на переполнение стека related to this problem.

Проверьте assetlinks.json

Чтобы убедиться, что assetlinks.json правильно распознается на устройстве Android, выполните следующие действия: (сначала необходимо установить adb и grep):

Отладка ссылок на цифровые активы

После того, как вы сгенерировали свой файл подписанный APK. его можно установить в тестовое устройство, используя adb:

adb install app-release.apk

Если этап проверки завершился неудачно (если адресная строка все еще видна), можно проверить сообщения об ошибках с помощью Android Debug Bridge, с терминала вашей ОС и с подключенным тестовым устройством.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Теперь убедитесь, что ваше приложение полностью закрыто (принудительно остановите его), и снова откройте его.

Если это не удается, вы увидите сообщение Statement failure matching fingerprint. Verification failed.. Поэтому важно для файлов обзорAndroidManifest.xml и build.gradle и проверить, совпадают ли конфигурации с assetlinks.json.

В противном случае должно появиться сообщение Verification succeeded..

источник

Что, если assetlinks.json является подтвержден, но панель навигации все еще сохраняется?

У меня была эта проблема, но я, наконец, решил ее с помощью сообщения о проблемах это GitHub. Оказалось, что у меня был параметр host в twa-manifest.json (не manifest.json, потому что я построил его с пузырьковой пленкой - он имеет большую гибкость, чем PWABuilder, хотя работает только для Android), установленный на https://example.com вместо https://www.example.com (обратите внимание на www), где мой сайт фактически размещен. Поэтому, если вы создаете его с помощью PWABuilder, сначала перейдите на свой сайт в браузере, щелкните адресную строку, скопируйте весь URL и вставьте тот в PWABuilder.

Адресная строка должна исчезнуть.

Другие вопросы по теме