Упрощение установки Discourse как PWA

У меня возникли трудности с функциональностью PWA на моем форуме Discourse (я на хостинговом плане). Мне кажется, что проблема в основном связана с Chrome, а не с самим Discourse, но я надеюсь, что кто-то знает ответы.

1 Можно ли изменить настройки установки в Chrome для Discourse после того, как эти настройки уже были применены?

Кажется, что при первом запуске PWA-приложения (Discourse или другого) Chrome спрашивает, хотите ли вы его установить. Если вы (намеренно или случайно) ответите «нет», опция установки исчезает. Есть ли способ вернуть её?

Аналогично, если я установил Discourse как PWA на главный экран рабочего стола, но затем удалил значок, я не могу найти способ «переустановить» его или как-то иначе вернуть значок.

2 Можно ли добавить кнопку на ваш форум Discourse, чтобы пользователи могли установить его как PWA (как на настольных компьютерах, так и на мобильных устройствах)? Таким образом, пользователям не нужно проходить через процесс ручной установки, который большинство из них не понимает.

4 лайка

Это может зависеть от операционной системы, но я использую Linux (Ubuntu), и здесь всё максимально просто. Справа в адресной строке у меня есть небольшой значок «+» (прямо перед иконкой «Избранное»). Нажмите на него, и установка произойдёт автоматически. После установки значок меняется на иконку «Открыть в Discourse Meta». Если я удалю PWA, значок «+» вернётся, чтобы можно было установить его снова.

Кроме того, если я открою меню Chrome во время просмотра Discourse Meta, там появится пункт «Установить Discourse Meta». После установки он меняется на «Открыть в Discourse Meta», а после удаления — снова на «Установить…».

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

1 лайк

Как вы удаляете PWA? Обратите внимание, что в моём случае для Meta Chrome (на Mac) показывает значок «открыть» в адресной строке, но я не могу найти сам значок Meta нигде, поэтому, насколько я вижу, способа удалить его нет.

Где это находится в «меню Chrome»?


Я считаю, что ключевым моментом является наличие кнопки на Discourse для установки приложения на главный экран пользователя. Я ориентирован на пользователей, которые (как и большинство людей) не знают, что такое PWA, и я хочу, чтобы у них была кнопка, на которой написано что-то очевидное, например «Установить на главный экран».

Обратите внимание, что, насколько мне известно, на Mac в Safari нет опции установки PWA.

1 лайк

Откройте его и в меню выберите «Удалить Discourse Meta».
Первый шаг: на самом деле установите PWA. У меня есть ощущение, что иконка «открыть» может вообще не иметь к этому отношения.

Какой длины у вас меню? Это одна из строк, примерно посередине. Не в какой-либо подсекции, а прямо в главном меню (по крайней мере, в Chrome на Ubuntu). Извините, сейчас мне немного сложно сделать скриншот.

Пользователи Mac :joy:

1 лайк

Кажется, вы описываете что-то совершенно отличное от того, что я вижу в Chrome на Mac.

Есть ли способ добавить в Discourse кнопку для установки его как PWA? Я почти уверен, что это можно сделать, добавив HTML и JavaScript-код на фронтенд; проверяю, не пробовал ли кто-то это сделать ранее.

Вот Chrome на моём Mac: меню находится в правом верхнем углу PWA:

Я нашёл How to provide your own in-app install experience  |  web.dev, возможно, вы могли бы создать компонент темы?

На Meta есть несколько очень полезных тем о PWA. Там может быть больше информации…

1 лайк

Ах, ключевой момент в том, что приложение должно быть уже открыто в режиме PWA, чтобы увидеть эту опцию (если открыть через обычный URL-режим, опции нет). На своём форуме я, кажется, полностью потерял кнопку установки как PWA (раньше она была…)

Я понимаю, что создание кнопки для пользователя, чтобы просто установить приложение как PWA, вероятно, потребует новой темы. Мой вопрос: пробовал ли кто-то это раньше? Я не вижу на Meta темы, посвящённой именно этому, хотя, возможно, я её упустил.

3 лайка

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

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

8 лайков

Что такое «параметры установки»?

Discourse делает это по умолчанию. Если пользователь соответствует обоим критериям Chrome и имеет уровень TL1 и выше.

