Вау, что бы я ни делал, этот файл, который я конвертировал в PNG, отображается как JPEG. Сначала я подумал, что Preview выполнил некачественное преобразование, но затем я использовал Affinity Photo, которому можно доверять.
Я не думаю, что менял эту настройку, так как рядом с ней нет опции «сбросить».
Когда я загружаю другое изображение в формате PNG, тип всё равно остаётся прежним. В этом файле что-то такое, что Discourse очень хочет конвертировать. Есть идеи?
Вы столкнулись с известной (хотя и редкой!) ошибкой, которая была исправлена в указанном коммите. Однако этот коммит ещё не включён в стабильный релиз Discourse.
Временная настройка параметра recompress original jpg quality на значение 100 должна предотвратить выполнение конвертации.
(…и/или вы можете попробовать снизить качество экспортируемого PNG-файла до значения, меньшего, чем установленное в параметре recompress original jpg quality.)
Просто убедитесь, что после загрузки логотипа вы вернёте этот параметр к прежнему значению!
Думаю, мне стоит получить значок за то, что я наткнулся на две ошибки в Discourse за одну неделю. 
Однако, несмотря на то, что я предпринял оба этих шага, файл всё равно конвертируется в JPEG. Я установил настройку на 100%, сохранил изображение как JPG с качеством 92%, а затем экспортировал его как PNG (не мог ли я напрямую изменить качество для PNG?). Есть ли другие идеи для обходного пути или что-то, что я мог сделать неправильно?
После переключения на ветку stable я смог воспроизвести (известную) проблему:
Но мне не удалось воспроизвести проблему с помощью предложенного обходного пути:
Признаюсь, я немного растерян!
Это также не отображается в Mozilla Firefox.
Есть ли причина, по которой баннер установки не появляется на устройствах iOS (особенно теперь, когда они поддерживают PWA)?
Да, на моем Pixelbook Go это работает потрясающе. PWA — это must-have для Chrome OS.
Потому что браузер iOS не поддерживает эту функцию и не планирует её добавлять.
То, что я предлагал ранее, — почему бы не добавить кнопку или ссылку где-нибудь на сайте для установки PWA, как объясняется в этой статье.
У нас это уже есть несколько лет:
Извините, я имею в виду менее заметную постоянную кнопку или ссылку, возможно, в меню, для пользователей без PWA.
Причина, по которой я считаю это полезным, заключается в следующем: когда у нас есть пользователь, желающий установить приложение, мы не знаем, на каком этапе он находится, и задавать вопросы и получать ответы требует много усилий. Было бы здорово иметь надежный двухшаговый процесс, который мы могли бы предложить им: например, перейти в меню-бургер → Установить приложение. Тогда нам не нужно беспокоиться о их локализации, количестве посещений, том, закрывали ли они баннер или удаляли приложение ранее, или о том, какой браузер они используют и как именно в нём формулируется опция установки.
Вероятно, большая часть путаницы здесь (включая мою собственную) связана с тем, что для разных браузеров существуют разные варианты установки PWA:
Android Chrome (т.е. браузер по умолчанию): Я предполагаю, что именно оттуда вы взяли скриншоты, которые опубликовали. Похоже, что здесь в меню «гамбургер» есть кнопка «Установить приложение». Было бы здорово, если бы она была доступна во всех браузерах, но, судя по всему, сейчас это невозможно.
iPhone Safari (браузер по умолчанию): В меню «гамбургер» нет кнопки для установки. Чтобы установить приложение, нужно нажать на значок «Поделиться» (квадрат со стрелкой вверх) и прокрутить вниз до пункта «Добавить на экран «Домой»». Судя по обсуждению здесь, добавить кнопку в меню «гамбургер» невозможно. Это действительно сохраняет приложение на домашнем экране, хотя я не уверен, что этого достаточно для получения функциональности PWA, например, сохранения предыдущего состояния.
Desktop Chrome: У меня в браузере Chrome на Mac нет кнопки установки в меню «гамбургер». Она должна там быть? Можно ли её добавить туда?
Desktop Safari: У меня в браузере Safari на Mac тоже нет кнопки установки в меню «гамбургер». Она должна там быть? Можно ли её добавить туда?
Да, именно то, что говорит @JQ331.
Решение от Falco — это меню Chrome. Под «гамбургер-меню» я имею в виду меню Discourse, а не браузера. Поскольку некоторые выше указали, что оно не работает в Safari или Firefox, этот вариант зависит от браузера. Предполагая, что его можно установить там, эта опция просто не предоставляется, поэтому вариант с меню Discourse кажется лучшим. Кроме того, это напоминает пользователю о существовании этой опции, когда он может никогда не заглянуть в меню Chrome.
Вы не можете добавлять кнопки установки на любых ресурсах, контролируемых Apple, и Apple неоднократно заявляла, что не намерена разрешать разработчикам создавать такие кнопки.
У меня она есть:
Также она отображается в адресной строке на настольных компьютерах.
Вы не видите её на своём сайте из-за всего этого дела с логотипом в формате JPG. PWA — это быстро меняющаяся технология, и критерии постоянно обновляются. Если вы хотите максимальной совместимости с PWA, рекомендую использовать наш канал стандартных релизов.
Я имел в виду гамбургер-меню Discourse (не меню Chrome). На самом деле, теперь я вижу, что скриншоты с Android тоже были из меню Chrome, а не из гамбургер-меню Discourse.
Было бы здорово добавить кнопку в гамбургер-меню Discourse — пользователи будут видеть её чаще, и это прояснит инструкции по установке как PWA. Вероятно, это не стоит больших усилий разработчиков, но станет полезным штрихом.
Похоже, что только браузеры на базе Chromium имеют приглашение к установке. Mozilla Firefox и Safari используют другие движки рендеринга.
Я просто добавил кнопку, создав компонент темы.
Просто создайте новый компонент темы…
Добавьте следующий код JS, например, в заголовок:
<script>
let deferredPrompt; // Позволяет показать приглашение к установке
const installButton = document.getElementById("install_button");
window.addEventListener("beforeinstallprompt", e => {
console.log("beforeinstallprompt fired");
// Предотвращаем автоматическое отображение приглашения в Chrome 76 и более ранних версиях
e.preventDefault();
// Сохраняем событие, чтобы можно было вызвать его позже.
deferredPrompt = e;
// Показываем кнопку установки
installButton.hidden = false;
installButton.addEventListener("click", installApp);
});
function installApp() {
// Показываем приглашение
deferredPrompt.prompt();
installButton.disabled = true;
// Ждем, пока пользователь ответит на приглашение
deferredPrompt.userChoice.then(choiceResult => {
if (choiceResult.outcome === "accepted") {
console.log("PWA setup accepted");
installButton.hidden = true;
} else {
console.log("PWA setup rejected");
}
installButton.disabled = false;
deferredPrompt = null;
});
}
window.addEventListener("appinstalled", evt => {
console.log("appinstalled fired", evt);
});
</script>
А следующий HTML разместите там, где требуется кнопка установки:
<button id="install_button" hidden>Install</button>
По умолчанию она скрыта и появится, если PWA не установлен.
Я протестировал это в Chrome.
Великолепно! Не подумаете ли вы сделать его официальным компонентом темы? Или, что ещё лучше, модифицировать компонент темы «Ссылки в меню-гамбургере», чтобы включить его? Ведь именно там я бы хотел его видеть!
Не могли бы вы загрузить изменённый код, благодаря которому кнопка «Установить приложение» будет отображаться в меню-гамбургере???
Кажется, у меня не получается это запустить. Честно говоря, я новичок во всём этом.
Я загрузил компонент, добавил JS в заголовок и установил для компонента тему по умолчанию.
Но что насчёт HTML-скрипта? Возможно ли использовать HTML в посте? Кажется, что нет. Если нет, то где я могу его реально и полезно разместить?
Спасибо! Очень надеюсь, что это мне поможет.
Думаю, это будет работать только на Android?