Pull to Refresh для iOS-приложения

:information_source: Краткое описание Добавляет функцию «потяните для обновления» в iOS-приложение
:eyeglasses: Предпросмотр Theme Creator
:hammer_and_wrench: Репозиторий GitHub - VaperinaDEV/pull-to-refresh-for-ios-app: This theme component is adds 'pull to refresh' function to iOS App... · GitHub
:question: Инструкция по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Привет :wave:

В iOS PWA отсутствует функция «потяните для обновления»: чтобы перезагрузить страницу, приходится закрывать PWA и открывать заново. Этот компонент темы восполняет этот пробел, добавляя функцию «потяните для обновления». Я отключил её на страницах чата, так как в каналах она работает ненадёжно… Точка активации — #main-outlet, поэтому, если потянуть вниз под заголовком в верхней части страницы, сработает индикатор загрузки.

При потягивании вниз индикатор появляется постепенно, а при достижении точки готовности начинает медленно вращаться с эффектом подсветки. После отпускания он начинает вращаться быстрее, а индикатор остаётся в верхней части страницы до завершения перезагрузки.

Включает несколько настроек темы для кастомизации индикатора загрузки.

Спасибо всем, кто протестировал это на новых устройствах в этой теме :hugs:

Планы на будущее:

  • Попытаться воссоздать стандартный индикатор загрузки Safari или что-то подобное. :white_check_mark:
  • Найти способ сохранять индикатор загрузки во время перезагрузки :white_check_mark:
    • использовать CSS-анимации вместо JavaScript для сохранения индикатора во время перезагрузки
13 лайков

Это также работает с DiscourseHub :flushed_face: Это здорово.

Мне приходится делать свайп вниз в течение 2–3 секунд, что немного долго, но я не знаю, связано ли это с устройствами i-devices или с самим компонентом. В целом, не проблема.

3 лайка

Когда вы тянете быстро, обновление происходит мгновенно. Но если тянуть с относительно меньшей скоростью, сначала отображается стрелка, а затем индикатор загрузки. Предполагаю, что задержка между стрелкой и индикатором загрузки намеренная — для лучшей обратной связи и во избежание лишних срабатываний. Если я ошибаюсь, поправьте меня, @Don.

3 лайка

Привет :waving_hand:

Вот как это выглядит сейчас. Я пытаюсь сделать что-то похожее на стандартный лоадер Safari. Когда вы тянете вниз, он появляется непрерывно, а когда достигает точки готовности, начинает медленно вращаться с эффектом подсветки. Когда вы отпускаете, он начинает вращаться быстрее, и мы оставляем лоадер в верхней части страницы; перед тем как страница действительно перезагрузится, лоадер скрывается.

1 лайк

Это такой глупый вопрос, и, возможно, мне стоит радоваться, но почему я не вижу никакого эффекта загрузки? Ну, я даже не вижу загрузчика Discourse — разве что здесь, на Meta, иногда, когда я использую PWA. Слишком хороший :joy: интернет-сервис?

1 лайк

Что вы имеете в виду?
Это ещё не реализовано. Можете поделиться записью экрана, показывающей, что вы видите на своём сайте во время перезагрузки?

1 лайк

Конечно, но нет. Сейчас этот компонент ничего не делает. iPad время от времени ведёт себя странно с PWA. Перезагрузка помогает. PWA сейчас немного проблематичны, а после последнего обновления iPadOS стало ещё хуже. Но теперь даже перезагрузка не помогла.

Могу ли я откатиться назад, и если да, то как?

И это «необновление» началось, как я предполагаю, после вчерашнего обновления компонента. Я, впрочем, не проверял. Но это может быть и совпадением, а настоящая проблема в операционной системе.

На iPhone всё работает. Сначала там появляется… не помню, как это называется по-английски… стрелка вниз, а затем индикатор загрузки. На iPad такого никогда не было, но при нажатии экран опускался вниз, и при отпускании форум обновлялся.

Если я сменю тему, то обновление происходит — я вижу эту очень короткую вспышку. Но во второй раз — нет. Когда я снова меняю тему, это работает один раз, но не второй.

Очень странно.

Да, я вижу, что это, вероятно, потому что я применил стиль только к мобильному виду, а ваш iPad находится в режиме рабочего стола. Я исправлю это в обновлении. Думаю, мы можем заменить стрелки и индикатор загрузки на новый загрузчик в стиле Safari.

На какой теме компонент не работает?

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

Плагины — это другое дело, не знаю.

Я никогда не забывал, что iPad — это не мобильное устройство.

Я обновил компонент с новым загрузчиком в стиле Safari. Теперь он должен лучше работать и на iPad. На самом деле на iPad есть навигационная панель внизу, которая находилась сверху и скрывала его. Я забыл об этом. :smile:

1 лайк

Отличная работа, как всегда. Всё работает отлично, и теперь смена языков стала проще. Спасибо!

Навигация в подвале наверху — звучит… логично :flushed_face:

1 лайк

Это просто название, потому что на iPhone оно находится внизу, а на iPad — вверху. Так что технически это верхняя навигация на iPad, но по привычке я называю её навигацией в футере. :sweat_smile:

Я просто думаю, стоит ли добавить автоматическую перезагрузку при опускании к готовому положению или оставить перезагрузку при отпускании? Возможно, возникнут конфликты, я ещё не тестировал это. Загрузчик Safari крутится один раз, после чего подсвечиваются только линии. Мы не можем так делать, потому что анимация подсветки линий останавливается во время перезагрузки. Но вращение может продолжаться в это время. Так что мы можем перевести загрузчик в состояние загрузки. Возможно, лучше оставить как есть: сейчас у него есть плавные CSS-анимации, которые работают во время перезагрузки, и они не совсем такие же, как у загрузчика Safari, но похожи… Кстати, какая была цель? :thinking: