На мобильных устройствах есть аппаратная кнопка возврата, так что это не проблема.
Однако на настольных компьютерах (в основном Windows 10) приложения PWA отображаются как иногда и имеют кнопку «Назад» в верхнем левом углу.
Я хочу либо:
Я не хочу делать и то, и другое - если кнопка «Назад» является видна, мне не нужна вторая кнопка в моем приложении. Я никогда не хочу показывать это при посещении приложения в браузере.
Похоже, что manifest.json
должен управлять этим, но параметры display
не помогают.
В Windows 10 это зависит от того, как установлен PWA.
Есть ли способ сделать так, чтобы кнопка «Назад» всегда появлялась?
@Kaiido Я не думаю, что правильно определен. minimal-ui
добавляет адресную строку браузера, но лишь иногда включает обратно. standalone
включает обратно, если установлено из APPX, но в противном случае нет. Стандарт не кажется ясным в любом случае, поэтому трудно поднять ошибку.
Я имел в виду «медиа-функцию» css, которую можно использовать для определять, в каком режиме сейчас находится приложение, но теперь я понимаю, что неправильно понял, что вы имели в виду под «но параметры отображения не помогают», я думал, что режим был не тот, который вы установили в манифесте. Кажется, пока ничего нет, но текущее предложение, вероятно, соответствует спецификациям и делает именно то, что вы хотите: github.com/w3c/csswg-drafts/issues/4187
@Kaiido Да, это именно моя проблема, но это еще даже не стандарт. Любая идея, как обойти это?
Вы можете проверить, доступна ли кнопка «Назад» в пользовательском интерфейсе, проверив режим отображения, а затем показать или скрыть кнопку «Назад» по мере необходимости:
function hasBackButton() {
const isMinimalUI = window.matchMedia("(display-mode: minimal-ui)").matches;
const isBrowserUI = window.matchMedia("(display-mode: browser)").matches;
return isMinimalUI || isBrowserUI;
}
Если приложение находится в minimal-ui
или browser
, кнопка «Назад» будет видна в UX браузера, в противном случае ее не будет. Я протестировал это с помощью https://basic-pwa-minimal.glitch.me/ и установил его в Windows через Edge, а также использовал PWABuilder.com для создания APPX, который я установил. В обоих случаях код сообщается правильно.
Спасибо! +1 и ответ. Сейчас это кажется гораздо более последовательным, хотя я подозреваю, что это больше связано с тем, что Edge основан на Chromium (этот вопрос был из 2019 года, когда старое отображение только Edge, казалось, отображалось на минимальном уровне при установке через APPX), чем стандарты улучшаются именно для того, что должно отображаться в минимальном сравнении с браузером. В любом случае, мне нужно вернуться к этому и попробовать еще раз, ура!
На моей стороне нет возможности проверить, правильно ли работает мультимедийная функция
display-mode
? Думаю будетconst has_backbutton = matchMedia("(display-mode: minimal-ui)").matches || matchMedia("(display-mode: browser)")