PWA Модуль

Установка

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

Для установки модуля на страницу нужно добавить следующий тег в любом месте на странице:

<script defer src="https://sm-wa.com/lib.js"></script>

Web Push

Для подписки пользователя на пуш уведомления нужно использовать функцию pushSubscribe:

    pushSubscribe( [before], [after] )
  

Чтобы убедиться, что необходимые внешние библиотеки подключены, эту функцию нужно вызывать внутри события DOMContentLoaded объекта document

В качестве аргументов pushSubscribe принимает две функции:

1. before (функция): будет выполнена, если подписка возможна, прямо перед тем как показать пользователю стандартное предложение подписаться.
2. after (функция): будет выполнена после того, как пользователь выберет подписаться или запретить уведомления, либо если браузер не даст подписаться.

Before

  type Before = (subscribe: function, reject: function) => void
          

Если эта функция передана в pushSubscribe, то она берет на себя управление перед предложением подписаться и, в зависимости от объявленных в ней условий или событий, вызывает функцию subscribe() и выводит предложение подписаться. Либо вызывает функцию reject( [error] ) и передает код в функцию after c ошибкой. Если эту функцию не передавать в pushSubscribe, то предложение подписаться будет отображено сразу.

Данная функция будет выполнена только, если подписка возможна и пользователь еще не подписан.

After

  type After = (result: boolean|Error) => void
          

Эта функция будет вызвана после того как пользователь подписался, либо в случае возникновения ошибки. Если result === true, значит пользователь подписался, в противном случае в result будет ошибка с описанием проблемы. Это хорошее место для отправки конверсии или чтобы скрыть окно, предлагающее подписку.

Полный пример

В этом примере подписка будет предложена пользователю, после того как он нажмет на кнопку «Подписаться»:

Подписаться

  <button id="doSubscribe">Подписаться</button>
  <span id="statusSubscribe" class="message"></span>
  <script>
    document.addEventListener('DOMContentLoaded', () => { 
      pushSubscribe( 
        (subscribe, reject ) => {
          const doSubscribe = document.querySelector( '#doSubscribe' )
          doSubscribe.classList.add( 'ready' )
          doSubscribe.addEventListener( 'click', _ => subscribe() )
        }, 
        result => {
          const statusSubscribe = document.querySelector( '#statusSubscribe' )
          ;( result === true )
            ? statusSubscribe.innerText = 'Успешно подписался'
            : statusSubscribe.innerText = result
          doSubscribe.disabled = true
        }
      
    })
  </script>

Реальный код

Пример кода с отправкой конверсии в DAFA:

<script>
    document.addEventListener('DOMContentLoaded', () => { 
      pushSubscribe( null, result => ( result === true ) ? _dafa.push( [ 'trackConversion','pwapush',location.host, 1 ] ) : null )
    })
  </script>

A2HS

Чтобы функция установки на рабочий стол работала, нужно выполнить ряд требований:

1. Сайт должен работать через SSL
2. У сайта должен быть зарегестрирован service worker
3. В service worker должны быть определены методы для создания кеша во время установки приложения и для работы с кешем по событию fetch
4. На странице должен быть объявлен манифест

У нас по умолчанию выполнены все условия кроме манифестов. Чтобы объявить манифест, его надо добавить на страницу через тег <link rel="manifest">:

<link rel="manifest" href="./manifest.webmanifest">

Стандарт по файлу можно найти на MDN. Пример манифеста, который используем мы:

{
    "name": "NEWSEUM",
    "short_name": "NEWSEUM",
    "lang": "ru-RU",
    "start_url": "/?utm_source=smwa&utm_segment=116",
    "display": "standalone",
    "theme_color": "#ff0000",
    "background_color": "#ffffff",
    "icons": [
      {
      "src": "/template/images/favicons/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
      },
      {
      "src": "/template/images/favicons/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
      }
    ]
  }

Для того чтобы предложить пользователю добавить приложение на рабочий стол, нужно нужно использовать функцию pwaA2HS:

  pwaA2HS( [before], [after] )
      

Чтобы убедиться, что необходимые внешние библиотеки подключены, эту функцию нужно вызывать внутри события DOMContentLoaded объекта document

В качестве аргументов pwaA2HS принимает две функции:

1. before (функция): будет выполнена, если установка возможна, прямо перед тем как показать пользователю стандартное предложение установить приложение.
2. after (функция): будет выполнена после того, как пользователь выберет установить приложение или нет, либо если установка не доступна в браузере.

Before

  type Before = (install: function, reject: function) => void
          

Если эта функция передана в pwaA2HS, то она берет на себя управление перед установкой и, в зависимости от объявленных в ней условий или событий, вызывает функцию install() и выводит предложение установить приложение. Либо вызывает функцию reject( [error] ) и передает код в функцию after c ошибкой. Если эту функцию не передавать в pwaA2HS, то предложение будет выведено сразу и без условий, но браузер скорее всего отклонит его автоматически, если пользователь никак не успел провзаимодействовать со страницей.

Данная функция будет выполнена только, если установка приложения возможна и оно еще не установлено.

After

  type After = (result: boolean|Error) => void
          

Эта функция будет вызвана после того как пользователь установл приложение, либо в случае возникновения ошибки. Если result === true, значит приложение установилось, в противном случае в result будет ошибка с описанием проблемы. Это хорошее место для отправки конверсии или чтобы скрыть окно, предлагающее установку.

Полный пример

В этом примере установка будет предложена пользователю, после того как оно нажмет на кнопку «Установить на рабочий стол»:

Установить на рабочий стол

  <button id="doA2HS">Установить на рабочий стол</button>
  <span id="statusA2HS" class="message"></span>
  <script>
  pwaA2HS( 
    ( install, reject ) => {
      const doA2HS = document.querySelector( '#doA2HS' )
      doA2HS.classList.add( 'ready' )
      doA2HS.addEventListener( 'click', _ => install() )
    },
    result => {
      const statusA2HS = document.querySelector( '#statusA2HS' )
      ;( result === true )
        ? statusA2HS.innerText = 'Приложение установлено'
        : statusA2HS.innerText = result
      doA2HS.disabled = true
    }
  ) 
  </script>

Реальный код

Пример кода с отправкой конверсии в DAFA:

<script>
    document.addEventListener('DOMContentLoaded', () => { 
      pwaA2HS( 
        ( install, reject ) => {
          if ( !/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test( navigator.userAgent ) ) 
            return reject()
          setTimeout( _=> install(), 2000 )
        },
        result => ( result === true ) 
          ? _dafa.push( [ 'trackConversion','pwainstall',location.host, 1 ] ) 
          : null
      ) 
    })
  </script>

Поделиться

Поделиться