Создание модуля PWA для системы "Руководитель"

[mailarn]

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

На мобильных устройствах ни чего само "не вылазит".
Надо в браузере, желательно Хром или Edge, авторизироваться в Руководителе, потом в меню браузера найти пункт "Приложения" и там уже будет меню "Установить".

Зачем вообще "изобретать велосипед". Уже есть все готовое.
https://webus.pro/catalog/detail/pwa/

В комплекте идут все инструкции и еще одна версия с максимальным кешированием и возможностью подключить пуш уведомления, но стабильную работу расширенной версии я не гарантирую ))

[Parazit00]

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

На мобильных устройствах ни чего само "не вылазит".
Надо в браузере, желательно Хром или Edge, авторизироваться в Руководителе, потом в меню браузера найти пункт "Приложения" и там уже будет меню "Установить".

Зачем вообще "изобретать велосипед". Уже есть все готовое.
https://webus.pro/catalog/detail/pwa/

В комплекте идут все инструкции и еще одна версия с максимальным кешированием и возможностью подключить пуш уведомления, но стабильную работу расширенной версии я не гарантирую ))

Спорить не буду. Я пользуюсь приложением, и сайт через какое-то время предлагает клиентам установить готовое приложение через пуш-уведомление в браузере. Также я создал APK-файл и отправляю его клиентам. Возможно, что-то работает не идеально, но пока я этого не заметил. Если бы раньше увидел ваше предложение, возможно, приобрел бы его. На данный момент стараюсь разобраться во всем самостоятельно.

[Parazit00]

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

Попробуйте вот так сделать
Добавьте в Пользовательский HTML

Код: Выделить всё

<script>
let deferredPrompt;

// Слушаем событие beforeinstallprompt
window.addEventListener('beforeinstallprompt', (event) => {
    event.preventDefault();
    deferredPrompt = event;

    // Отобразить кнопку установки
    const installButton = document.getElementById('install-button');
    installButton.style.display = 'block';

    installButton.addEventListener('click', () => {
        // Показываем диалоговое окно установки
        deferredPrompt.prompt();

        // Проверяем, как пользователь ответил на предложение
        deferredPrompt.userChoice.then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
                console.log('User accepted the install prompt');
            } else {
                console.log('User dismissed the install prompt');
            }
            deferredPrompt = null;
        });
    });
});
</script>

И в Настройка главной страницы в - информационный блок добавьте в Описание

Код: Выделить всё

<button id="install-button" style="display: none;">Установить приложение</button>

На Компьютере и на телефоне должна появится кнопка

Второй вариант.
Добавьте в Пользовательский HTML

Код: Выделить всё

<script>
let deferredPrompt; // Сохраняем событие 'beforeinstallprompt'

// Отслеживаем событие 'beforeinstallprompt'
window.addEventListener('beforeinstallprompt', (event) => {
  // Останавливаем стандартное поведение
  event.preventDefault();

  // Сохраняем событие для последующего использования
  deferredPrompt = event;

  console.log('Событие beforeinstallprompt перехвачено');

  // Показать кнопку для установки PWA
  const installButton = document.createElement('button');
  installButton.textContent = 'Установить приложение';
  installButton.style.position = 'fixed';
  installButton.style.bottom = '10px';
  installButton.style.right = '10px';
  installButton.style.zIndex = '1000';
  document.body.appendChild(installButton);

  // Обработчик клика на кнопку
  installButton.addEventListener('click', async () => {
    if (deferredPrompt) {
      deferredPrompt.prompt(); // Показываем диалог установки
      const choiceResult = await deferredPrompt.userChoice;
      if (choiceResult.outcome === 'accepted') {
        console.log('Пользователь установил приложение');
      } else {
        console.log('Пользователь отказался от установки');
      }
      deferredPrompt = null; // Очищаем сохранённое событие
      document.body.removeChild(installButton); // Убираем кнопку после установки
    }
  });
});

</script>

[syrorybin]

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

Также попробовал, не вышло.

[Parazit00]

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

Также попробовал, не вышло.

Давайте попробуем вместе! я просто хочу помочь. К тому же, кто-то может указать на мои ошибки, ведь я тоже изучаю PWA и пока не все понял, как это работает. Однако основу удалось запустить: приложение предлагает клиентам установить его.
Если что мои телеграмм для связи - https://t.me/KZ_PaRaZiT
Вот тут обновленный файл + инструкция

APK.zip

(1.61 МБ) 175 скачиваний

Чуть не забыл в фал скина по пути - /css/skins
добавьте стили для кнопки

Код: Выделить всё

/*! pwa-install-button */
.pwa-install-button {
  position: fixed;
  top: 60px; /* Отступ сверху */
  left: 20px; /* Отступ слева */
  background: linear-gradient(45deg, #4caf50, #81c784);
  color: white;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pwa-install-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}

.pwa-install-button:active {
  transform: scale(1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .pwa-install-button {
    top: 10px;
    left: 10px;
  }
}

Вот видео как у меня работает - https://shop-ex.kz/uploads/Video/PWA_test.mp4

[syrorybin]

Вот видео как у меня работает - https://shop-ex.kz/uploads/Video/PWA_test.mp4

Классно у вас получилось. То есть это именно приложение, а не pwa из браузера.
Может быть и мы доберемся до этого.

[Parazit00]

Вот видео как у меня работает - https://shop-ex.kz/uploads/Video/PWA_test.mp4

Классно у вас получилось. То есть это именно приложение, а не pwa из браузера.
Может быть и мы доберемся до этого.

И да, и нет.
Приложение добавляется на домашний экран как ярлык, но оно выглядит и ведёт себя как полноценное нативное приложение.

[syrorybin]

Приложение добавляется на домашний экран как ярлык, но оно выглядит и ведёт себя как полноценное нативное приложение.

Вау, красота.
Есть очевидные минусы?

[Parazit00]

Приложение добавляется на домашний экран как ярлык, но оно выглядит и ведёт себя как полноценное нативное приложение.

Вау, красота.
Есть очевидные минусы?

Пока что я не обнаружил никаких проблем. Текущая реализация полностью устраивает как меня, так и моих клиентов.

Тем не менее, я продолжаю изучать технологии PWA и ищу возможности для улучшения. Если удастся добавить что-то новое или сделать сервис ещё удобнее, обязательно поделюсь этим!

[Parazit00]

Друзья, поздравляю всех с Новым годом!

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

На данный момент доступны четыре языка: русский, казахский, китайский и турецкий. Сейчас я завершаю последние штрихи и работаю над функционалом настройки меню. Это позволит изменять иконки, названия и количество пунктов.

Пример:

Так же забыл упомянуть, что для разных групп меню должно быть разным. Например, у меня есть клиентский вид, склад и ПВЗ. На демонстрации представлены только два вида: клиент и склад.