{"id":66168,"date":"2024-06-11T17:11:01","date_gmt":"2024-06-11T13:41:01","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/"},"modified":"2024-06-11T17:11:01","modified_gmt":"2024-06-11T13:41:01","slug":"progressive-web-apps-pwas-transforming-the-web-experience-1b54","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/","title":{"rendered":"\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u067e\u06cc\u0634\u0631\u0648 (PWA): \u062a\u063a\u06cc\u06cc\u0631 \u062a\u062c\u0631\u0628\u0647 \u0648\u0628"},"content":{"rendered":"<div data-article-id=\"1884441\" id=\"article-body\">\n<p>\u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u067e\u06cc\u0634\u0631\u0648 (PWA) \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0648\u0628 \u0645\u062f\u0631\u0646 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u062a\u062c\u0631\u0628\u0647\u200c\u0627\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.  \u0622\u0646\u0647\u0627 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0648 \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u0631\u0627 \u0628\u0627 \u0647\u0645 \u062a\u0631\u06a9\u06cc\u0628 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0641\u0644\u0627\u06cc\u0646\u060c \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u0641\u0634\u0627\u0631\u06cc \u0648 \u0627\u0645\u06a9\u0627\u0646 \u0646\u0635\u0628 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/#%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C_PWA_%D9%87%D8%A7\" >\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc PWA \u0647\u0627<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/#%D9%85%D8%B2%D8%A7%DB%8C%D8%A7%DB%8C_PWA_%D9%87%D8%A7\" >\u0645\u0632\u0627\u06cc\u0627\u06cc PWA \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/#%DA%A9%D8%AF_%D9%85%D8%AB%D8%A7%D9%84_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%A7%D8%AE%D8%AA_PWA\" >\u06a9\u062f \u0645\u062b\u0627\u0644 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a PWA<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/#1_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_HTML\" >1. \u0633\u0627\u062e\u062a\u0627\u0631 HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/#2_CSS_Styling\" >2. CSS Styling<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/#3_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA_%D8%A8%D8%B1%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DA%AF%D8%B1%D8%A7%D9%86_%D8%AE%D8%AF%D9%85%D8%A7%D8%AA\" >3. \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 \u062e\u062f\u0645\u0627\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/#4_%D8%AB%D8%A8%D8%AA_%D9%86%D8%A7%D9%85_%DA%A9%D8%A7%D8%B1%DA%AF%D8%B1_%D8%AE%D8%AF%D9%85%D8%A7%D8%AA%DB%8C\" >4. \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u06af\u0631 \u062e\u062f\u0645\u0627\u062a\u06cc<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/#5_%D9%85%D8%A7%D9%86%DB%8C%D9%81%D8%B3%D8%AA_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%88%D8%A8\" >5. \u0645\u0627\u0646\u06cc\u0641\u0633\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/#%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_Push_Notifications_%D8%A8%D9%87_PWA_%D8%B4%D9%85%D8%A7\" >\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 Push Notifications \u0628\u0647 PWA \u0634\u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Push_Notifications\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Push Notifications<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/progressive-web-apps-pwas-transforming-the-web-experience-1b54\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C_PWA_%D9%87%D8%A7\"><\/span>\n<p>  \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc PWA \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>\u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0641\u0644\u0627\u06cc\u0646: PWA \u0647\u0627 \u0627\u0632 \u0633\u0631\u0648\u06cc\u0633 \u062f\u0647\u0646\u062f\u0647 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0645\u0646\u0627\u0628\u0639 \u0648 \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0641\u0644\u0627\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/li>\n<li>Push Notifications: PWA \u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u0641\u0634\u0627\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u0646\u062f.<\/li>\n<li>\u0642\u0627\u0628\u0644\u06cc\u062a \u0646\u0635\u0628: \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u062f\u0648\u0646 \u0645\u0631\u0627\u062c\u0639\u0647 \u0628\u0647 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0628\u0631\u0646\u0627\u0645\u0647\u060c PWA \u0631\u0627 \u0631\u0648\u06cc \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0646\u0635\u0628 \u06a9\u0646\u0646\u062f.<\/li>\n<li>\u0637\u0631\u0627\u062d\u06cc \u067e\u0627\u0633\u062e\u06af\u0648: PWA \u0647\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u06a9\u0631\u062f \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u062f\u0631 \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u062e\u062a\u0644\u0641 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0646\u062f.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B2%D8%A7%DB%8C%D8%A7%DB%8C_PWA_%D9%87%D8%A7\"><\/span>\n<p>  \u0645\u0632\u0627\u06cc\u0627\u06cc PWA \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647: \u0632\u0645\u0627\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0633\u0631\u06cc\u0639\u062a\u0631 \u0648 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u0631\u0648\u0627\u0646\u062a\u0631.<\/li>\n<li>\u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647: \u0646\u0631\u062e \u062d\u0641\u0638 \u0628\u0627\u0644\u0627\u062a\u0631 \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u0639\u0644\u0627\u0646\u200c\u0647\u0627\u06cc \u0641\u0634\u0627\u0631\u06cc \u0648 \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0641\u0644\u0627\u06cc\u0646.<\/li>\n<li>\u062a\u0648\u0633\u0639\u0647 \u0645\u0642\u0631\u0648\u0646 \u0628\u0647 \u0635\u0631\u0641\u0647: \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u067e\u0644\u062a\u0641\u0631\u0645 \u0647\u0627.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%AF_%D9%85%D8%AB%D8%A7%D9%84_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%A7%D8%AE%D8%AA_PWA\"><\/span>\n<p>  \u06a9\u062f \u0645\u062b\u0627\u0644 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a PWA<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 PWA \u0633\u0627\u062f\u0647 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0628\u0627 HTML\u060c CSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0633\u0627\u0632\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"1_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_HTML\"><\/span>\n<p>  1. \u0633\u0627\u062e\u062a\u0627\u0631 HTML<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"cp\"\/>\n<span class=\"nt\"> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n<span class=\"nt\"><meta\/> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"><title\/><\/span>My PWA<span class=\"nt\"\/>\n<span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"styles.css\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>Welcome to My PWA<span class=\"nt\"\/>\n<span class=\"nt\"\/>This is a simple Progressive Web App.<span class=\"nt\"\/>\n<span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"app.js\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"2_CSS_Styling\"><\/span>\n<p>  2. CSS Styling<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">body<\/span> <span class=\"p\">{<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"nl\">font-family<\/span><span class=\"p\">:<\/span> <span class=\"n\">Arial<\/span><span class=\"p\">,<\/span> <span class=\"nb\">sans-serif<\/span><span class=\"p\">;<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f0f0f0<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#333<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">p<\/span> <span class=\"p\">{<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#666<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"3_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA_%D8%A8%D8%B1%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%DA%AF%D8%B1%D8%A7%D9%86_%D8%AE%D8%AF%D9%85%D8%A7%D8%AA\"><\/span>\n<p>  3. \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u06af\u0631\u0627\u0646 \u062e\u062f\u0645\u0627\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>service-worker.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">CACHE_NAME<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">my-pwa-cache-v1<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"nx\">consturlsToCache<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/styles.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/app.js<\/span><span class=\"dl\">'<\/span>\n<span class=\"p\">];<\/span>\n\n<span class=\"nb\">self<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">install<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">event<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nf\">waitUntil<\/span><span class=\"p\">(<\/span>\n<span class=\"nx\">caches<\/span><span class=\"p\">.<\/span><span class=\"nf\">open<\/span><span class=\"p\">(<\/span><span class=\"nx\">CACHE_NAME<\/span><span class=\"p\">)<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">cache<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"k\">return<\/span> <span class=\"nx\">cache<\/span><span class=\"p\">.<\/span><span class=\"nf\">addAll<\/span><span class=\"p\">(<\/span><span class=\"nx\">urlsToCache<\/span><span class=\"p\">);<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"p\">})<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">);<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"nb\">self<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">fetch<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">event<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nf\">respondWith<\/span><span class=\"p\">(<\/span>\n<span class=\"nx\">caches<\/span><span class=\"p\">.<\/span><span class=\"nf\">match<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">request<\/span><span class=\"p\">)<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"k\">return<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">||<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">request<\/span><span class=\"p\">);<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"p\">})<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">);<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"4_%D8%AB%D8%A8%D8%AA_%D9%86%D8%A7%D9%85_%DA%A9%D8%A7%D8%B1%DA%AF%D8%B1_%D8%AE%D8%AF%D9%85%D8%A7%D8%AA%DB%8C\"><\/span>\n<p>  4. \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u06af\u0631 \u062e\u062f\u0645\u0627\u062a\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>app.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">serviceWorker<\/span><span class=\"dl\">'<\/span> <span class=\"k\">in<\/span> <span class=\"nb\">navigator<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n<span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">load<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"nb\">navigator<\/span><span class=\"p\">.<\/span><span class=\"nx\">serviceWorker<\/span><span class=\"p\">.<\/span><span class=\"nf\">register<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/service-worker.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">registration<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">ServiceWorker registration successful with scope: <\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">registration<\/span><span class=\"p\">.<\/span><span class=\"nx\">scope<\/span><span class=\"p\">);<\/span>\n<span class=\"err\">\u00a0<\/span> <span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"p\">})<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"p\">.<\/span><span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">ServiceWorker registration failed: <\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"p\">});<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"5_%D9%85%D8%A7%D9%86%DB%8C%D9%81%D8%B3%D8%AA_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%88%D8%A8\"><\/span>\n<p>  5. \u0645\u0627\u0646\u06cc\u0641\u0633\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>manifest.json<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"My PWA\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"nl\">\"short_name\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"PWA\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"err\">\u00a0<\/span><span class=\"nl\">\"start_url\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"https:\/\/dev.to\/\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"nl\">\"display\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"standalone\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"nl\">\"background_color\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"#ffffff\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"nl\">\"theme_color\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"#000000\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"nl\">\"icons\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">[<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"nl\">\"src\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"icon.png\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"nl\">\"sizes\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"192x192\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n<\/span><span class=\"err\">:<\/span><span class=\"w\"> <\/span><span class=\"nl\">\"type\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"image\/png\"<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><span class=\"err\">\u00a0\u00a0\u00a0<\/span><span class=\"w\"> <\/span><span class=\"p\">]<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_Push_Notifications_%D8%A8%D9%87_PWA_%D8%B4%D9%85%D8%A7\"><\/span>\n<p>  \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 Push Notifications \u0628\u0647 PWA \u0634\u0645\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f PWA \u0645\u06cc \u062f\u0627\u0646\u06cc\u0645\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0646\u062d\u0648\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u0641\u0634\u0627\u0631\u06cc \u0631\u0627 \u0628\u062f\u0627\u0646\u06cc\u0645.  \u0627\u0639\u0644\u0627\u0646\u200c\u0647\u0627\u06cc \u0641\u0634\u0627\u0631\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u06a9\u0647 \u062d\u062a\u06cc \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0641\u0639\u0627\u0644\u0627\u0646\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u067e\u06cc\u0627\u0645 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u0639\u0627\u0645\u0644 \u0648 \u062d\u0641\u0638 \u06a9\u0627\u0631\u0628\u0631 \u06a9\u0645\u06a9 \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Push_Notifications\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Push Notifications<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>\u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u062c\u0648\u0632 \u0627\u0639\u0644\u0627\u0646 \u0627\u0628\u062a\u062f\u0627\u060c \u0628\u0627\u06cc\u062f \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0627\u0639\u0644\u0627\u0646\u200c\u0647\u0627 \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631 \u0627\u062c\u0627\u0632\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0646\u06cc\u062f.  \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>app.js<\/code>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Notification<\/span><span class=\"dl\">'<\/span> <span class=\"k\">in<\/span> <span class=\"nb\">window<\/span> <span class=\"o\">&amp;&amp;<\/span><span class=\"nb\">navigator<\/span><span class=\"p\">.<\/span><span class=\"nx\">serviceWorker<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n<span class=\"nx\">Notification<\/span><span class=\"p\">.<\/span><span class=\"nf\">requestPermission<\/span><span class=\"p\">(<\/span><span class=\"nx\">status<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Notification permission status:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">status<\/span><span class=\"p\">);<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\u062b\u0628\u062a \u0646\u0627\u0645 \u0628\u0631\u0627\u06cc Push Notifications \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u0627\u06cc\u062f \u0628\u0631\u0627\u06cc Push Notifications \u0628\u0627 \u0633\u0631\u0648\u06cc\u0633 Push \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0627\u0632 Push API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">subscribeUserToPush<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n<span class=\"nb\">navigator<\/span><span class=\"p\">.<\/span><span class=\"nx\">serviceWorker<\/span><span class=\"p\">.<\/span><span class=\"nx\">ready<\/span><span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">registration<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"nx\">constsubscribeOptions<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n<span class=\"na\">userVisibleOnly<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n<span class=\"na\">applicationServerKey<\/span><span class=\"p\">:<\/span> <span class=\"nf\">urlBase64ToUint8Array<\/span><span class=\"p\">(<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"err\">\u00a0<\/span><span class=\"dl\">'<\/span><span class=\"s1\">YOUR_PUBLIC_VAPID_KEY<\/span><span class=\"dl\">'<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"p\">)<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"p\">};<\/span>\n\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"k\">return<\/span> <span class=\"nx\">registration<\/span><span class=\"p\">.<\/span><span class=\"nx\">pushManager<\/span><span class=\"p\">.<\/span><span class=\"nf\">subscribe<\/span><span class=\"p\">(<\/span><span class=\"nx\">subscribeOptions<\/span><span class=\"p\">);<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">}).<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">pushSubscription<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Received PushSubscription:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">pushSubscription<\/span><span class=\"p\">));<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"c1\">\/\/ Send the subscription to your server<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">}).<\/span><span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error during getSubscription()<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">urlBase64ToUint8Array<\/span><span class=\"p\">(<\/span><span class=\"nx\">base64String<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">padding<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">=<\/span><span class=\"dl\">'<\/span><span class=\"p\">.<\/span><span class=\"nf\">repeat<\/span><span class=\"p\">((<\/span><span class=\"mi\">4<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">base64String<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">%<\/span> <span class=\"mi\">4<\/span><span class=\"p\">)<\/span> <span class=\"o\">%<\/span> <span class=\"mi\">4<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">base64<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">base64String<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">padding<\/span><span class=\"p\">)<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"p\">.<\/span><span class=\"nf\">replace<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/-\/g<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">+<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"p\">.<\/span><span class=\"nf\">replace<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/_\/g<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nx\">constrawData<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">atob<\/span><span class=\"p\">(<\/span><span class=\"nx\">base64<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">constoutputArray<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Uint8Array<\/span><span class=\"p\">(<\/span><span class=\"nx\">rawData<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">);<\/span>\n\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">rawData<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">;<\/span> <span class=\"o\">++<\/span><span class=\"nx\">i<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n<span class=\"nx\">outputArray<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">rawData<\/span><span class=\"p\">.<\/span><span class=\"nf\">charCodeAt<\/span><span class=\"p\">(<\/span><span class=\"nx\">i<\/span><span class=\"p\">);<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">}<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"k\">return<\/span> <span class=\"nx\">outputArray<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0631\u062f\u0646 <code>'YOUR_PUBLIC_VAPID_KEY'<\/code> \u0628\u0627 \u06a9\u0644\u06cc\u062f VAPID \u0639\u0645\u0648\u0645\u06cc \u0648\u0627\u0642\u0639\u06cc \u0634\u0645\u0627.<\/p>\n<ol>\n<li>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0641\u0634\u0627\u0631\u06cc \u062f\u0631 Service Worker \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>service-worker.js<\/code> \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0641\u0634\u0627\u0631:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nb\">self<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">push<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">event<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">options<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">,<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"na\">icon<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">icon.png<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"na\">badge<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">badge.png<\/span><span class=\"dl\">'<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">};<\/span>\n\n<span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nf\">waitUntil<\/span><span class=\"p\">(<\/span>\n<span class=\"nb\">self<\/span><span class=\"p\">.<\/span><span class=\"nx\">registration<\/span><span class=\"p\">.<\/span><span class=\"nf\">showNotification<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">options<\/span><span class=\"p\">)<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">);<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>\u0627\u0631\u0633\u0627\u0644 \u0627\u0639\u0644\u0627\u0646\u200c\u0647\u0627\u06cc \u0641\u0634\u0627\u0631\u06cc \u0627\u0632 \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0627\u0639\u0644\u0627\u0646\u200c\u0647\u0627\u06cc \u0641\u0634\u0627\u0631\u06cc\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a POST \u0628\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u0647 \u0633\u0631\u0648\u06cc\u0633 \u0641\u0634\u0627\u0631 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Node.js \u0648 the \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a <code>web-push<\/code> \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">constwebPush<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">web-push<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nx\">constvapidKeys<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n<span class=\"na\">publicKey<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">YOUR_PUBLIC_VAPID_KEY<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"na\">privateKey<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">YOUR_PRIVATE_VAPID_KEY<\/span><span class=\"dl\">'<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"nx\">webPush<\/span><span class=\"p\">.<\/span><span class=\"nf\">setVapidDetails<\/span><span class=\"p\">(<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">mailto:your-email@example.com<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"nx\">vapidKeys<\/span><span class=\"p\">.<\/span><span class=\"nx\">publicKey<\/span><span class=\"p\">,<\/span>\n<span class=\"nx\">vapidKeys<\/span><span class=\"p\">.<\/span><span class=\"nx\">privateKey<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"nx\">constpushSubscription<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"na\">endpoint<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">USER_SUBSCRIPTION_ENDPOINT<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"na\">keys<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n<span class=\"na\">auth<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">USER_AUTH_KEY<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span class=\"na\">p256dh<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">USER_P256DH_KEY<\/span><span class=\"dl\">'<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">payload<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Hello!<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">This is a push notification.<\/span><span class=\"dl\">'<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"nx\">webPush<\/span><span class=\"p\">.<\/span><span class=\"nf\">sendNotification<\/span><span class=\"p\">(<\/span><span class=\"nx\">pushSubscription<\/span><span class=\"p\">,<\/span> <span class=\"nx\">payload<\/span><span class=\"p\">)<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span> <span class=\"o\">=&gt;<\/span><span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Push notification sent:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">response<\/span><span class=\"p\">))<\/span>\n<span class=\"err\">\u00a0\u00a0\u00a0<\/span> <span class=\"p\">.<\/span><span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span> <span class=\"o\">=&gt;<\/span><span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error sending push notification:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">));<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0644\u0637\u0641\u0627 \u062a\u0639\u0648\u06cc\u0636 \u06a9\u0646\u06cc\u062f <code>'YOUR_PUBLIC_VAPID_KEY'<\/code>\u060c <code>'YOUR_PRIVATE_VAPID_KEY'<\/code>\u060c <code>'USER_SUBSCRIPTION_ENDPOINT'<\/code>\u060c <code>'USER_AUTH_KEY'<\/code>\u060c \u0648 <code>'USER_P256DH_KEY'<\/code> \u0628\u0627 \u0627\u0631\u0632\u0634 \u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0634\u0645\u0627<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0639\u0644\u0627\u0646\u200c\u0647\u0627\u06cc \u0641\u0634\u0627\u0631\u06cc \u0628\u0647 PWA \u062e\u0648\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u062f\u0631\u06af\u06cc\u0631 \u0648 \u062f\u0631 \u062c\u0631\u06cc\u0627\u0646 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627 \u06cc\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u062c\u062f\u06cc\u062f \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f.  \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062d\u0641\u0638 \u06a9\u0627\u0631\u0628\u0631 \u0648 \u0628\u0647\u0628\u0648\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0644\u06cc \u06a9\u0627\u0631\u0628\u0631 \u06a9\u0645\u06a9 \u06a9\u0646\u062f.  \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u067e\u06cc\u0634\u0631\u0648 (PWA) \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0648\u0628 \u0645\u062f\u0631\u0646 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u062a\u062c\u0631\u0628\u0647\u200c\u0627\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0622\u0646\u0647\u0627 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0648 \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u0631\u0627 \u0628\u0627 \u0647\u0645 \u062a\u0631\u06a9\u06cc\u0628 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0641\u0644\u0627\u06cc\u0646\u060c \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u0641\u0634\u0627\u0631\u06cc \u0648 \u0627\u0645\u06a9\u0627\u0646 \u0646\u0635\u0628 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":66169,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-66168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/66168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=66168"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/66168\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/66169"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=66168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=66168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=66168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}