Убедитесь, что на рабочем столе (Windows 10) есть кнопка «Назад» PWA

На мобильных устройствах есть аппаратная кнопка возврата, так что это не проблема.

Однако на настольных компьютерах (в основном Windows 10) приложения PWA отображаются как иногда и имеют кнопку «Назад» в верхнем левом углу.

Я хочу либо:

  • Убедитесь, что это всегда видно, или...
  • Знайте, что это не так, чтобы я мог добавить его в само приложение.

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

Похоже, что manifest.json должен управлять этим, но параметры display не помогают.

В Windows 10 это зависит от того, как установлен PWA.

Есть ли способ сделать так, чтобы кнопка «Назад» всегда появлялась?

На моей стороне нет возможности проверить, правильно ли работает мультимедийная функция display-mode? Думаю будет const has_backbutton = matchMedia("(display-mode: minimal-ui)").matches || matchMedia("(display-mode: browser)")

Kaiido 28.10.2019 10:29

@Kaiido Я не думаю, что правильно определен. minimal-ui добавляет адресную строку браузера, но лишь иногда включает обратно. standalone включает обратно, если установлено из APPX, но в противном случае нет. Стандарт не кажется ясным в любом случае, поэтому трудно поднять ошибку.

Keith 29.10.2019 14:14

Я имел в виду «медиа-функцию» css, которую можно использовать для определять, в каком режиме сейчас находится приложение, но теперь я понимаю, что неправильно понял, что вы имели в виду под «но параметры отображения не помогают», я думал, что режим был не тот, который вы установили в манифесте. Кажется, пока ничего нет, но текущее предложение, вероятно, соответствует спецификациям и делает именно то, что вы хотите: github.com/w3c/csswg-drafts/issues/4187

Kaiido 29.10.2019 14:57

@Kaiido Да, это именно моя проблема, но это еще даже не стандарт. Любая идея, как обойти это?

Keith 29.10.2019 17:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
11
4
490
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы можете проверить, доступна ли кнопка «Назад» в пользовательском интерфейсе, проверив режим отображения, а затем показать или скрыть кнопку «Назад» по мере необходимости:

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), чем стандарты улучшаются именно для того, что должно отображаться в минимальном сравнении с браузером. В любом случае, мне нужно вернуться к этому и попробовать еще раз, ура!

Keith 25.02.2021 21:31

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