{"id":324675,"date":"2021-06-10T03:00:19","date_gmt":"2021-06-10T03:00:19","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=324675"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=324675","title":{"rendered":"\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 Push-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043d\u0430 Javascript \u0438 PHP"},"content":{"rendered":"\n
\n

\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h2>\n

\u0412 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u043d\u0430\u0439\u0442\u0438 \u0433\u043e\u0434\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u044f \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u044c\u0438 \u0433\u0434\u0435 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 Firebase, \u043d\u043e \u043c\u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043d\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0442\u043e \u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043b.<\/p>\n

\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 «\u0440\u0430\u0437\u043c\u0443\u0441\u043e\u043b\u0435\u043d\u044b» \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0438 Push \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439, \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0434, \u0442\u043e\u043b\u044c\u043a\u043e \u0445\u0430\u0440\u0434\u043a\u043e\u0440.<\/em><\/p>\n

\n

\u0412\u0430\u0436\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f<\/strong><\/p>\n

Push-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 HTTPS<\/a>.
\u041a \u0441\u043b\u043e\u0432\u0443, \u0432 \u0434\u043e\u0431\u0430\u0432\u043e\u043a \u0441 HTTPS \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 SSL \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442, \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0438 Let’s Encrypt<\/a><\/p>\n

\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u0442 localhost. \u041f\u0440\u043e\u0431\u043b\u0435\u043c \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u0436\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f<\/a> \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c\u0438. <\/p>\n<\/blockquote>\n

\u0414\u0430 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0434<\/h2>\n

\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f (VAPID)<\/h3>\n

\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0442\u043e\u0438\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 WebPush \u0432 \u0432\u0430\u0448 php \u043f\u0440\u043e\u0435\u043a\u0442:<\/p>\n

$ composer require minishlink\/web-push<\/code><\/pre>\n
\u0414\u0430\u043b\u0435\u0435 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c (VAPID), \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c <\/a>\u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0438 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439 ssh \u043a\u043b\u044e\u0447\u0438. \u0414\u0430\u043d\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u043a\u0430\u043a \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0442\u0430\u043a \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043d\u0443\u0436\u0435\u043d \u043b\u0438\u0448\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439)<\/em>.<\/p>\n
\u0427\u0442\u043e\u0431\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u0436\u0430\u0442\u044b\u0439 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0438 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439 \u043a\u043b\u044e\u0447, \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432 Base64, \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0432 \u0441\u0432\u043e\u0439 Linux bash:  <\/p>\n
$ openssl ecparam -genkey -name prime256v1 -out private_key.pem $ openssl ec -in private_key.pem -pubout -outform DER|tail -c 65|base64|tr -d '=' |tr '\/+' '_-' >> public_key.txt $ openssl ec -in private_key.pem -outform DER|tail -c +8|head -c 32|base64|tr -d '=' |tr '\/+' '_-' >> private_key.txt<\/code><\/pre>\n
\u0422\u0430\u043a \u0436\u0435 \u0430\u0432\u0442\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e vapid \u043a\u043b\u044e\u0447\u0435\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430:<\/p>\n
$vapidKeysInBase64 = VAPID::createVapidKeys();<\/code><\/pre>\n
\u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 <\/h3>\n
\u042d\u0442\u0430\u043f 1  (JS)<\/h4>\n
\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 ServiceWorker<\/a>, PushManager<\/a>, \u0430 \u0442\u0430\u043a \u0436\u0435  showNotification \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435: <\/p>\n
app.js<\/p>\n
function checkNotificationSupported() { \treturn new Promise((fulfilled, reject) => {   \tif (!('serviceWorker' in navigator)) {       reject(new Error('Service workers are not supported by this browser'));       return;     }      if (!('PushManager' in window)) {       reject(new Error('Push notifications are not supported by this browser'));       return;     }      if (!('showNotification' in ServiceWorkerRegistration.prototype)) {       reject(new Error('Notifications are not supported by this browser'));     \treturn;     }          fulfilled();   }) }<\/code><\/pre>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b sw.js \u0438 \u0434\u0430\u043b\u0435\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e:<\/p>\n
app.js<\/p>\n
navigator.serviceWorker.register('sw.js').then(() => {       console.log('[SW] Service worker has been registered');     }, e => {       console.error('[SW] Service worker registration failed', e);     }   );<\/code><\/pre>\n
\u0422\u0430\u043a \u0436\u0435 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438:<\/p>\n
app.js<\/p>\n
function checkNotificationPermission() {     return new Promise((fulfilled, reject) => {         if (Notification.permission === 'denied') {             return reject(new Error('Push messages are blocked.'));         }         if (Notification.permission === 'granted') {             return fulfilled();         }         if (Notification.permission === 'default') {             return Notification.requestPermission().then(result => {                 if (result !== 'granted') {                     reject(new Error('Bad permission result'));                 } else {                     fulfilled();                 }             });         }         return reject(new Error('Unknown permission'));     }); }<\/code><\/pre>\n
\u0421 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 ssh \u043a\u043b\u044e\u0447 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435: <\/p>\n
<script> \twindow.applicationServerKey = '<?= $yourPublicKeyFromServer ?>' <\/script><\/code><\/pre>\n
\u0414\u0430\u043b\u0435\u0435 \u043d\u0430 \u0432\u0430\u0448\u0435 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u0435, \u0432\u0435\u0448\u0430\u0435\u043c \u0432\u044b\u0437\u043e\u0432 \u043e\u043a\u043d\u0430 \u043d\u0430 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439. \u0412 \u043c\u043e\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0447\u0435\u0440\u0435\u0437 10 \u0441\u0435\u043a\u0443\u043d\u0434 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f.<\/em><\/p>\n
app.js<\/p>\n
document.addEventListener('DOMContentLoaded', documentLoadHandler);   function documentLoadHandler() {     checkNotificationSupported()         .then(() => {           setTimeout(() => {             serviceWorkerRegistration.pushManager.subscribe({                     userVisibleOnly: true,                     applicationServerKey: urlBase64ToUint8Array(window.applicationServerKey),                 })                 .then(successSubscriptionHandler, errorSubscriptionHandler)           }, 10000);          },          \tconsole.error       \t); }   function urlBase64ToUint8Array(base64String) {     const padding = '='.repeat((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 (let i = 0; i < rawData.length; ++i) {         outputArray[i] = rawData.charCodeAt(i);     }     return outputArray; }  function errorSubscriptionHandler(err) {     if (Notification.permission === 'denied') {         console.warn('Notifications are denied by the user.');     } else {         console.error('Impossible to subscribe to push notifications', err);     } }<\/code><\/pre>\n
\u0414\u0430\u043b\u0435\u0435 \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043f\u0440\u043e\u0448\u0435\u043b \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e successSubscriptionHandler<\/u><\/strong><\/p>\n
\u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439.<\/p>\n
app.js<\/p>\n
function successSubscriptionHandler(subscriptionData) {     const key = subscription.getKey('p256dh');     const token = subscription.getKey('auth');     const contentEncoding = (PushManager.supportedContentEncodings || ['aesgcm'])[0];     const body = new FormData();      body.set('endpoint', subscription.endpoint);     body.set('publicKey', key ? btoa(String.fromCharCode.apply(null, new Uint8Array(key))) : null);     body.set('authToken', token ? btoa(String.fromCharCode.apply(null, new Uint8Array(token))) : null);     body.set('contentEncoding', contentEncoding);      return fetch('src\/push_subscription.php', {       method,       body,     }).then(() => subscription);   }<\/code><\/pre>\n
\u0422\u0430\u043a \u0436\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435<\/p>\n
\n
\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Post Message API<\/a> <\/p>\n<\/blockquote>\n
self.addEventListener('push', function (event) {     if (!(self.Notification && self.Notification.permission === 'granted')) {         return;     }      const sendNotification = body => {         const title = \"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f\";          return self.registration.showNotification(title, {             body,         });     };      if (event.data) {         const message = event.data.text();         event.waitUntil(sendNotification(message));     } });<\/code><\/pre>\n
\u042d\u0442\u0430\u043f 2 (PHP)<\/h4>\n
\n
\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c php \u0432\u0435\u0440\u0441\u0438\u0438 7+  <\/p>\n<\/blockquote>\n
\u0414\u0430\u043b\u0435\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 subscribeUserToPushNotifications<\/strong> \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u0441 \u0444\u0440\u043e\u043d\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0430 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443, \u043c\u044b \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f <\/p>\n
subscribeUserToPushNotifications.php<\/p>\n
<?php   $subscription = $_POST; if (!isset($subscription['endpoint'])) {     echo 'Error: not a subscription';     return; }  \/\/ save subscription from => $subscription <\/code><\/pre>\n
\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0411\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 (\u041d\u0443 \u0438\u043b\u0438 \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0442\u0430\u043c), <\/em>\u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439.<\/p>\n
\u041d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0430\u043c\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p>\n
\u0414\u043e\u0441\u0442\u0430\u0435\u043c \u044e\u0437\u0435\u0440\u0430 \u0441 \u043c\u0435\u0441\u0442\u0430 \u0435\u0433\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f, \u0438 \u0434\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u0430:<\/p>\n
pushNotificationToClient.php<\/p>\n
<?php   use Minishlink\\WebPush\\WebPush; use Minishlink\\WebPush\\Subscription;  $subscription = Subscription::create($subscriptionData);<\/code><\/pre>\n
\u0414\u0430\u043b\u0435\u0435 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c VAPID \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n
pushNotificationToClient.php<\/p>\n
<?php   $auth = array(     'VAPID' => array(         'subject' => 'https:\/\/your-project-domain.com',         'publicKey' => file_get_contents(__DIR__ . '\/your_project\/keys\/public_key.txt'),         'privateKey' => file_get_contents(__DIR__ . '\/your_project\/keys\/private_key.txt'),      ) );<\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 WebPush:<\/p>\n
pushNotificationToClient.php<\/p>\n
<?php  $webPush = new WebPush($auth);<\/code><\/pre>\n
\u0423\u0440\u0430! \u041d\u0430\u043a\u043e\u043d\u0435\u0446 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 Push \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f <\/p>\n
<?php  $report = $webPush->sendOneNotification(   $subscription,   \"\u0422\u0435\u043b\u043e \u043f\u0443\u0448 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f, \u043e\u043d\u043e \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043b\u043e \u0432 \u0442\u0435\u043b\u043e sw.js\" );<\/code><\/pre>\n
\n
\u0412\u0430\u0436\u043d\u043e\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/strong><\/p>\n
\u0414\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439 \u0432 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438, \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0441 \u0442\u0435\u043c\u0438 \u0436\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u0447\u0442\u043e \u0438 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u0448\u0435:<\/p>\n
$webPush->queueNotification<\/code><\/p>\n<\/blockquote>\n
\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/h2>\n
    \n
  1. \n
    \u041e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 push<\/a><\/p>\n<\/li>\n
  2. \n
    \u041e WebPush \u043e\u0442 \u0445\u0430\u0431\u0440\u043e\u0432\u0447\u0430\u043d\u0438\u043d\u0430<\/a><\/p>\n<\/li>\n
  3. \n
    \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 WebPush<\/a><\/p>\n<\/li>\n
  4. \n
    \u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/a><\/p>\n<\/li>\n<\/ol>\n<\/div>\n
     \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/562058\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n
    \n
    \u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h2>\n
    \u0412 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u043d\u0430\u0439\u0442\u0438 \u0433\u043e\u0434\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u044f \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u044c\u0438 \u0433\u0434\u0435 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 Firebase, \u043d\u043e \u043c\u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043d\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0442\u043e \u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043b.<\/p>\n
    \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 «\u0440\u0430\u0437\u043c\u0443\u0441\u043e\u043b\u0435\u043d\u044b» \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0438 Push \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439, \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0434, \u0442\u043e\u043b\u044c\u043a\u043e \u0445\u0430\u0440\u0434\u043a\u043e\u0440.<\/em><\/p>\n
    \n
    \u0412\u0430\u0436\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f<\/strong><\/p>\n
    Push-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 HTTPS<\/a>.
    \u041a \u0441\u043b\u043e\u0432\u0443, \u0432 \u0434\u043e\u0431\u0430\u0432\u043e\u043a \u0441 HTTPS \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 SSL \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442, \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0438     Let’s Encrypt<\/a><\/p>\n
    \u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u0442 localhost. \u041f\u0440\u043e\u0431\u043b\u0435\u043c \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u0436\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f<\/a> \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c\u0438. <\/p>\n<\/blockquote>\n
    \u0414\u0430 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0434<\/h2>\n
    \u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f (VAPID)<\/h3>\n
    \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0442\u043e\u0438\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 WebPush \u0432 \u0432\u0430\u0448 php \u043f\u0440\u043e\u0435\u043a\u0442:<\/p>\n
    $ composer require minishlink\/web-push<\/code><\/pre>\n
    \u0414\u0430\u043b\u0435\u0435 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c (VAPID), \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c <\/a>\u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0438 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439 ssh \u043a\u043b\u044e\u0447\u0438. \u0414\u0430\u043d\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u043a\u0430\u043a \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0442\u0430\u043a \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043d\u0443\u0436\u0435\u043d \u043b\u0438\u0448\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439)<\/em>.<\/p>\n
    \u0427\u0442\u043e\u0431\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u0436\u0430\u0442\u044b\u0439 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0438 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439 \u043a\u043b\u044e\u0447, \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432 Base64, \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0432 \u0441\u0432\u043e\u0439 Linux bash:  <\/p>\n
    $ openssl ecparam -genkey -name prime256v1 -out private_key.pem $ openssl ec -in private_key.pem -pubout -outform DER|tail -c 65|base64|tr -d '=' |tr '\/+' '_-' >> public_key.txt $ openssl ec -in private_key.pem -outform DER|tail -c +8|head -c 32|base64|tr -d '=' |tr '\/+' '_-' >> private_key.txt<\/code><\/pre>\n
    \u0422\u0430\u043a \u0436\u0435 \u0430\u0432\u0442\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e vapid \u043a\u043b\u044e\u0447\u0435\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430:<\/p>\n
    $vapidKeysInBase64 = VAPID::createVapidKeys();<\/code><\/pre>\n
    \u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 <\/h3>\n
    \u042d\u0442\u0430\u043f 1  (JS)<\/h4>\n
    \u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 ServiceWorker<\/a>, PushManager<\/a>, \u0430 \u0442\u0430\u043a \u0436\u0435  showNotification \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435: <\/p>\n
    app.js<\/p>\n
    function checkNotificationSupported() { \treturn new Promise((fulfilled, reject) => {   \tif (!('serviceWorker' in navigator)) {       reject(new Error('Service workers are not supported by this browser'));       return;     }      if (!('PushManager' in window)) {       reject(new Error('Push notifications are not supported by this browser'));       return;     }      if (!('showNotification' in ServiceWorkerRegistration.prototype)) {       reject(new Error('Notifications are not supported by this browser'));     \treturn;     }          fulfilled();   }) }<\/code><\/pre>\n
    \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b sw.js \u0438 \u0434\u0430\u043b\u0435\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e:<\/p>\n
    app.js<\/p>\n
    navigator.serviceWorker.register('sw.js').then(() => {       console.log('[SW] Service worker has been registered');     }, e => {       console.error('[SW] Service worker registration failed', e);     }   );<\/code><\/pre>\n
    \u0422\u0430\u043a \u0436\u0435 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438:<\/p>\n
    app.js<\/p>\n
    function checkNotificationPermission() {     return new Promise((fulfilled, reject) => {         if (Notification.permission === 'denied') {             return reject(new Error('Push messages are blocked.'));         }         if (Notification.permission === 'granted') {             return fulfilled();         }         if (Notification.permission === 'default') {             return Notification.requestPermission().then(result => {                 if (result !== 'granted') {                     reject(new Error('Bad permission result'));                 } else {                     fulfilled();                 }             });         }         return reject(new Error('Unknown permission'));     }); }<\/code><\/pre>\n
    \u0421 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 ssh \u043a\u043b\u044e\u0447 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435: <\/p>\n
    <script> \twindow.applicationServerKey = '<?= $yourPublicKeyFromServer ?>' <\/script><\/code><\/pre>\n
    \u0414\u0430\u043b\u0435\u0435 \u043d\u0430 \u0432\u0430\u0448\u0435 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u0435, \u0432\u0435\u0448\u0430\u0435\u043c \u0432\u044b\u0437\u043e\u0432 \u043e\u043a\u043d\u0430 \u043d\u0430 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439. \u0412 \u043c\u043e\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0447\u0435\u0440\u0435\u0437 10 \u0441\u0435\u043a\u0443\u043d\u0434 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f.<\/em><\/p>\n
    app.js<\/p>\n
    document.addEventListener('DOMContentLoaded', documentLoadHandler);   function documentLoadHandler() {     checkNotificationSupported()         .then(() => {           setTimeout(() => {             serviceWorkerRegistration.pushManager.subscribe({                     userVisibleOnly: true,                     applicationServerKey: urlBase64ToUint8Array(window.applicationServerKey),                 })                 .then(successSubscriptionHandler, errorSubscriptionHandler)           }, 10000);          },          \tconsole.error       \t); }   function urlBase64ToUint8Array(base64String) {     const padding = '='.repeat((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 (let i = 0; i < rawData.length; ++i) {         outputArray[i] = rawData.charCodeAt(i);     }     return outputArray; }  function errorSubscriptionHandler(err) {     if (Notification.permission === 'denied') {         console.warn('Notifications are denied by the user.');     } else {         console.error('Impossible to subscribe to push notifications', err);     } }<\/code><\/pre>\n
    \u0414\u0430\u043b\u0435\u0435 \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043f\u0440\u043e\u0448\u0435\u043b \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e successSubscriptionHandler<\/u><\/strong><\/p>\n
    \u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439.<\/p>\n
    app.js<\/p>\n
    function successSubscriptionHandler(subscriptionData) {     const key = subscription.getKey('p256dh');     const token = subscription.getKey('auth');     const contentEncoding = (PushManager.supportedContentEncodings || ['aesgcm'])[0];     const body = new FormData();      body.set('endpoint', subscription.endpoint);     body.set('publicKey', key ? btoa(String.fromCharCode.apply(null, new Uint8Array(key))) : null);     body.set('authToken', token ? btoa(String.fromCharCode.apply(null, new Uint8Array(token))) : null);     body.set('contentEncoding', contentEncoding);      return fetch('src\/push_subscription.php', {       method,       body,     }).then(() => subscription);   }<\/code><\/pre>\n
    \u0422\u0430\u043a \u0436\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435<\/p>\n
    \n
    \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Post Message API<\/a> <\/p>\n<\/blockquote>\n
    self.addEventListener('push', function (event) {     if (!(self.Notification && self.Notification.permission === 'granted')) {         return;     }      const sendNotification = body => {         const title = \"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f\";          return self.registration.showNotification(title, {             body,         });     };      if (event.data) {         const message = event.data.text();         event.waitUntil(sendNotification(message));     } });<\/code><\/pre>\n
    \u042d\u0442\u0430\u043f 2 (PHP)<\/h4>\n
    \n
    \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c php \u0432\u0435\u0440\u0441\u0438\u0438 7+  <\/p>\n<\/blockquote>\n
    \u0414\u0430\u043b\u0435\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 subscribeUserToPushNotifications<\/strong> \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u0441 \u0444\u0440\u043e\u043d\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0430 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443, \u043c\u044b \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f <\/p>\n
    subscribeUserToPushNotifications.php<\/p>\n
    <?php   $subscription = $_POST; if (!isset($subscription['endpoint'])) {     echo 'Error: not a subscription';     return; }  \/\/ save subscription from => $subscription <\/code><\/pre>\n
    \u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0411\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 (\u041d\u0443 \u0438\u043b\u0438 \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0442\u0430\u043c), <\/em>\u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439.<\/p>\n
    \u041d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0430\u043c\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p>\n
    \u0414\u043e\u0441\u0442\u0430\u0435\u043c \u044e\u0437\u0435\u0440\u0430 \u0441 \u043c\u0435\u0441\u0442\u0430 \u0435\u0433\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f, \u0438 \u0434\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u0430:<\/p>\n
    pushNotificationToClient.php<\/p>\n
    <?php   use Minishlink\\WebPush\\WebPush; use Minishlink\\WebPush\\Subscription;  $subscription = Subscription::create($subscriptionData);<\/code><\/pre>\n
    \u0414\u0430\u043b\u0435\u0435 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c VAPID \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n
    pushNotificationToClient.php<\/p>\n
    <?php   $auth = array(     'VAPID' => array(         'subject' => 'https:\/\/your-project-domain.com',         'publicKey' => file_get_contents(__DIR__ . '\/your_project\/keys\/public_key.txt'),         'privateKey' => file_get_contents(__DIR__ . '\/your_project\/keys\/private_key.txt'),      ) );<\/code><\/pre>\n
    \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 WebPush:<\/p>\n
    pushNotificationToClient.php<\/p>\n
    <?php  $webPush = new WebPush($auth);<\/code><\/pre>\n
    \u0423\u0440\u0430! \u041d\u0430\u043a\u043e\u043d\u0435\u0446 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 Push \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f <\/p>\n
    <?php  $report = $webPush->sendOneNotification(   $subscription,   \"\u0422\u0435\u043b\u043e \u043f\u0443\u0448 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f, \u043e\u043d\u043e \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043b\u043e \u0432 \u0442\u0435\u043b\u043e sw.js\" );<\/code><\/pre>\n
    \n
    \u0412\u0430\u0436\u043d\u043e\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/strong><\/p>\n
    \u0414\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439 \u0432 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438, \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0441 \u0442\u0435\u043c\u0438 \u0436\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u0447\u0442\u043e \u0438 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u0448\u0435:<\/p>\n
    $webPush->queueNotification<\/code><\/p>\n<\/blockquote>\n
    \u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/h2>\n
      \n
    1. \n
      nofollow»>\u041e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 push<\/a><\/p>\n<\/li>\n
    2. \n
      \u041e WebPush \u043e\u0442 \u0445\u0430\u0431\u0440\u043e\u0432\u0447\u0430\u043d\u0438\u043d\u0430<\/a><\/p>\n<\/li>\n
    3. \n
      \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 WebPush<\/a><\/p>\n<\/li>\n
    4. \n
      \u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/a><\/p>\n<\/li>\n<\/ol>\n<\/div>\n
       \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/562058\/<\/a>
      <\/br><\/br><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-324675","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/324675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=324675"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/324675\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=324675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=324675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=324675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}