Web App Install Banner 1.0

Увеличение взаимодействия с веб-приложение установить баннер для вашего сайта XenForo

Метки:
  1. Bodanna
    Что это делает добавить установки баннера, который показывает, при определенных обстоятельствах, когда кто-то посещает ваш сайт с помощью Chrome на Android устройства. Ваш сайт должен быть протокол HTTPS для этой работы.

    См: https://developers.google.com/web/u...p-install-banners-in-chrome-for-android?hl=en

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

    ZIP файл содержит пять файлов, которые должны быть загружены на ваш форум корня после редактирования: manifest.json, пусковая-икона-2x.png, пусковая-икона-3x.png, пусковая-икона-4x.png, и sw.js ,

    manifest.json должен быть отредактирован, чтобы заменить детали, показанные ниже в оранжевый цвет с вашими деталями сайта:

    Код:
    {
      "short_name": "SeriousCompacts",
      "name": "SeriousCompacts.com - Quality Photography with Smaller Cameras",
      "icons": [
        {
          "src": "launcher-icon-2x.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": "launcher-icon-3x.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": "launcher-icon-4x.png",
          "sizes": "192x192",
          "type": "image/png"
        }
      ],
      "start_url": "https://www.seriouscompacts.com/?utm_source=webapp",
      "display": "standalone",
      "orientation": "portrait"
    }
    START_URL ссылается на страницу, которую вы хотите быть загружены, когда кто-то запускает свой веб-приложение. Ваш может заканчиваться / форумах или index.html в зависимости от вашей домашней страницы URL. При желании можно добавить параметры кампании для отслеживания в Google Analytics (благодаря @Pierce этой рекомендации).

    Три PNG файлы (пусковая-иконка-2x.png, пусковая-икона-3x.png, пусковая-значок-4x.png) должен быть заменен с вашим логотипом в формате PNG на эти размеры изображения (96x96, 144x144, 192x192px, соответственно ).

    Файл sw.js может быть загружен без предварительного редактирования. То есть именно то, как это предусмотрено Google здесь: https://github.com/GoogleChrome/sam...-worker/custom-offline-page/service-worker.js

    Я ничего, кроме имени файла (сервис-worker.js изменено на sw.js) не изменится.

    И, наконец, добавьте следующие строки в ваш шаблон PAGE_CONTAINER сразу после тега <HEAD>.


    Код:
    <link rel="manifest" href="/manifest.json">
    <script>
        window.addEventListener('load', function() {
          var outputElement = document.getElementById('output');
          navigator.serviceWorker.register('sw.js', { scope: '/' })
            .then(function(r) {
              console.log('registered service worker');
            })
            .catch(function(whut) {
              console.error('uh oh... ');
              console.error(whut);
            });
          window.addEventListener('beforeinstallprompt', function(e) {
            outputElement.textContent = 'beforeinstallprompt Event fired';
          });
        });
    </script>

    Это было взято из примера Google здесь: https://github.com/GoogleChrome/sam...all-banner/basic-banner/index.html~~HEAD=pobj с небольшим изменением в объеме от '. / 'до' / ', а также такое же изменение имени файла упоминалось ранее (сервис-worker.js изменено на sw.js).

    Мой форум корень тоже мой изначальный. Если ваш корневой форум находится в директории под начало координат, то вам может понадобиться изменить путь к вашему manifest.json и sw.js соответственно.

    В настоящее время Chrome устанавливается автоматически показывать баннер тогда и только тогда, когда кто-то посещает ваш сайт, по крайней мере в два раза, разделены по меньшей мере 5 мин. Если кто-то отвергает или игнорирует баннер, это не похоже, чтобы показать еще раз, если они не удалить данные о работе браузера с Chrome.

    Некоторые удобные инструменты для проверки вашего баннера:

    1) Включить хром: // флаги / # двухконтурности приложение-баннер-обручальных-чеки, чтобы заставить баннер, чтобы показать без проверки, если вы побывали дважды отделены друг от 5 мин. Не забудьте отключить это позже, в противном случае баннер будет держать выскакивают.

    2) Если баннер не работает для вас, проверить свой адрес в этом manifest.json валидатора: Web Manifest Validator

    3) Если баннер не работает для вас, инструменты пользователя для разработчиков в Chrome, и посмотреть на вкладке Приложения. Проверка сферы обслуживания и манифеста, который должен выглядеть следующим образом:
Поделиться этой страницей в