Это настроено так, чтобы происходить только на мобильных устройствах, так как на настольных компьютерах это могло бы быть немного раздражающим. По крайней мере, до тех пор, пока Chrome не запустит режим с вкладками для PWA на настольных компьютерах.

6 лайков

Ага, я думал, что вы уже что-то волшебное с этим сделали :slightly_smiling_face:

Это та настройка, которая гласит: «Отображать баннер приложения DiscourseHub на устройствах iOS для обычных пользователей (уровень доверия 1 и выше)»?

И (хотя я понимаю, почему по умолчанию это не настроено для работы на рабочем столе) — есть ли способ заставить это отображаться и на рабочем столе? Возможно, для этого требуется какой-то код в плагине.

Я просто имел в виду возможность установить его, а затем позже удалить. То, чего мне не хватало, стало ясно из предыдущих частей обсуждения — что такая опция существует, но вы видите её только если открывали приложение в режиме PWA.

Нет. DiscourseHub — это наше приложение, доступное в Google Play и Apple App Store.

И это полностью контролируется браузером, поэтому мы ничего не можем сделать с тем, как работает удаление.

3 лайка

Могу подтвердить, что PWA отлично работает на моем Chromebook, по крайней мере! Я настроил PWA как для Meta, так и для нашего внутреннего Discourse :flexed_biceps:

3 лайка

Чтобы удалить PWA, нужно запустить его либо через Launchpad, либо двойным щелчком по значку в папке ~/Applications/Chrome Apps. После этого опция удаления появится в меню.

Если приложение запускается в обычном окне Chrome вместо режима PWA, просто удалите значок из папки Chrome Apps. Единственное различие между этими методами в том, что первый предложит очистить данные сайта в Chrome, а второй — нет. :slight_smile:

Понял. Спасибо за эту деталь.

Есть ли в панели управления настройка, которая это контролирует? Я её не нахожу.

Можно ли сделать так, чтобы подсказка «установить» появлялась на Discourse для десктопа так же, как на мобильных устройствах?


P.S. Здорово, что Discourse поддерживает PWA. PWA — это дар для разработчиков, они продвигают открытый веб и делают множество других полезных вещей.

1 лайк

Я также не могу понять, как переустановить PWA, и хотел бы, чтобы в меню или настройках была опция, которая выполняла бы то же самое, что и это приглашение:

image

Как снова попасть туда? Сейчас на моем Android/Chrome я не могу найти никакого способа установить приложение. Всё, что я могу сделать, — это использовать Chrome, чтобы добавить на домашний экран. Это то же самое?

Кажется, что это не совсем то же самое, потому что поверх иконки моего сайта появляется иконка Chrome. Однако, я думаю, я получаю уведомления.

В текущей версии Chrome Beta для Android я вижу на Meta: «Установить приложение»

В текущей версии Chrome Stable для настольных ПК я вижу на Meta:

@riking спасибо. Но у меня в Chrome есть только опция «Установить на главный экран». И я бы очень хотел снова увидеть это диалоговое окно/подсказку, но не знаю как.

ОБНОВЛЕНИЕ: вы правы, даже после удаления Meta в меню Chrome у меня есть опция «Установить приложение».

Почему на моём сайте Discourse: community.morphmarket.com это не так? Мы используем SSO, но я не могу вспомнить ничего ещё особенного. ИЛИ это какое-то особое «состояние», в котором сейчас находится мой Pixel 3?

Как я уже говорил, это немного похоже на то, что приложение УЖЕ установлено, потому что оно работает в полноэкранном режиме — но это достигнуто через «Добавить на главный экран», а не «Установить приложение».

1 лайк

Потому что вы используете JPG для логотипа вашего сайта. Перейдите в настройки сайта и загрузите PNG в поле manifest icon.

3 лайка

@Falco, вау, я бы такого не предположил. Я конвертировал изображение в PNG и обновил этот единственный значок, но пока не вижу эффекта, связанного с PWA. Нужно ли мне очистить кэш на сайте или на телефоне?

Я конвертировал ваш логотип в PNG и загрузил его на мой тестовый сайт с последней версией — всё работает отлично. На вашем сайте в веб-манифесте я всё ещё вижу JPG.

Вы меняли значения по умолчанию для настройки «качество PNG в JPG»?

5 лайков