Компонент поможет подготовить ваш сайт к работе с Progressive Web Apps (PWA).
Progressive Web Apps (Прогрессивные веб приложения) — это приложения, которые работают через веб внутри браузера, но при этом выглядят и ведут себя как нативные приложения. Google акцентирует три основных особенности PWA:
Надежность – мгновенная загрузка и никаких сообщений об ошибке даже при нестабильном соединении
Скорость – высокая отзывчивость, плавная анимация и никакого тупого скроллинга
Привлекательность – сайт ощущается как нативное приложение для платформы с продуманным интерфейсом
Установка и настройка
После установки зайдите в админку — компоненты — PWA инструмент и выполните 3 шага.
Загрузка иконки — иконки отображается в списке приложении в телефонах.
Манифест — хранить данные о вашем сайте, имя приложение,
После этого посетители вашего сайта (если их браузер поддерживает), увидят запрос на установку сайта и будет работать как приложение. При посещение страниц через приложение, они кэшируются и потом можно посмотреть их даже если нет интернета.
Возможные проблемы и вопросы
1) Расширение Lighthouse показывает оценку меньше 100. Такая проблема возникает при повтором сканирование сайта. т.е. первый раз показывает 100, потом расширение перестает увидит манифест и другие скрипты, не знаю с чем это связано, но помогает только полная очистка кэш браузера.
2) Сайт без интернета криво отображается. Такая проблема возникает когда вы не указали какой то необходимый скрипт для кэширование (см. настройки Service worker), воспользуйтесь подсказкой при указанны файлов на кэширования.
3) Как остановить/перезагрузить работу Service worker? — для этого в Хроме нажмите F12 — вкладка Application — Service Workers — нажмите кнопку Unregister
Реклама #
Capitan 6 лет назад #
Capitan 6 лет назад #
My-InstantCMS.Ru 6 лет назад #
Попробуйте зайти в настройки Манифеста и ServiceWorker и нажать Сохранить
Зайдите на свой сайт, нажмите F12 (в хроме) - вкладка Console - там должно быть надпись "Успешная регистрация службы ServiceWorker:"
Александр Витальевич 6 лет назад #
Алексей Т 6 лет назад #
Александр Витальевич 6 лет назад #
RSN 6 лет назад #
Что бы всем не объяснять что такое PWA вот тема, в ней обсуждение этого приложения, и пост в котором есть статья по PWA:
/forum/thread30176-2.html#294583
Или смотрите в сети статьи на тему "что такое PWA".
vikont 6 лет назад #
Сегодня с новой версией и новым описанием наконец дошло как все установить, чтобы работало!
Видимо в тестовом не заработал Service worker и как то не легла душа, когда уперся в "стену".
Самое трудное в компоненте - это настроить Service worker
Какие именно файлы указывать, а какие не надо? Для меня это загадка и сейчас!
А если у меня более 100к страниц, то как я могу их все кешировать?...
Для таких как я нужна общая стратегия: что обязательно внести в список, а что по усмотрению. Если список обязательного большой, тогда хорошо бы процесс автоматизировать.
My-InstantCMS.Ru 6 лет назад #
Посмотрите Подсказку, там примерно выводиться список подключаемых скриптов вашего сайта или можете открыть исходный код своего браузера и посмотреть какие скрипты подключается к вашему сайте внутри <head></head>
Например там подключается скрипт /templates/default/css/theme-widgets.css без этого файла, виджеты криво будут отображается на сайте, если не указать этот файл в настройках Service worker, тогда и в приложении криво будет отображаться, когда нет интернета
RSN 6 лет назад #
$this->addMainCSS("templates/{$this->name}/css/bootstrap.min.css");
Все это копирую.
Убираю все лишнее оставляя только путь до файлов (и указывая свой шаблон)
templates/ваш шаблон/css/bootstrap.min.css
После этого в "черновую" готово.
Но для более точной настройки надо посмотреть какие еще скрипты и стили подключаются на странице
Например в слайдерах, виджетах и т.п.
Только счетчики не надо)).
Проверять можно так: вначале все сделать, установить приложение на телефон,
Походить через него по страницам, после этого отключить интернет на телефоне.
И опять открыть сайт через приложение (с отключенным интернетом).
Если страницы по которым вы ходили откроются без искажений, значит все что надо подключено.
Если при отключенном интернете открыть страницу, на которую не заходили при включенном интернете,
Должно появится уведомление о том что нет интернета...
RSN 6 лет назад #
Для таких как я нужна общая стратегия: что обязательно внести в список, а что по усмотрению. Если список обязательного большой, тогда хорошо бы процесс автоматизировать.
Вносить все файлы .js и .css (кроме счетчиков, с кнопками соц. сетей не знаю, как быть, я не вносил, все таки не многие будут пользоваться приложением если нет сети)))
Автоматизировать не получится, у всех эти файлы свои, свои шаблоны, приложения и т.д.
SmartControl 6 лет назад #
My-InstantCMS.Ru 6 лет назад #
RSN 6 лет назад #
Там все должно работать...
Если не в оффлайне.
Открывается же обычный сайт, как и через браузер...
My-InstantCMS.Ru 6 лет назад #
SmartControl 6 лет назад #
Без интернета телефон можно даже в руки не брать, в такие моменты он обычно на зарядке))
letsgo 6 лет назад #
SmartControl 6 лет назад #
Я бы и сам проверил, если кто-то поделится в паблик/в личку сайтом на Инстанте с подключенным компонентом (себе не ставлю на демо, там нет сертификата). Если допилить PUSH уведомления на стороне сайта и они будут стабильно улетать авторизованным пользователям по всем необходимым типам уведомлений, то может получиться неплохая штука как минимум для Android. А яблочные как-нибудь и браузером обойдутся пока. Для них нужно или что-то серьезней или ждать и надеяться, что они реализуют более красивую поддержку технологии.
Социальное приложения для смартфона без индивидуальных пушей это как-то несерьезно (мнение сугубо личное, спорить не нужно - или согласны или нет).
Я у себя индивидуальные пуши по уведомлениям инстанта для нативного приложения уже реализовал, может и для Android PWA можно было бы добавить функционал.
letsgo 6 лет назад #
SmartControl 6 лет назад #
Василич 6 лет назад #
SmartControl 6 лет назад #
SmartControl 6 лет назад #
My-InstantCMS.Ru 6 лет назад #
Данный момент нет возможности проверить в iOS, возможно кто то другой проверить
Capitan 6 лет назад #
My-InstantCMS.Ru 6 лет назад #
skewes 6 лет назад #
Еще и бесплатно раздает)))
Получу зп, закину обязательно рублей 300 вам на печеньки к чаю)))
Очень много полезного делаете для сообщества!
Capitan 6 лет назад #
А дальше то, что произойти должно? Не понятно что нужно в итоге получить!
elv3327 6 лет назад #
vikont 6 лет назад #
elv3327 6 лет назад #
RSN 6 лет назад #
У Вас все так? (у меня пока еще тестовая версия стоит, но и в этой примерно то же должно быть)
Lighthouse должен показывать оценку PWA 100% если не показывает, устраняйте ошибки которые там написаны ниже.
У меня было две:
1-я сайт открывался не со всех зеркал по https ( а я и не знал )),
2-я сайт грузился дольше 10 секунд (имеется ввиду полная загрузка всей страницы и скриптов, а не отрисовка) решил установкой мобильного шаблона.
Если показывает, зайдите на сайт со смартфона, через браузер Хром.
Должно появится предложение установить иконку на главный экран телефона.
Соответственно её надо установить.)
Dmitry 6 лет назад #
Не нашел такого файла совсем.
My-InstantCMS.Ru 6 лет назад #
RSN 6 лет назад #
А зачем его искать? Заполните в админке все шаги, он сам и создасться уже записанный))
Dmitry 6 лет назад #
Создал сам, права семерки выставил, не пишется.
elv3327 6 лет назад #
RSN 6 лет назад #
Тестировать через Lighthouse с десктопа, я так делал.
Потом если PWA 100% зайти с мобильного...
RSN 6 лет назад #
elv3327 6 лет назад #
elv3327 6 лет назад #
Capitan 6 лет назад #
elv3327 6 лет назад #
Capitan 6 лет назад #
elv3327 6 лет назад #
elv3327 6 лет назад #
RSN 6 лет назад #
На рабочем сайте часто так делать возможно не надо (у пользователей в браузере будет сбрасываться кэш сайта), НО иногда для того что бы опять предлагал установку - можно так...
Или на телефоне в браузере удалить "Историю", тоже опять предложит...
elv3327 6 лет назад #
elv3327 6 лет назад #
Pisces 6 лет назад #
Capitan 6 лет назад #
elv3327 6 лет назад #
elv3327 6 лет назад #
Capitan 6 лет назад #
SmartControl 6 лет назад #
RSN 6 лет назад #
Кому лень прочитать статью. Можно прочитать мой пост при тестировании, что бы потом не искать того чего оказывается не может быть))
/forum/thread30176-2.html#294583
А здесь, что и на каких браузерах происходит (или не происходит, как позже выяснилось)
/forum/thread30176-2.html#294560
elv3327 6 лет назад #
В браузере хром ... (меню) - настройки - настройки сайтов - всплывающие окна - разрешены
Должно появится уведомление внизу браузера
Настройки - ~ об устройстве - ~ версия ядра - нажать 10 раз - вы станете разработчиком
Если нажать на всплывающее окно - установить ярлык на рабочий стол - разрешить - установится приложение
elv3327 6 лет назад #
My-InstantCMS.Ru 6 лет назад #
И никаких прав разработчика и другие настройки не требуется
RSN 6 лет назад #
Настраивать ничего не надо. Несколько раз пробовал с чистых заводских установок, ставить Хром и сразу (без настроек) открывать сайт.
Другой вопрос, что иногда может не появится из-за того что сайт медленно открывается (как вероятная причина, других не нашел).
Вообще заметил, что не 100% что вообще может появится предложение даже в Хроме...
Возможно связано со скоростью загрузки или кэш где то остается (не знаю)....
Capitan 6 лет назад #
RSN 6 лет назад #
RSN 6 лет назад #
elv3327 6 лет назад #
SmartControl 6 лет назад #
SmartControl 6 лет назад #
elv3327 6 лет назад #
elv3327 6 лет назад #
Remi 6 лет назад #
Не хватает полосы прогрузки страниц как в хроме;
Возможность убирать экран приветствия;
Возможность задавать фон как изображение;
PUSH уведомления;
elv3327 6 лет назад #
Remi 6 лет назад #
elv3327 6 лет назад #
elv3327 6 лет назад #
Capitan 6 лет назад #
SmartControl 6 лет назад #
На айфоне вам надо руууучками из менюшки добавить сайт на рабочий стол и если все норм (я пробовал из safari), то он добавится как приложение PWA.
Capitan 6 лет назад #
SmartControl 6 лет назад #
2. внизу в панели браузера кликнуть на кнопку "Поделиться" (посередине) - это там где можно поделиться ссылкой в твиттер, фейсбук и тд..
3. там в нижней строке есть иконки "В список для чтения", "Добавить закладку"... Выбирайте "На экран Домой"
это добавит ссылку на сайт на рабочий стол. Если сайт настроен как надо, то при клике на иконку откроется PWA приложение, в противном случае откроется страница сайта в браузере
Capitan 6 лет назад #
Capitan 6 лет назад #
Remi 6 лет назад #
My-InstantCMS.Ru 6 лет назад #
Проверил на андроиде - хром, всё работает без проблем
Если один раз установить или отказаться от установки, больше не предлагает, придется вручную Добавить в главный экран
SmartControl 6 лет назад #
На IOS все нормально - руками добавил на рабочий стол. PWA работает.
Регистрация сработала, авторизация сохраняется при открытии/закрытии. Но при сворачивании приложения, оно когда разворачивается то перегружается и снова главная страница.. Но это известная штука на IOS, ничего нового. Фотка на аватар загрузилась.
Короче, работает так как и должно.
Capitan 6 лет назад #
Василич 6 лет назад #
elv3327 6 лет назад #
Василич 6 лет назад #
elv3327 6 лет назад #
Василич 6 лет назад #
Мой коммент хоть ясен?
Я переведу - демоприложение вертится независимо от того, разрешен ли в телефоне автоповорот, или нет.
Этот коммент скорее к разрабам, т.к. автоповорот должен зависеть от "системного" автоповорота.
elv3327 6 лет назад #
Василич 6 лет назад #
Ну ёмаё.
elv3327 6 лет назад #
vikont 6 лет назад #
elv3327 6 лет назад #
elv3327 6 лет назад #
skewes 5 лет назад #
Добавьте пожалуйста в ваш формат копирование ссылок.
Так как сейчас нет возможности с пва формата копировать ссылку)))
Очень нужная вещь)))
My-InstantCMS.Ru 5 лет назад #
skewes 5 лет назад #
А где у вас в формате пва адрес ссылки показывается?
У меня нет ссылки именно если с пва смотреть.
lakomet 5 лет назад #
skewes 5 лет назад #
lakomet 5 лет назад #
skewes 5 лет назад #
Кто из Юзеров вообще додумается туда залезть, чтобы скопировать URL ?
Вот мне это слабо представляется если честно...
@elv
elv 5 лет назад #
RSN 2 года назад #
В компоненте (в админке) есть счетчик установок:
Проблема в том (на двух сайтах), что считает только до 1000. Хотя установок уже больше (количество строк в БД).
Подсчет выводится в файле:
\templates\default\controllers\pwatools\index.tpl.php
стр. 21
по числу строк в столбце (БД) data (насколько понимаю) так:
Может кто подскажет как сделать что бы выводил правильно?
(А если кто то посмотрит, в том же файле, и подскажет как сделать лучший подсчет количества «Повторно зашли» будет вообще замечательно)
RSN 2 года назад #
И да… Если кого интересует, компонент работает нормально, с учетом, как (и где) должна работать PWA...
akokna 1 год назад #
Добрый день. Компонент работает отлично, спасибо автору. А может кто нибудь знает как изменить содержимое всплывающего окна при установке PWA версии сайта, дополнить своим текстом например. Возможно ли это вообще?
My-InstantCMS.Ru 1 год назад #
Давно не интересовался тематикой PWA, может за 4 года там появились новые фишки, но всплывающее окно всегда делал сам браузер и текст тоже от туда
akokna 1 год назад #
Спасибо, подозревал что это сам браузер делает, но думал а вдруг прогресс дошёл. Поставил пользовательскую кнопку Установки PWA, чтобы люди не ждали появления приглашения, а при желании сами активировали установку. Всё шикарно. Хотел вот ещё некоторые пояснения, или описания добавить, в упомянутом всплывающем окне, но Увы.
Make 1 год назад #
skewes 1 год назад #
Здравствуйте!
1. Может сделаете обновление, чтобы на айфонах также можно было устанавливать PWA?
2. Вот такая интересная статья есть — https://habr.com/ru/post/439238/ — может как расширенную версию платную сделать вам)))
RSN 1 год назад #
Поддерживаю. Возможно некоторые фишки (пуш уведомления и т.д.) можно подсмотреть на этом бесплатном приложении для Joomla:
extensions.joomla.org/extension/pwa-progressive-web-app/
CEH9I 1 год назад #
Тоже интересует пуш, если будет складчина с радостью поучаствую.
Саня 1 год назад #
Тоже готов поучаствовать в складчине, если добавят пуш. Может кто напишет автору? И узнает возможность такой разработки и сумму?
CEH9I 1 год назад #
Я написал. Работа в скором времени будет ввестись. Ждем новостей.
Саня 15 дней назад #
Добрый день. Ещё пару месяцев назад ставил этот компонент себе на сайт, и всё прекрасно работало. Сейчас его нет в каталоге(или я не могу найти). Какая причина удаления?
fincheck 14 дней назад #
Приветствую.
Вроде как разработчик отошел от дел и видима убрал из каталога, чтобы не тревожили.
pupsik 14 дней назад #
Может у кого-то на диске завалялось. Не вижу опции для скачивания установленного компонента с инстант.
Никогда не понимал причины удаления. Ну надоело, решил другими делами заняться. Подпиши к компоненту «Не поддерживается» и давай до свидания. Удачи.
Нет надо подлянку сделать. если найду, обязательно скину на гитхуб. А чтобы что.
Fuze 14 дней назад #
Что вы собрались скидывать на гит? Компонент был бесплатный, автор его снял с публикации, на сайте он остался. Пробовали написать ему без вот этого всего?
pupsik 14 дней назад #
Я что-то не по теме сказал?
Added:
В момент написания Мной сего ответа про ГИТ, этого дополненя не было.
Fuze 14 дней назад #
Да, хамство и злоба.
Автор уже включил дополнение и вы можете скачать.
pupsik 14 дней назад #
В момент написания, да. Никогда не знаешь как пройдет «Update Instant» и надо будет компонент переустановить, а его и нет.
Автор дал доступ, на этом я его благодарю и извиняюсь.
My-InstantCMS.Ru 14 дней назад #
Я их отключил, потому что заметил что на двух сайтах клиента сайт наоборот стал медленней грузиться, т.е. белый экран 2-3 секунды и резко подгружается страница.
Если у вас не так, скачайте и используйте.
Или используйте старую версию, вроде таких проблем не было.
На данный момент нет времени копаться в чем причина
pupsik 14 дней назад #
Вы же удалили её, люди и спрашивают, где взять? Версия бесплатная, я не вижу в чем проблема. Если вы говорите что плохо работает, может кто либо и починил и выложил.
Вот сейчас удалил иконку, и наново установил. Работает все хорошо на последней версии инстант.
У меня он стоит версия 1.0.0.
Надо скачать и посмотреть. Так как я у себя менял (какой то из файлов js).