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