?, HTML5 ? ???? ?? ? API? ?? ?? ??? ??? ? ??? JavaScript, ??? ??? ? ??? ??? ??? ?????. ?? ??? ??? ????. 1. ???? ?? ??? ???? ??? ??? ? PushManager? ??? ??????. 2. ?? ???? ???? ?? ??? ???? ??????. 3. Notification.RequestPermission ()? ?? ??? ?? ??; 4. ? ?? ?????? ???? ?? ????? VAPID ?? ??????. 5. ??? ?? ? PushManager.Subscribe ???? ???? ?? ???? ???? ?? ??? ???? ??????. 6. ??? ???? ?? ???? ?? ??? ???? ??? ?????. 7. ???? ? ?? ????? ? VAPID ?? ???? ????? ?? ???? ????.

HTML5? ?? ??? HTML??? ?? ??? ??? ?? ????. JavaScript, ??? ??? ? ??? ??? ??? ?????. ??? ?, ?? ? API? ???? ? ????? ?? ??? ??? ? ? ????.

???? ???? ??? ??? ????.

1. ???? ??? ??????

??? ????? ?? ???? ????? ?? ??? ????? ??????. Chrome, Firefox, Edge ? Safari? ?? ???? ?? ??????? ????? ?? ??? ???? (?? iOS)? ??? ?????? ????.

??? ?? ??? ??? ? ????.

 if (navigator && 'fushmanager'?? 'serviceworker') {
  // ???????!
} ? ?? {
  Console.log ( '? ?????? ???? ?? ?? ??');
}

?????? :

• Safari? APNS (Apple Push Unking Service)? ?? ?? ?? ?? ??? ??? ????.
• iOS Safari? ??? ? ?? ?? ?? ?? ? ????? (? ??? ??)

2. ??? ???? ??????

?? ??? ???? ??? ???? ?? ???? ??? ??? ????? ?? ???? ? ??? ????? ?????.

sw.js ?? ??? ??? ?? JavaScript ??? ??????.

 navigator.serviceworker.register ( '/sw.js')
  . ?? ?? (?? (??) {
    Console.log ( 'Scope? ?? ? ??? ??? :', registration.scope);
  })
  .catch (function (err) {
    Console.log ( '??? ??? ?? ?? :', err);
  });

sw.js ???? ??? ?? ????. ??? ?? ???? ???? ? ??? ????.

3. ???? ??? ??????

??? ??? ?? ????? ??? ???????. ??? Notification.requestPermission() ???? ???? ?????.

 notification.requestPermission (). ?? ?? (?? (??) {
  if (result === 'willed') {
    Console.log ( '?? ??!');
    // ?? ?? ??? ??????
  } ? ?? {
    Console.log ( '?? ?? ?? ??.');
  }
});

?? ??? :?? ?? ?????? ????. ???? ?? ?? ?? ?? ??? ???? ?????????. ??? ??? ???? ??? ? ????.

4. vapid ?? ?????

?? ??? ????? VAPID (??? ?? ???? ?? ??)? ??? ??? ?? ?????. ??? ???? ?? ????? ???? ? ?????.

Node.js?? Web-Push ? ?? ?????? ???? ??? ?? ?? ? ? ????.

 NPM ? ?? ??

?? ?? ?? :

 const webpush = require ( 'web-push');
const Vacuumkeys = webpush.generatevapidkeys ();
Console.log (Vapidkeys);

?? ? ?? ? ?? - ?? ? ? ?? ?? ???? ??? ?? ?? ?????.

5. ???? ??????

??? ???? ???? ??? ???? ????? ??? ?? ? ? ????.

 navigator.serviceworker.ready.then (?? (??) {
  return registration.pushmanager.subscribe ({
    uservisibleonly : ??,
    ApplicationServerkey : urlbase64touint8array (publicvapidkey)
  });
});

Base64 ??? ? ?? ?? ?????? ?? ??? ?????.

 ?? urlbase64touint8array (base64string) {
  const padding = '='. ?? ((4 -base64string.length 4) % 4);
  const base64 = (Base64string Padding)
    .replace (/-/g, '')
    .replace (/_/g, '/');
  const rawdata = window.atob (base64);
  const outputarray = new uint8array (rawdata.length);
  for (i = 0; i <rawdata.length; i) {
    outputArray [i] = rawData.charcodeat (i);
  }
  ?? outputArray;
}

?? ? ?? ???? ?? ???? ??? ?? ???? ?? ? ????.

6. ??? ???? ?? ???? ??????

?? ???? ??????? ??? ???? ???? ?? ???? ???????.

??? sw.js ? ??????.

 self.addeventListener ( 'push', function (event) {
  const data = event.data.json ();
  self.registration.hownotification (data.title, {
    ?? : data.body,
    ??? : data.icon || '/icon.png'
  });
});

??? ?? ???? ?? ?? ? ????? ???? ??? ?????.

7. ????? ?? ???? ?????

?????, ??? ?????? ?? VAPID ?? ???? ?? ?? ??? ???? ?? ?? ??? ?? ???? ??? ??? ??????.

web-push ????? ?? :

 const webpush = require ( 'web-push');

webpush.setVapidDetails (
  'mailto : you@example.com',
  publicvapidkey,
  PrivateVapidkey
);

webpush.sendNotification (??, json.stringify ({{
  ?? : '?????!',
  ?? : '??? ?? ?????.',
  ??? : '/icon.png'
});

??? subscription pushManager.subscribe ?? ?? ?? ? ?????.

??? ????? ?????. ???? ??? ???? ?? ??? ???? HTML5?? ?? ??? ??? ? ????.

???? ????. ? ?? ???? ??? ?? ???? ?? ?????.

? ??? HTML5?? ?? ??? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!