{"id":352700,"date":"2024-05-20T22:13:43","date_gmt":"2024-05-20T22:13:43","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=352700"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-20T22:13:43","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=352700","title":{"rendered":"<span>\u041e\u0434\u043d\u043e PWA, \u0447\u0442\u043e\u0431 \u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0435\u043c\u0438<\/span>"},"content":{"rendered":"<div><!--[--><img loading=\"lazy\" decoding=\"async\" height=\"1\" src=\"https:\/\/www.facebook.com\/tr?id=2610199939046212&amp;ev=PageView&amp;noscript=1\" style=\"display:none;\" width=\"1\"><img loading=\"lazy\" decoding=\"async\" height=\"1\" src=\"https:\/\/vk.com\/rtrg?p=VK-RTRG-400285-cLVDA\" style=\"display:none;\" width=\"1\"><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/9c4\/3fe\/8a5\/9c43fe8a562dae5cded2e9c75cc253ef.jpeg\" width=\"750\" height=\"500\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9c4\/3fe\/8a5\/9c43fe8a562dae5cded2e9c75cc253ef.jpeg\" data-blurred=\"true\"\/><\/figure>\n<p>\u0422\u0435\u0440\u043c\u0438\u043d PWA \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0435\u0449\u0435 \u0432 2015 \u0433\u043e\u0434\u0443, \u043d\u043e \u0438\u0437-\u0437\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u0440\u0430\u0437\u043d\u043e\u0433\u043b\u0430\u0441\u0438\u0439 \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u044b\u043b \u043b\u0438\u0448\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0439 \u0438\u0434\u0435\u0435\u0439. \u0412 2023 \u0433\u043e\u0434\u0443 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043d\u0430\u0434\u0435\u0436\u0434\u0430, \u0447\u0442\u043e \u043d\u0430 iOS \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u0434\u0432\u0438\u0436\u043a\u0438, \u0430 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u043d\u0438\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430.<\/p>\n<p>\u0412\u0435\u0441\u043d\u043e\u0439 \u043d\u0430 <a href=\"https:\/\/holyjs.ru\/?utm_source=habr&amp;utm_medium=755844\"><u>HolyJS<\/u><\/a> \u041d\u0438\u043a\u0438\u0442\u0430 \u0414\u0443\u0431\u043a\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u0443\u043c\u0435\u044e\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 PWA: \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0438\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438 \u0432 \u043a\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043e\u043d\u0438 \u0440\u0435\u0448\u0430\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0435 \u0445\u0443\u0436\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0414\u0435\u043b\u0438\u043c\u0441\u044f \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u043a\u043e\u0439 \u0434\u043e\u043a\u043b\u0430\u0434\u0430 \u0438 \u0432\u0438\u0434\u0435\u043e\u0437\u0430\u043f\u0438\u0441\u044c\u044e. \u041f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442 \u043b\u0438\u0446\u0430 \u041d\u0438\u043a\u0438\u0442\u044b.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/64e322ff7f26cf30b3d4a5ec\" data-style=\"\" id=\"64e322ff7f26cf30b3d4a5ec\" width=\"\"><\/div>\n<h3>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h3>\n<p><a href=\"#whatis\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 PWA<\/a><br \/><a href=\"#pros\">\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 PWA<\/a><br \/><a href=\"#forwho\">\u041a\u043e\u043c\u0443 \u043e\u043d\u043e \u043d\u0430\u0434\u043e<\/a><br \/><a href=\"#hide\">\u041f\u0440\u044f\u0447\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438<\/a><br \/><a href=\"#nice\">\u041a\u0440\u0430\u0441\u0438\u0432\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430\u043c\u0438<\/a><br \/><a href=\"#get\">\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b<\/a><br \/><a href=\"#share\">\u0414\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0444\u0430\u0439\u043b\u0430\u043c\u0438<\/a><br \/><a href=\"#buf\">\u0411\u0443\u0444\u0435\u0440 \u043e\u0431\u043c\u0435\u043d\u0430<\/a><br \/><a href=\"#native\">\u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 UI<\/a><br \/><a href=\"#filesys\">\u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/a><br \/><a href=\"#launch\">\u0417\u0430\u043f\u0443\u0441\u043a \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u041e\u0421<\/a><br \/><a href=\"#eye\">EyeDropper API<\/a><br \/><a href=\"#own\">\u0421\u0432\u043e\u0439 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b<\/a><br \/><a href=\"#instead\">\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0438<\/a><br \/><a href=\"#shortcut\">\u0428\u043e\u0440\u0442\u043a\u0430\u0442\u044b<\/a><br \/><a href=\"#open\">\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b<\/a><br \/><a href=\"#ownfilesys\">\u0421\u0432\u043e\u044f \u0444\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/a><br \/><a href=\"#local\">\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b<\/a><\/p>\n<p><a class=\"anchor\" name=\"whatis\" id=\"whatis\"><\/a><\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 PWA<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u0442\u0435\u0440\u043c\u0438\u043d \u043d\u0435\u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u0435\u043d \u2014 \u043e \u043d\u0451\u043c \u0432\u0435\u0434\u0443\u0442\u0441\u044f \u0446\u0435\u043b\u044b\u0435 \u0434\u0438\u0441\u043a\u0443\u0441\u0441\u0438\u0438. \u0412 \u0434\u043e\u043a\u043b\u0430\u0434\u0435 \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435:<\/p>\n<p><em>PWA \u2014 \u0442\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\u00a0<\/em><\/p>\n<p>\u041e\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043d\u043e \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u042f \u043e\u0442\u043a\u0440\u044b\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f PWA \u0432 2016 \u0433\u043e\u0434\u0443: \u041c\u0430\u043a\u0441\u0438\u043c \u042e\u0437\u0432\u0430 <a href=\"https:\/\/www.youtube.com\/live\/cOTOSbjet_8?feature=share&amp;t=17481\"><u>\u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b<\/u><\/a> \u043f\u0440\u043e \u043d\u0435\u0433\u043e \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 Web Standards Days \u0432 \u041c\u0438\u043d\u0441\u043a\u0435. \u042d\u0442\u043e \u0431\u044b\u043b\u0430 \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043d\u043e \u0441\u044b\u0440\u0430\u044f \u2014 \u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0442 \u0431\u044b\u043b\u043e \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0441 \u043d\u0435\u0439 \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0442\u0435\u0440\u043c\u0438\u043d \u00ab\u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u00bb \u0435\u0449\u0451 \u0432 2007 \u0433\u043e\u0434\u0443 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b\u0438 \u0432 Apple. \u041d\u043e, \u0432\u0438\u0434\u0438\u043c\u043e, \u0421\u0442\u0438\u0432 \u0414\u0436\u043e\u0431\u0441 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0435\u0440\u0435\u0434\u0443\u043c\u0430\u043b, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 2015 \u0433\u043e\u0434\u0443 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0442\u0435\u0440\u043c\u0438\u043d \u00abPWA\u00bb. \u0412 Google <a href=\"https:\/\/infrequently.org\/2015\/06\/progressive-apps-escaping-tabs-without-losing-our-soul\/\"><u>\u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b\u0438<\/u><\/a>, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u0412\u043e\u0442 \u0435\u0433\u043e \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438:<\/p>\n<ul>\n<li>\n<p><strong>\u041e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0435<\/strong>: \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u0440\u0438 \u043b\u044e\u0431\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0435\u0442\u0438<\/strong>: \u0443 \u043d\u0435\u0433\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043e\u0444\u043b\u0430\u0439\u043d-\u0440\u0435\u0436\u0438\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/strong> \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0441\u00a0 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c\u043e\u0435<\/strong>: \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0435<\/strong>: \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0441 \u044d\u0442\u0438\u043c \u0432\u0441\u0451 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0445\u043e\u0440\u043e\u0448\u043e, \u0430 \u0441 \u0432\u0435\u0431\u043e\u043c \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p><strong>\u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0438<\/strong>.\u00a0<\/p>\n<\/li>\n<li>\n<p><strong>\u0415\u0441\u0442\u044c \u0432\u043e\u0432\u043b\u0435\u043a\u0430\u044e\u0449\u0430\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430<\/strong>: \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043b\u043e\u0436\u0438\u043b\u0438, \u0447\u0442\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0443\u0442 \u043f\u0443\u0448\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u043e\u0435<\/strong>: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u0441\u0442\u043e\u043b\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0430 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<p>Apple \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0442\u0435\u0440\u043c\u0438\u043d\u0430 PWA, \u043d\u0430\u0437\u044b\u0432\u0430\u044f \u0438\u0445 Home Screen Web Apps \u2014 \u044d\u0434\u0430\u043a\u043e\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/faa\/f9f\/b1c\/faaf9fb1c1cfa2d0c613ba4e7293433b.png\" width=\"924\" height=\"904\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/faa\/f9f\/b1c\/faaf9fb1c1cfa2d0c613ba4e7293433b.png\"\/><\/figure>\n<p>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 PWA \u043d\u0430 iOS \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0434\u0430\u0451\u0442 PWA \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c\u0441\u044f.\u00a0<\/p>\n<p>\u041d\u0430 Android \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u041d\u0430 iOS (\u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e) \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u041d\u0430 \u044d\u043a\u0440\u0430\u043d \u201e\u0414\u043e\u043c\u043e\u0439\u201c\u00bb, \u043d\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u0441\u0442\u043e\u043b\u0435.\u00a0<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f5d\/a20\/068\/f5da20068282c70e9c6da45b1eb0384f.png\" width=\"484\" height=\"1076\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f5d\/a20\/068\/f5da20068282c70e9c6da45b1eb0384f.png\"\/><\/figure>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043e\u0432 \u0432 Chrome \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443 \u0440\u044f\u0434\u043e\u043c \u0441 URL \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438, \u0447\u0442\u043e PWA-\u0440\u0435\u0436\u0438\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2b5\/480\/df2\/2b5480df245db6e6fff49b6668f5e025.png\" width=\"1600\" height=\"938\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2b5\/480\/df2\/2b5480df245db6e6fff49b6668f5e025.png\"\/><\/figure>\n<p> \u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0440\u0430\u043d\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 30 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0433\u0434\u0435-\u0442\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0430\u043d\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d \u043e\u0442\u043a\u0440\u044b\u043b \u0432 \u0444\u043e\u043d\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c HTTPS.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0443\u0436\u0435\u043d web app manifest \u2014 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438 \u0432 \u043d\u0451\u043c \u043e\u043f\u0438\u0441\u0430\u043d URL, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u0438\u043a\u043e\u043d\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c service worker, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u00ab\u0444\u0435\u0442\u0447\u0438\u0442\u00bb \u0437\u0430\u043f\u0440\u043e\u0441 \u2014 \u043f\u0443\u0441\u0442\u043e\u0439 service worker \u043d\u0435 \u043f\u0440\u043e\u043a\u0430\u0442\u0438\u0442.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u043e \u0432\u0441\u0451 \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435: \u0437\u0430\u0447\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c PWA, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f? \u042f \u0445\u043e\u0447\u0443 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043f\u043e\u0447\u0435\u043c\u0443 PWA \u2014 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0437\u0434\u043e\u0440\u043e\u0432\u043e.\u00a0<\/p>\n<p><a class=\"anchor\" name=\"pros\" id=\"pros\"><\/a><\/p>\n<h3>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 PWA<\/h3>\n<h4>\u0413\u0438\u0431\u043a\u043e\u0441\u0442\u044c<\/h4>\n<p>\u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e PWA, \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u0442\u0430\u043c \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0451, \u0447\u0442\u043e \u0432\u044b \u0443\u043c\u0435\u0435\u0442\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u0432 PWA \u0438 \u0434\u0430\u0436\u0435 \u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c32\/e85\/6fb\/c32e856fbc0c8ef4589552941c1b0d8a.png\" width=\"790\" height=\"1064\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c32\/e85\/6fb\/c32e856fbc0c8ef4589552941c1b0d8a.png\"\/><\/figure>\n<h4>\u0414\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0446\u0438\u044f<\/h4>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0451 \u0438 \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0435\u043a\u043b\u0430\u043c\u0443. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0434\u043e\u0432\u0435\u0441\u0442\u0438 \u0435\u0433\u043e \u0434\u043e App Store \u2014 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430: \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0439\u0442\u0438 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0440\u0435\u0432\u044c\u044e, \u043a\u043b\u044e\u0447\u0430\u043c\u0438 \u0438 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u044f\u043c\u0438. \u0410 \u0441 PWA \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0418 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0451 \u043a\u0430\u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0448\u0442\u0443\u043a\u0438, \u043a\u0430\u043a PWA Builder \u2014 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442 \u0432\u0430\u0448\u0438 PWA \u0432 \u043d\u0435\u0447\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u043e\u0435, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432 App Store. \u0417\u043d\u0430\u0447\u0438\u0442, PWA \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0446\u0438\u0438 \u043b\u0443\u0447\u0448\u0435.<\/p>\n<h4>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435: F5<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u0439\u0442\u0438 \u0432 App Store \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\u00bb \u044f\u0432\u043d\u043e. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0451 \u0435\u0449\u0451 \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 \u0440\u0435\u0432\u044c\u044e. \u0410 \u0434\u043b\u044f PWA \u0432\u0441\u0451 \u043f\u0440\u043e\u0449\u0435 \u2014 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 F5 \u0438\u043b\u0438 Command-R \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u041e\u0421.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u044f \u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0441\u044f \u043a \u0434\u043e\u043a\u043b\u0430\u0434\u0443, \u0442\u043e \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b \u0443 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0445, \u043a\u0430\u043a \u043e\u043d\u0438 \u043f\u0438\u0448\u0443\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0442\u0430\u043c \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u0414\u0430, \u0442\u0430\u043c \u0435\u0441\u0442\u044c API, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u0432\u0435\u0431\u0435. \u041d\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u044d\u0442\u043e WebView, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u0435\u0435.<\/p>\n<h4>API<\/h4>\n<p>\u0415\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Project Fugu. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0442\u043e\u0440\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u044d\u0442\u043e Google \u0438 Microsoft. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f API, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0421\u0430\u043c\u043e\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u0437\u0434\u0435\u0441\u044c \u2014 \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u041e\u0421 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u0432\u0430\u043c \u0447\u0442\u043e-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 iOS, \u0435\u0441\u043b\u0438 \u0432\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0435 Chrome, \u0442\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 WebKit. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043d\u0435 \u0434\u0430\u0451\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a\u0438\u043c-\u0442\u043e API, \u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u0423 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c <a href=\"https:\/\/www.youtube.com\/watch?v=iC3fspqn3vA&amp;ab_channel=SytacDevJam\"><u>\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u043a\u043b\u0430\u0434<\/u><\/a> \u043f\u0440\u043e \u044d\u0442\u043e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7cf\/567\/1ce\/7cf5671cee0e1b92ec261563dcd00195.png\" width=\"1600\" height=\"878\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7cf\/567\/1ce\/7cf5671cee0e1b92ec261563dcd00195.png\"\/><\/figure>\n<p>\u0423 \u041e\u0421 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0436\u0435\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438: \u043f\u0440\u044f\u043c\u043e \u0431\u0430\u0439\u0442\u0438\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u0430\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c HID-\u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u044b. \u041d\u043e \u043d\u0435\u043a\u0438\u0439 \u0432\u0435\u043d\u0434\u043e\u0440 \u043f\u043e \u0438\u043c\u0435\u043d\u0438 Apple \u0433\u043e\u0432\u043e\u0440\u0438\u0442: \u00ab\u0414\u0430, \u0432\u044b \u0442\u0430\u043c \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0435\u0441\u044c, \u0432\u0441\u0451 \u0437\u0434\u043e\u0440\u043e\u0432\u043e. \u041d\u043e \u044f \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u044e \u0432\u0430\u043c \u043f\u043e\u043c\u0435\u0448\u0430\u0442\u044c\u00bb.<\/p>\n<p>\u041d\u043e \u0438 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0434\u043e \u043f\u043e\u0440\u044b \u0434\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0412 \u0444\u0435\u0432\u0440\u0430\u043b\u0435 2023 \u0433\u043e\u0434\u0430 \u0415\u0421 \u0441\u043a\u0430\u0437\u0430\u043b Apple, \u0447\u0442\u043e \u0438\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e WebKit \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u0440\u0440\u0435\u043b\u0438\u0440\u0443\u0435\u0442 \u0441 \u0435\u0432\u0440\u043e\u043f\u0435\u0439\u0441\u043a\u0438\u043c\u0438 \u0437\u0430\u043a\u043e\u043d\u0430\u043c\u0438, \u0438 \u043e\u0431\u044f\u0437\u0430\u043b \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0434\u0432\u0438\u0436\u043a\u0438. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e0d\/ec8\/87b\/e0dec887bdf4b06a4023050debaca606.png\" width=\"944\" height=\"906\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e0d\/ec8\/87b\/e0dec887bdf4b06a4023050debaca606.png\"\/><\/figure>\n<p>\u042f \u043e\u0447\u0435\u043d\u044c \u0436\u0434\u0443, \u043a\u043e\u0433\u0434\u0430 Apple \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u0435\u0442 \u0432 \u044d\u0442\u043e\u043c \u0441\u0443\u0434\u0435, \u0434\u0430 \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0435\u0449\u0451 \u0438 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e Google \u0442\u043e\u0436\u0435 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c. \u042f \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438 \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0434\u043e\u043a\u043b\u0430\u0434: \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c, \u0433\u043e\u0434\u0430 \u0447\u0435\u0440\u0435\u0437 \u0434\u0432\u0430-\u0442\u0440\u0438 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f Chromium \u0434\u043b\u044f iOS. \u0412\u044b \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0435\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u044d\u0442\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u044c \u043f\u0440\u043e \u0441\u0443\u0434, \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0434\u0435\u043b\u044e \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c <a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/main\/docs\/ios\/build_instructions.md\"><u>\u044d\u0442\u0430 \u0441\u0441\u044b\u043b\u043a\u0430<\/u><\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4de\/fb3\/66e\/4defb366e247b65a8cc26f723b2865d9.png\" width=\"1600\" height=\"985\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4de\/fb3\/66e\/4defb366e247b65a8cc26f723b2865d9.png\"\/><\/figure>\n<p>\u00a0<\/p>\n<p>\u0423 Firefox \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0430 \u0434\u043b\u044f iOS. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e \u043d\u0435\u0439 \u043f\u0440\u043e\u0439\u0442\u0438 \u0438 \u0441\u0430\u043c\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c Xcode.<\/p>\n<p><a class=\"anchor\" name=\"forwho\" id=\"forwho\"><\/a><\/p>\n<h3>\u041a\u043e\u043c\u0443 \u043e\u043d\u043e \u043d\u0430\u0434\u043e<\/h3>\n<p>\u041d\u043e \u0432\u0441\u0435 \u0436\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441: \u043a\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u044b PWA? \u041d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0443\u0447\u0448\u0435. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, PWA \u0435\u0441\u0442\u044c \u0443 Spotify, TikTok, Twitter, Pinterest. \u041f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u0431\u0440\u0435\u043d\u0434\u044b \u0432\u043b\u043e\u0436\u0438\u043b\u0438\u0441\u044c \u0432 PWA. \u041a\u0441\u0442\u0430\u0442\u0438, \u044f \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043e\u0444\u043e\u0440\u043c\u0438\u043b \u043a\u0430\u0440\u0442\u0443 \u043e\u0434\u043d\u043e\u0433\u043e \u0436\u0435\u043b\u0442\u043e\u0433\u043e \u0431\u0430\u043d\u043a\u0430, \u0438 \u0438\u043c, \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0442\u043e\u0436\u0435 \u043d\u0430\u0434\u043e PWA.<\/p>\n<p>\u0415\u0441\u0442\u044c Project Fugu API Showcase, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Fugu API \u0434\u043b\u044f PWA. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0445 \u043f\u043e\u043b\u0438\u0441\u0442\u0430\u0439\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0438 \u0443\u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0443\u043c\u0435\u0435\u0442 \u0432\u0435\u0431.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/290\/ea2\/39c\/290ea239ccd126fd39c1ac8c5896363d.png\" width=\"1600\" height=\"951\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/290\/ea2\/39c\/290ea239ccd126fd39c1ac8c5896363d.png\"\/><\/figure>\n<p>\u00a0<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Squoosh. \u041e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043e\u0444\u043b\u0430\u0439\u043d\u0435 \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e WebAssembly.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c8a\/c8b\/9cf\/c8ac8b9cf285cbbe2b3fa8ca088a450d.png\" width=\"1600\" height=\"1332\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c8a\/c8b\/9cf\/c8ac8b9cf285cbbe2b3fa8ca088a450d.png\"\/><\/figure>\n<p>\u0415\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Excalidraw, \u043e\u043d\u043e \u0442\u043e\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b. \u041e\u043d\u043e \u0442\u043e\u0436\u0435 offline first \u0438 \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b33\/50e\/4d9\/b3350e4d996261c3c85fdd42d4ef1a99.png\" width=\"1600\" height=\"921\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b33\/50e\/4d9\/b3350e4d996261c3c85fdd42d4ef1a99.png\"\/><\/figure>\n<p>\u00a0<\/p>\n<p>\u0415\u0441\u0442\u044c SVGcode \u2014 \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0430\u0441\u0442\u0440 \u0432 \u0432\u0435\u043a\u0442\u043e\u0440 \u2014 \u043c\u0435\u0447\u0442\u0430!<\/p>\n<p>\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4fd\/c2c\/c81\/4fdc2cc81e0cd75b5a626c792ee28254.png\" width=\"1600\" height=\"1156\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4fd\/c2c\/c81\/4fdc2cc81e0cd75b5a626c792ee28254.png\"\/><\/figure>\n<p>\u041d\u0443 \u0438 \u043f\u043e\u043a\u0430\u0436\u0443, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0441\u0432\u043e\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u042f \u043f\u0440\u043e\u0448\u0435\u043b \u0432\u0435\u0441\u044c \u043f\u0443\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e PWA \u0438 \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043c \u0441 \u0432\u0430\u043c\u0438. \u0423 \u043d\u0430\u0441 \u0441 \u0434\u0440\u0443\u0437\u044c\u044f\u043c\u0438 \u0435\u0441\u0442\u044c \u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0439 \u0432\u0435\u0447\u0435\u0440 \u0447\u0435\u0442\u0432\u0435\u0440\u0433\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0433\u0440\u0430\u0435\u043c \u0432 D&amp;D. \u041d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0432\u0441\u0435 \u0437\u043d\u0430\u044e\u0442, \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u0442 \u0432\u0435\u0447\u0435\u0440 \u043c\u0435\u043d\u044f \u043d\u0435\u0442 \ud83d\ude42<\/p>\n<p>\u0412 \u0438\u0433\u0440\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043a\u0435\u043d\u044b \u2014 \u044d\u0442\u043e \u043a\u0440\u0443\u0436\u043e\u0447\u043a\u0438 \u0441 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c\u0438 \u0440\u0430\u043c\u043e\u0447\u043a\u0430\u043c\u0438. \u041c\u044b \u0438\u0445 \u0440\u0438\u0441\u0443\u0435\u043c \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432 Photoshop. \u042f \u0440\u0435\u0448\u0438\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441 \u044d\u0442\u0438\u043c \u0432\u0441\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041a\u043e\u0433\u0434\u0430 \u044f \u0433\u043e\u0442\u043e\u0432\u0438\u043b \u0434\u043e\u043a\u043b\u0430\u0434 \u043f\u0440\u043e Fugu, \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 API \u0432 \u0432\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/24c\/c4c\/baa\/24cc4cbaa25276a59c40d7539d1c2922.png\" width=\"1600\" height=\"912\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/24c\/c4c\/baa\/24cc4cbaa25276a59c40d7539d1c2922.png\"\/><\/figure>\n<p>\u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u0442\u0430\u043c \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u043a\u0440\u0430\u0441\u043d\u044b\u0445 \u0440\u0430\u043c\u043e\u043a. \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u2014 \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0412 \u0441\u0438\u043d\u044e\u044e \u0440\u0430\u043c\u043a\u0443 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0430 \u0430\u043f\u0438\u0448\u043a\u0430, \u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u043d\u0430 \u0438\u043b\u0438 \u043d\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442. \u041e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438 JSON \u2014 \u043e\u043d \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f, \u043d\u043e \u043d\u0435 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.\u00a0<\/p>\n<p>\u042f \u043f\u043e\u043b\u0438\u0441\u0442\u0430\u043b \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u043f\u043e\u043d\u044f\u043b: \u043f\u043e\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u0438 API. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/dnd-tokenizer-41471e.netlify.app\"><u>\u043c\u043e\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/u><\/a>, \u0430 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0435\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d53\/e43\/03d\/d53e4303d8201fddb038ee7598f39992.png\" width=\"1600\" height=\"893\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d53\/e43\/03d\/d53e4303d8201fddb038ee7598f39992.png\"\/><\/figure>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043d\u043e \u0435\u0441\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430 \u00abInstall PWA\u00bb. \u041d\u043e \u0435\u0451 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0443\u0436\u0435 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 PWA. \u041a\u0430\u043a \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443? <\/p>\n<p><a class=\"anchor\" name=\"hide\" id=\"hide\"><\/a><\/p>\n<h3>\u041f\u0440\u044f\u0447\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438<\/h3>\n<p>\u041d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0435, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0435 \u0441 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439. \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0438 URL, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043b\u0435\u0436\u0438\u0442 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442.<\/p>\n<pre><code class=\"javascript\">\/\/ app.manifest  \"related_applications\": [    {      \"platform\": \"webapp\",          \"url\": \"https:\/\/my.app\/app.webmanifest\"    }  ],<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432 JavaScript \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 <code>getInstalledRelatedApps<\/code>.<\/p>\n<pre><code class=\"javascript\">if ('getInstalledRelatedApps' in navigator) {    const relatedApps =      await navigator.getInstalledRelatedApps();    const PWAisInstalled = relatedApps.length > 0;     if (PWAisInstalled) {      installButton.classList.add('hidden');    }  }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043e\u043d \u0447\u0442\u043e-\u0442\u043e \u0432\u0435\u0440\u043d\u0443\u043b, \u0437\u043d\u0430\u0447\u0438\u0442, PWA \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e, \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0435\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0430\u0434\u043e. \u0412 <code>getInstalledRelatedApps<\/code>\u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0445\u043d\u0443\u0442\u044c \u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u0430 \u0448\u0442\u0443\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 Android.<\/p>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c CSS-\u0440\u0435\u0448\u0435\u043d\u0438\u0435: \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u0441\u0442\u0438\u043b\u044f\u0445, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0443\u0436\u043d\u043e\u043c <code>display-mode<\/code> \u043a\u043d\u043e\u043f\u043a\u0430 \u043f\u0440\u044f\u0442\u0430\u043b\u0430\u0441\u044c.<\/p>\n<pre><code class=\"css\">@media (display-mode: standalone),         (display-mode: window-controls-overlay) {          .pwa-install-button {            display: none;          }  } <\/code><\/pre>\n<p><a class=\"anchor\" name=\"nice\" id=\"nice\"><\/a><\/p>\n<h3>\u041a\u0440\u0430\u0441\u0438\u0432\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430\u043c\u0438<\/h3>\n<p>\u0425\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0436\u0438\u043c\u0430\u044e \u00ab\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u00bb, \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ffe\/89b\/93d\/ffe89b93d99e8e94a6a5d0ecd4963591.png\" width=\"1600\" height=\"890\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ffe\/89b\/93d\/ffe89b93d99e8e94a6a5d0ecd4963591.png\"\/><\/figure>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u043f\u043e\u043b\u0435 <code>description<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0436\u0438\u0442\u0435 <code>form_factor<\/code> (<code>wide<\/code> \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 \u0438 <code>narrow<\/code>\u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e) \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b. \u0415\u0441\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, Chrome \u043d\u0435 \u043f\u043e\u0439\u043c\u0435\u0442, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u0442\u0430 \u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0438 \u0441\u043f\u043b\u044e\u0449\u0438\u0442 \u0435\u0451.\u00a0<\/p>\n<pre><code class=\"javascript\">\/\/ app.manifest  \"short_name\": \"D&amp;D Tokenizer\",  \"description\": \"Some description.\",  \"screenshots\": [    {      \"src\": \".\/screens\/desktop.jpg\",      \"type\": \"image\/jpeg\",      \"sizes\": \"800x583\",      \"form_factor\": \"wide\"    },    {      \"src\": \".\/screens\/mobile.jpg\",      \"type\": \"image\/jpeg\",      \"sizes\": \"530x700\",      \"form_factor\": \"narrow\"    }  ],<\/code><\/pre>\n<p><a class=\"anchor\" name=\"get\" id=\"get\"><\/a><\/p>\n<h3>\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b<\/h3>\n<p>\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u00abShare\u00bb, \u0447\u0442\u043e\u0431\u044b \u0447\u0442\u043e-\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c. \u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 PWA?\u00a0<\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c <code>share_target<\/code>. \u0412\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0435, \u0432 \u043a\u0430\u043a\u043e\u0439 <code>action<\/code>\u043f\u043e\u0439\u0442\u0438, \u0438 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c POST-\u0437\u0430\u043f\u0440\u043e\u0441. \u0412\u044b \u043f\u0438\u0448\u0435\u0442\u0435, \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0432\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u0444\u0430\u0439\u043b\u044b, \u0438 \u0442\u0438\u043f \u0444\u0430\u0439\u043b\u0430 \u2014 <code>image<\/code>.<\/p>\n<pre><code class=\"javascript\">  \/\/ app.manifest    \"share_target\": {      \"action\": \"\/?share-target\",      \"method\": \"POST\",      \"enctype\": \"multipart\/form-data\",      \"params\": {      \"files\": [        {          \"name\": \"image\", \"accept\":          [\"image\/*\"]        }      ]    }  }, <\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0432\u0435\u0441\u0442\u0438 service worker. \u0421 \u043d\u0438\u043c \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043b \u043a\u043e\u0434 \u044d\u0442\u043e\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0438\u0437 <a href=\"https:\/\/github.com\/tomayac\/SVGcode\"><u>SVGcode<\/u><\/a> \u0443 \u0422\u043e\u043c\u0430\u0441\u0430 \u0428\u0442\u0430\u0439\u043d\u0435\u0440\u0430, \u0430 \u043f\u043e\u0442\u043e\u043c \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041d\u043e \u0422\u043e\u043c\u0430\u0441 \u0436\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0448\u0438\u0431\u0430\u0442\u044c\u0441\u044f \u2014 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e? \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0443 service worker \u0435\u0441\u0442\u044c \u0433\u043e\u043d\u043a\u0430 \u0437\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0432\u044b\u0439 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0447\u0442\u043e-\u0442\u043e \u0432 <code>fetch<\/code>, \u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 service worker \u0442\u0443\u0434\u0430 \u043d\u0435 \u043f\u043e\u0439\u0434\u0451\u0442.\u00a0<\/p>\n<p>\u0418 \u043c\u044b \u043f\u043e\u0447\u0438\u043d\u0438\u043b\u0438 \u044d\u0442\u043e. \u0421\u0443\u0442\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 service worker \u0432\u044b \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 fetch-\u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0435, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 \u044d\u0442\u043e \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 URL, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0435, \u0438 \u0442\u043e\u0442 \u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 POST. \u0410 \u0434\u0430\u043b\u044c\u0448\u0435 \u0432\u044b \u043a\u043b\u0430\u0434\u0435\u0442\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0432 \u043a\u044d\u0448. \u0420\u0435\u0434\u0438\u0440\u0435\u043a\u0442 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0444\u043e\u0440\u043c\u044b \u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e.\u00a0\u00a0<\/p>\n<pre><code class=\"javascript\">\/\/ sw.js  self.addEventListener('fetch', (fetchEvent) => {    const url = new URL(fetchEvent.request.url);    if (      url.pathname === '\/' &amp;&amp; url.searchParams.has('share-target') &amp;&amp; fetchEvent.request.method === 'POST'    ) {      return fetchEvent.respondWith(        (async () => {          const formData = await fetchEvent.request.formData();          const image = formData.get('image');          const keys = await caches.keys();          const sharedCache = await caches.open(           keys.filter((key) => key.startsWith('share-target'))[0]   );          await sharedCache.put('shared-image', new Response(image));          return Response.redirect('.\/?share-target', 303);        })()      );    }  }); <\/code><\/pre>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u0434\u0435 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0435\u0441\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u0435\u043b \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442, \u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u0437 \u043a\u044d\u0448\u0430. \u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 <code>blob<\/code>\u0438\u043b\u0438 <code>image<\/code>\u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e.\u00a0<\/p>\n<pre><code class=\"javascript\">\/\/ main.js  window.addEventListener('load', async () => {    if (location.search.includes('share-target')) {      const keys = await caches.keys();      const sharedCache = await caches.open(          keys.filter((key) => key.startsWith('share-target'))[0]      );      const image = await sharedCache.match('shared-image');      if (image) {        const blob = await image.blob();        await sharedCache.delete('shared-image');        \/\/ do something with blob      }    }  });<\/code><\/pre>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e, \u043d\u043e \u044d\u0442\u043e \u0442\u044f\u0436\u0435\u043b\u043e \u0434\u0435\u0431\u0430\u0436\u0438\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445.<\/p>\n<p><a class=\"anchor\" name=\"share\" id=\"share\"><\/a><\/p>\n<h3>\u0414\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0444\u0430\u0439\u043b\u0430\u043c\u0438<\/h3>\n<p>\u041c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0434\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043c\u0435\u0442\u043e\u0434 <code>canShare<\/code>. \u0414\u0430\u043b\u0435\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0435 <code>blob<\/code>, \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435 \u0431\u0438\u043d\u0430\u0440\u043d\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0448\u0430\u0440\u0438\u0442\u0435. \u0421\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u0444\u0430\u0439\u043b, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u0435\u0433\u043e \u0438\u043c\u044f \u0438 \u0442\u0438\u043f. \u0414\u0430\u043b\u0435\u0435 \u0435\u0449\u0435 \u0440\u0430\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0435 <code>canShare<\/code>, \u043c\u043e\u0436\u0435\u0442 \u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043a\u0443\u0434\u0430-\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0442\u0438\u043f \u0444\u0430\u0439\u043b\u0430. \u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044f \u043f\u043e\u043d\u0438\u043c\u0430\u044e, <code>canShare<\/code>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0435\u0441\u0442\u044c \u043b\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u0412 \u043a\u043e\u043d\u0446\u0435 \u0432\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0435 <code>navigator.share<\/code>. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b.\u00a0<\/p>\n<pre><code class=\"javascript\">const shareButton = document.querySelector('.button');  if (navigator.canShare) {    shareButton.addEventListener('click', async () => {      const blob = getBlobFromImage();      const file = new File([blob], 'token.png', {          type: 'image\/png',      });      const data = {        files: [file],    };    if (navigator.canShare(data)) {      try {        await navigator.share(data);    } catch (err) {          if (err.name !== 'AbortError') {            console.error(err.name, err.message);          }        }      }    });  } <\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0438\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 \u041e\u0421. Share \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0432 \u043d\u0435\u0435 \u0431\u0438\u043d\u0430\u0440\u043d\u0438\u043a, \u0430 \u0447\u0442\u043e \u041e\u0421 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435 \u2014 \u0443\u0436\u0435 \u043d\u0435\u0432\u0430\u0436\u043d\u043e. \u0410 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b Esc, \u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u044d\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <code>catch<\/code>, \u0447\u0442\u043e\u0431\u044b \u0442\u0438\u0445\u043e\u043d\u044c\u043a\u043e \u00ab\u0441\u0432\u0430\u043b\u0438\u0442\u044c\u0441\u044f\u00bb.<\/p>\n<p><a class=\"anchor\" name=\"buf\" id=\"buf\"><\/a><\/p>\n<h3>\u0411\u0443\u0444\u0435\u0440 \u043e\u0431\u043c\u0435\u043d\u0430<\/h3>\n<p>\u0421 \u0431\u0443\u0444\u0435\u0440\u043e\u043c \u043e\u0431\u043c\u0435\u043d\u0430 \u043c\u044b \u0443\u043c\u0435\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0434\u0430\u0432\u043d\u043e, \u043d\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0433\u043e \u0431\u0443\u0444\u0435\u0440\u0430 \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u0432\u043d\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e. \u0415\u0433\u043e \u0437\u0430\u0432\u0435\u0437\u043b\u0438 \u043d\u0435\u0434\u0430\u0432\u043d\u043e. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043a\u0443 \u0444\u0430\u0439\u043b\u0430 \u0447\u0435\u0440\u0435\u0437 Command-V.<\/p>\n<pre><code class=\"javascript\">document.addEventListener('paste', async (e) => {    e.preventDefault();    const clipboardItems = typeof navigator?.clipboard?.read === 'function'     ? await navigator.clipboard.read()      : e.clipboardData.files;    for (const clipboardItem of clipboardItems) {      let blob;      if (clipboardItem.type?.startsWith('image\/')) {        blob = clipboardItem;        \/\/ do something with blob      } else {        const imageTypes = clipboardItem.types?.filter((type) =>        type.startsWith('image\/')        );        for (const imageType of imageTypes) {          blob = await clipboardItem.getType(imageType);          \/\/ do something with blob        }      }    }  });<\/code><\/pre>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b <code>navigator.clipboard.read<\/code>\u2014 \u044d\u0442\u043e\u0442 \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0437\u0430\u0432\u0435\u0437\u043b\u0438. \u0420\u0430\u043d\u044c\u0448\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u0432 \u0431\u0443\u0444\u0435\u0440\u0435 \u043e\u0431\u043c\u0435\u043d\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 Flash, \u043d\u043e \u043e\u0442 \u043d\u0435\u0433\u043e \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c. \u0421 \u043a\u043e\u0434\u043e\u043c \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e: \u0447\u0438\u0442\u0430\u0435\u0442\u0435 <code>item<\/code>, \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0443 \u043d\u0435\u0433\u043e <code>imageType<\/code> \u0438 \u043e\u043f\u044f\u0442\u044c \u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 <code>blob<\/code>.\u00a0<\/p>\n<p><a class=\"anchor\" name=\"native\" id=\"native\"><\/a><\/p>\n<h3>\u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 UI<\/h3>\n<p>PWA \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u043e \u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0435\u0433\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439. \u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u0412 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c <code>display<\/code>\u0434\u043b\u044f PWA \u0438 <code>display_override<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u043c\u0435\u0435\u0442, \u0442\u043e \u043e\u043d \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442 \u0432\u0430\u043c \u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u00ab\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c\u0438\u00bb \u043f\u043e\u0432\u0435\u0440\u0445 \u043e\u043a\u043d\u0430.<\/p>\n<pre><code class=\"javascript\">\/\/ app.manifest  \"display\": \"standalone\",  \"display_override\": [\"window-controls-overlay\"],<\/code><\/pre>\n<p>\u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0439 \u0432 CSS: \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f (env) <code>titlebar-area-x<\/code>, <code>titlebar-area-y<\/code>, <code>titlebar-area-height<\/code>, <code>titlebar-area-width<\/code>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441 \u043d\u0438\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0432 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0417\u0434\u0435\u0441\u044c \u044f \u0437\u0430\u0434\u0430\u044e <code>padding-right<\/code> \u0438 <code>padding-left<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u0435\u0437 \u043d\u0438\u0445 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u043f\u0430\u043b\u0438 \u0431\u044b \u043f\u043e\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"css\">\/* style.css *\/  @media (display-mode: window-controls-overlay) {    .header {      padding-right: calc(2 * env(titlebar-area-x));      padding-left: env(titlebar-area-x);      height: calc(env(titlebar-area-height) + 10px);    }  }   .header__title {    -webkit-app-region: drag;  }<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>webkit-app-region<\/code>. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u043c\u043e\u0433\u0443 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043e\u043a\u043d\u043e \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 <code>window-controls-overlay<\/code>.<\/p>\n<p><a class=\"anchor\" name=\"filesys\" id=\"filesys\"><\/a><\/p>\n<h3>\u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/h3>\n<p>\u0412\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0434\u0443\u043c\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u00abLoad image\u00bb \u2014 <code>input type=\"file\"<\/code>. \u041d\u043e \u043d\u0435\u0442. \u0415\u0441\u0442\u044c API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 <code>showOpenFilePicker<\/code> \u0438 \u0432\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0435\u0441\u044c \u043d\u0435 \u0432 <code>iframe<\/code>, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0435\u0433\u043e, \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u2014 \u044d\u0442\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434. \u0412\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u0444\u0430\u0439\u043b, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 <code>fileHandle<\/code> \u2014 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0441 <code>input type=\"file\"<\/code>, \u043d\u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0432\u0435\u0448\u0438\u0432\u0430\u0442\u044c\u0441\u044f <code>EventListener<\/code>. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u043c\u0435\u0442 Esc, \u0432\u0430\u043c \u043d\u0430\u0434\u043e \u044d\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u00ab\u0442\u0438\u0445\u043e \u0443\u043f\u0430\u0432\u00bb.\u00a0<\/p>\n<pre><code class=\"javascript\">const supportsFileSystemAccess =    'showOpenFilePicker' in window &amp;&amp;    (() => {      try {        return window.self === window.top;      } catch {        return false;      }    })();   if (supportsFileSystemAccess) {    let fileHandle = undefined;    try {      [fileHandle] = await showOpenFilePicker();     return await fileHandle.getFile();    } catch (err) {      if (err.name !== 'AbortError') {        console.error(err.name, err.message);      }    }  }<\/code><\/pre>\n<p><a class=\"anchor\" name=\"launch\" id=\"launch\"><\/a><\/p>\n<h3>\u0417\u0430\u043f\u0443\u0441\u043a \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u041e\u0421<\/h3>\n<p>\u042d\u0442\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442 Microsoft \u0434\u043b\u044f Windows. \u042f \u043d\u0435 \u0441\u0442\u0430\u0432\u0438\u043b \u044d\u0442\u0443 \u0444\u0438\u0447\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u0442\u0440\u0430\u043d\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043c\u043e\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 \u2014 \u044f \u043d\u0435 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043b\u044e\u0431\u043b\u044e D&amp;D. \u041d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/p>\n<pre><code class=\"javascript\">let promise = navigator.runOnOsLogin.set({  mode: \"windowed\",  });   promise.then(function() {    \/\/ \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u0430\u043b \u0434\u043e\u0431\u0440\u043e  },  function(reason) {    \/\/ \u0427\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a  }); <\/code><\/pre>\n<p>\u0412\u044b \u043f\u0440\u043e\u0441\u0438\u0442\u0435 <code>navigator<\/code> \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u043b\u044f <code>runOnOsLogin<\/code>\u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0440\u0435\u0436\u0438\u043c. \u0418 \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u0430\u043b \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442, \u0442\u043e \u043c\u0435\u0442\u043e\u0434 \u043e\u0442\u0434\u0430\u0441\u0442 \u044d\u0442\u043e \u0432 \u041e\u0421 \u2014 \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043e\u043d\u0430 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0441\u0451 \u0441\u0430\u043c\u0430. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u2014 \u043a\u0430\u043a \u043f\u0440\u043e\u043a\u0441\u0438 \u0438\u043b\u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 API.\u00a0<\/p>\n<p><a class=\"anchor\" name=\"eye\" id=\"eye\"><\/a><\/p>\n<h3>EyeDropper API\u00a0<\/h3>\n<p>\u042d\u0442\u0443 \u0444\u0438\u0447\u0443 \u044f \u0445\u043e\u0442\u0435\u043b \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u043e \u043f\u043e\u0442\u043e\u043c \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0439 \u0438\u0434\u0435\u0438 \u2014 <code>input type=\"color\"<\/code> \u0432\u0441\u0451 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 \u043c\u0435\u043d\u044f. \u041d\u043e \u0432\u0430\u043c \u044f \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<pre><code class=\"javascript\">const eyeDropper = new EyeDropper();   try {    const result = await eyeDropper.open();    \/\/ \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0440\u0430\u043b \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0441 \u0446\u0432\u0435\u0442\u043e\u043c:    const colorHexValue = result.sRGBHex;   } catch (err) {    \/\/ \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u043a\u043b\u044e\u0447\u0438\u043b \u043f\u0438\u043f\u0435\u0442\u043a\u0443  } <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0435 EyeDropper, \u0442\u043e \u0443 \u0432\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043f\u0438\u043f\u0435\u0442\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0446\u0432\u0435\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u043a\u043b\u0438\u043a\u043d\u0435\u0442\u0435.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/215\/45d\/bf8\/21545dbf892611892af8a370f86cf2e2.png\" width=\"1073\" height=\"599\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/215\/45d\/bf8\/21545dbf892611892af8a370f86cf2e2.png\"\/><\/figure>\n<p>\u0414\u043b\u044f \u0447\u0435\u0433\u043e \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e? \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0446\u0432\u0435\u0442\u0430\u043c\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0438\u043f\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438. \u0418 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435: \u043d\u0430 \u0432\u0441\u0451 \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c<code>try\/catch<\/code>.<\/p>\n<p><a class=\"anchor\" name=\"own\" id=\"own\"><\/a><\/p>\n<h3>\u0421\u0432\u043e\u0439 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u00a0<\/h3>\n<p>\u042f \u0445\u043e\u0447\u0443 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0441\u0441\u044b\u043b\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e web+tokenizer:\/\/someURL, \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u043a\u043e \u043c\u043d\u0435 \u0432 PWA. \u042d\u0442\u043e \u0442\u043e\u0436\u0435 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442:<\/p>\n<pre><code class=\"javascript\">\/\/ app.manifest  \"protocol_handlers\": [    {      \"protocol\": \"web+tokenizer\",      \"url\": \"\/?from=%s\"    }  ], <\/code><\/pre>\n<p><a class=\"anchor\" name=\"instead\" id=\"instead\"><\/a><\/p>\n<h3>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0438<\/h3>\n<p>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u043d\u0435 \u0441\u0430\u0439\u0442? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Twitter \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u044f\u0442\u044c \u0436\u0435 \u0447\u0435\u0440\u0435\u0437 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442.\u00a0<\/p>\n<pre><code class=\"javascript\">\/\/ app.manifest  \"capture_links\": \"existing_client_event\", \"url_handlers\": [    {      \"origin\": \"https:\/\/dnd-tokenizer-41471e.netlify.app\"    }  ]<\/code><\/pre>\n<p>\u0412 <code>origin<\/code> \u0432\u0430\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0430\u0434\u0440\u0435\u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p><a class=\"anchor\" name=\"shortcut\" id=\"shortcut\"><\/a><\/p>\n<h3>\u0428\u043e\u0440\u0442\u043a\u0430\u0442\u044b  <\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0437\u0430\u0436\u0438\u043c\u0430\u0435\u0442\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u041e\u0421, \u0443 \u0432\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u0418 \u0443 \u043d\u0430\u0441 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c! \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430\u0445:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/145\/b5d\/c7e\/145b5dc7e8c8fa83a55923d187ec97c9.png\" width=\"1600\" height=\"938\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/145\/b5d\/c7e\/145b5dc7e8c8fa83a55923d187ec97c9.png\"\/><\/figure>\n<p>\u0428\u043e\u0440\u0442\u043a\u0430\u0442\u044b \u0442\u043e\u0436\u0435 \u0434\u0435\u043b\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442:<\/p>\n<pre><code class=\"javascript\">\/\/ app.manifest  \"shortcuts\": [    {      \"name\": \"Create new token\",      \"url\": \"\/\"    }  ],  \"launch_handler\": {    \"client_mode\": \"focus-existing\"  },<\/code><\/pre>\n<p>\u041c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0448\u043e\u0440\u0442\u043a\u0430\u0442\u043e\u0432 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c \u0438\u043a\u043e\u043d\u043a\u0438.<\/p>\n<p><a class=\"anchor\" name=\"open\" id=\"open\"><\/a><\/p>\n<h3>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b<\/h3>\n<p>\u0427\u0435\u0440\u0435\u0437 \u043d\u0430\u0448\u0435 PWA \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0430\u0439\u043b\u044b. \u0418 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u0430\u0436\u0435 \u043d\u0430 macOS, \u0445\u043e\u0442\u044f \u043e\u043d\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0434\u043e\u043a\u0430\u0442\u044b\u0432\u0430\u044e\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8d5\/4d6\/af1\/8d54d6af1f80a149258354e38bd0e74c.png\" width=\"1600\" height=\"939\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8d5\/4d6\/af1\/8d54d6af1f80a149258354e38bd0e74c.png\"\/><\/figure>\n<p>\u0418 (\u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e) \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442:<\/p>\n<pre><code class=\"javascript\">\/\/ app.manifest  \"file_handlers\": [    {      \"action\": \"\/\",      \"accept\": {        \"image\/*\": [          \".jpg\", \".jpeg\", \".webp\",          \".png\", \".avif\", \".gif\"        ]      }    }  ],<\/code><\/pre>\n<p>\u041d\u043e \u0435\u0449\u0451 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 JavaScript.<\/p>\n<pre><code class=\"javascript\">\/\/ main.js  if ('launchQueue' in window) {   launchQueue.setConsumer((launchParams) => {     const files = launchParams.files;      for (const file of files) {        const blob = await file.getFile();        blob.handle = file;        \/\/ \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441 \u0444\u0430\u0439\u043b\u043e\u043c      }    });  } else {    console.error('File Handling API is not supported!');  }<\/code><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c <code>launchQueue<\/code> \u2014 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435, \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0417\u0434\u0435\u0441\u044c \u044f \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u0447\u0435\u0440\u0435\u0437 <code>blob<\/code>.<\/p>\n<p><a class=\"anchor\" name=\"ownfilesys\" id=\"ownfilesys\"><\/a><\/p>\n<h3>\u0421\u0432\u043e\u044f \u0444\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430  <\/h3>\n<p>\u042f \u043d\u0435 \u0443\u0441\u043f\u0435\u043b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0432 \u0441\u0432\u043e\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430 \u0434\u0435\u043c\u043a\u0443 \u0431\u044b\u043b\u043e \u043c\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043d\u043e \u0432 PWA \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0441\u0432\u043e\u0435\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0435\u0442 <a href=\"https:\/\/www.photopea.com\/\"><u>Photopea<\/u><\/a>. \u0412 \u0447\u0435\u043c \u0441\u0443\u0442\u044c? \u0412 JavaScript \u043f\u0440\u043e\u043d\u0438\u043a\u0430\u044e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u0438\u0437 C++ \u043a\u043e\u0434\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u044b\u043a\u043d\u0443\u0442\u044c \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438.<\/p>\n<pre><code class=\"javascript\">const opfsRoot = await navigator.storage.getDirectory();   const fileHandle = await opfsRoot    .getFileHandle('file', { create: true });  const directoryHandle = await opfsRoot    .getDirectoryHandle('folder', { create: true });   const nestedFileHandle = await directoryHandle    .getFileHandle('nested file', { create: true });  const nestedDirectoryHandle = await directoryHandle    .getDirectoryHandle('nested folder', { create: true }); <\/code><\/pre>\n<p>\u0422\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u0444\u0430\u0439\u043b\u043e\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u042d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.\u00a0<\/p>\n<p><a class=\"anchor\" name=\"local\" id=\"local\"><\/a><\/p>\n<h3>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b<\/h3>\n<p>\u0412\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 \u043c\u043e\u0435\u043c <a href=\"https:\/\/github.com\/MeFoDy\/dnd-tokenizer\"><u>\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/u><\/a> \u043c\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u0418 \u0432\u0440\u044f\u0434 \u043b\u0438 \u044f \u0438\u0445 \u0432\u0441\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b \u2014 \u0438\u043d\u0430\u0447\u0435 \u0431\u044b \u043c\u044b \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u043e \u0436\u0434\u0430\u043b\u0438. \u042d\u0442\u043e \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c PWA \u2014 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/70e\/3af\/02b\/70e3af02b28ebdc613a148ddea2e30a2.png\" width=\"1600\" height=\"954\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/70e\/3af\/02b\/70e3af02b28ebdc613a148ddea2e30a2.png\"\/><\/figure>\n<p>\u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n<pre><code class=\"javascript\">try {    const availableFonts = await window.queryLocalFonts();    const list = document.querySelector('select.fonts');     for (const fontData of availableFonts) {      const option = document.createElement('option');      option.text = fontData.fullName;      option.value = fontData.postscriptName;      if (fontData.fullName === 'Times New Roman') {        option.selected = true;      }      list?.appendChild(option);    }  } catch (err) {      console.error(err.name, err.message);  }<\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f0a\/f23\/1f7\/f0af231f7cba6073927df32be6c0f295.png\" width=\"246\" height=\"522\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f0a\/f23\/1f7\/f0af231f7cba6073927df32be6c0f295.png\"\/><\/figure>\n<p>\u0412\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0435 <code>queryLocalFonts<\/code>, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u043a\u043d\u043e \u0441 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438. \u0410 \u0437\u0430\u0442\u0435\u043c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>availableFonts<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u0430\u043b \u0434\u043e\u0441\u0442\u0443\u043f. \u0423 \u043d\u0438\u0445 \u0435\u0441\u0442\u044c <code>fullName<\/code> \u0438 <code>postscriptName<\/code>. \u0414\u0430\u043b\u0435\u0435 \u0447\u0435\u0440\u0435\u0437 JavaScript \u044f \u0441\u043e\u0437\u0434\u0430\u044e CSS-\u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e <code>font-face<\/code> \u0441 \u0438\u043c\u0435\u043d\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f \u0431\u0435\u0440\u0443 \u0438\u0437 <code>fullName<\/code> \u0438 <code>postscriptName<\/code>. \u0418 \u043c\u043d\u0435 \u0434\u0430\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0441\u0435\u0442\u044c, \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e.\u00a0<\/p>\n<p>\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043d\u0430 <a href=\"https:\/\/github.com\/MeFoDy\/dnd-tokenizer\"><u>Github<\/u><\/a>. \u041c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u0431\u0430\u0433\u0438 \u0438 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0442\u044c \u0438\u0445 \u043c\u043d\u0435 \u2014 \u0432\u043c\u0435\u0441\u0442\u0435 \u0434\u043e\u043a\u0440\u0443\u0442\u0438\u043c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043a\u0440\u0443\u0442\u043e\u0435.\u00a0<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u044f \u043f\u0438\u0441\u0430\u043b \u044d\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u044f \u0434\u0430\u0436\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0442\u0435\u043b \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 Flutter. \u041c\u0438\u0444 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0440\u0443\u0447\u0435 PWA, \u0438\u0434\u0435\u0442 \u043e\u0442\u043a\u0443\u0434\u0430-\u0442\u043e \u0438\u0437 2015-\u0433\u043e \u0433\u043e\u0434\u0430. \u041d\u043e \u0441 \u0442\u0435\u0445 \u043f\u043e\u0440 \u043c\u043d\u043e\u0433\u043e\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c, \u0438 \u0432\u044b \u0441\u0430\u043c\u0438 \u0443\u0432\u0438\u0434\u0435\u043b\u0438, \u043a\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0432\u0435\u0449\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 PWA, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043c\u0435\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/p>\n<hr\/>\n<p><em>\u041d\u0438\u043a\u0438\u0442\u0430 \u0443\u0436\u0435 \u043d\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u0433\u043e\u0434 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043d\u0430 <\/em><a href=\"https:\/\/holyjs.ru\/?utm_source=habr&amp;utm_medium=755844\"><strong><em><u>HolyJS<\/u><\/em><\/strong><\/a><em>. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u0438\u043c \u043e\u0441\u0435\u043d\u043d\u044e\u044e \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u043e\u043d\u043b\u0430\u0439\u043d 2 \u0438 3 \u043d\u043e\u044f\u0431\u0440\u044f, \u0430 12 \u0438 13 \u043d\u043e\u044f\u0431\u0440\u044f \u2014 \u043e\u0444\u043b\u0430\u0439\u043d \u0432 \u0421\u0430\u043d\u043a\u0442-\u041f\u0435\u0442\u0435\u0440\u0431\u0443\u0440\u0433\u0435. \u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u043d\u043e \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 <\/em><a href=\"https:\/\/holyjs.ru\/?utm_source=habr&amp;utm_medium=755844\"><em>\u043d\u0430 \u0441\u0430\u0439\u0442\u0435<\/em><\/a><em> \u043c\u043e\u0436\u043d\u043e \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u043e\u043a\u043b\u0430\u0434\u043e\u0432, \u0438 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0441\u0442\u0438 \u0431\u0438\u043b\u0435\u0442\u044b.<\/em><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/755844\/\"> https:\/\/habr.com\/ru\/articles\/755844\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u0422\u0435\u0440\u043c\u0438\u043d PWA \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0435\u0449\u0435 \u0432 2015 \u0433\u043e\u0434\u0443, \u043d\u043e \u0438\u0437-\u0437\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u0440\u0430\u0437\u043d\u043e\u0433\u043b\u0430\u0441\u0438\u0439 \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u044b\u043b \u043b\u0438\u0448\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0439 \u0438\u0434\u0435\u0435\u0439. \u0412 2023 \u0433\u043e\u0434\u0443 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043d\u0430\u0434\u0435\u0436\u0434\u0430, \u0447\u0442\u043e \u043d\u0430 iOS \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u0434\u0432\u0438\u0436\u043a\u0438, \u0430 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u043d\u0438\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430.<\/p>\n<p>\u0412\u0435\u0441\u043d\u043e\u0439 \u043d\u0430 <a href=\"https:\/\/holyjs.ru\/?utm_source=habr&amp;utm_medium=755844\"><u>HolyJS<\/u><\/a> \u041d\u0438\u043a\u0438\u0442\u0430 \u0414\u0443\u0431\u043a\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u0443\u043c\u0435\u044e\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 PWA: \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0438\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438 \u0432 \u043a\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043e\u043d\u0438 \u0440\u0435\u0448\u0430\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0435 \u0445\u0443\u0436\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0414\u0435\u043b\u0438\u043c\u0441\u044f \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u043a\u043e\u0439 \u0434\u043e\u043a\u043b\u0430\u0434\u0430 \u0438 \u0432\u0438\u0434\u0435\u043e\u0437\u0430\u043f\u0438\u0441\u044c\u044e. \u041f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442 \u043b\u0438\u0446\u0430 \u041d\u0438\u043a\u0438\u0442\u044b.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/64e322ff7f26cf30b3d4a5ec\" data-style=\"\" id=\"64e322ff7f26cf30b3d4a5ec\" width=\"\"><\/div>\n<h3>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h3>\n<p><a href=\"#whatis\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 PWA<\/a><br \/><a href=\"#pros\">\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 PWA<\/a><br \/><a href=\"#forwho\">\u041a\u043e\u043c\u0443 \u043e\u043d\u043e \u043d\u0430\u0434\u043e<\/a><br \/><a href=\"#hide\">\u041f\u0440\u044f\u0447\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438<\/a><br \/><a href=\"#nice\">\u041a\u0440\u0430\u0441\u0438\u0432\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430\u043c\u0438<\/a><br \/><a href=\"#get\">\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b<\/a><br \/><a href=\"#share\">\u0414\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0444\u0430\u0439\u043b\u0430\u043c\u0438<\/a><br \/><a href=\"#buf\">\u0411\u0443\u0444\u0435\u0440 \u043e\u0431\u043c\u0435\u043d\u0430<\/a><br \/><a href=\"#native\">\u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 UI<\/a><br \/><a href=\"#filesys\">\u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/a><br \/><a href=\"#launch\">\u0417\u0430\u043f\u0443\u0441\u043a \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u041e\u0421<\/a><br \/><a href=\"#eye\">EyeDropper API<\/a><br \/><a href=\"#own\">\u0421\u0432\u043e\u0439 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b<\/a><br \/><a href=\"#instead\">\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0438<\/a><br \/><a href=\"#shortcut\">\u0428\u043e\u0440\u0442\u043a\u0430\u0442\u044b<\/a><br \/><a href=\"#open\">\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b<\/a><br \/><a href=\"#ownfilesys\">\u0421\u0432\u043e\u044f \u0444\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/a><br \/><a href=\"#local\">\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b<\/a><\/p>\n<p><a class=\"anchor\" name=\"whatis\" id=\"whatis\"><\/a><\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 PWA<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u0442\u0435\u0440\u043c\u0438\u043d \u043d\u0435\u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u0435\u043d \u2014 \u043e \u043d\u0451\u043c \u0432\u0435\u0434\u0443\u0442\u0441\u044f \u0446\u0435\u043b\u044b\u0435 \u0434\u0438\u0441\u043a\u0443\u0441\u0441\u0438\u0438. \u0412 \u0434\u043e\u043a\u043b\u0430\u0434\u0435 \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435:<\/p>\n<p><em>PWA \u2014 \u0442\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\u00a0<\/em><\/p>\n<p>\u041e\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043d\u043e \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u042f \u043e\u0442\u043a\u0440\u044b\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f PWA \u0432 2016 \u0433\u043e\u0434\u0443: \u041c\u0430\u043a\u0441\u0438\u043c \u042e\u0437\u0432\u0430 <a href=\"https:\/\/www.youtube.com\/live\/cOTOSbjet_8?feature=share&amp;t=17481\"><u>\u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b<\/u><\/a> \u043f\u0440\u043e \u043d\u0435\u0433\u043e \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 Web Standards Days \u0432 \u041c\u0438\u043d\u0441\u043a\u0435. \u042d\u0442\u043e \u0431\u044b\u043b\u0430 \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043d\u043e \u0441\u044b\u0440\u0430\u044f \u2014 \u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0442 \u0431\u044b\u043b\u043e \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0441 \u043d\u0435\u0439 \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0442\u0435\u0440\u043c\u0438\u043d \u00ab\u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u00bb \u0435\u0449\u0451 \u0432 2007 \u0433\u043e\u0434\u0443 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b\u0438 \u0432 Apple. \u041d\u043e, \u0432\u0438\u0434\u0438\u043c\u043e, \u0421\u0442\u0438\u0432 \u0414\u0436\u043e\u0431\u0441 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0435\u0440\u0435\u0434\u0443\u043c\u0430\u043b, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 2015 \u0433\u043e\u0434\u0443 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0442\u0435\u0440\u043c\u0438\u043d \u00abPWA\u00bb. \u0412 Google <a href=\"https:\/\/infrequently.org\/2015\/06\/progressive-apps-escaping-tabs-without-losing-our-soul\/\"><u>\u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b\u0438<\/u><\/a>, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u0412\u043e\u0442 \u0435\u0433\u043e \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438:<\/p>\n<ul>\n<li>\n<p><strong>\u041e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0435<\/strong>: \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u0440\u0438 \u043b\u044e\u0431\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0435\u0442\u0438<\/strong>: \u0443 \u043d\u0435\u0433\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043e\u0444\u043b\u0430\u0439\u043d-\u0440\u0435\u0436\u0438\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/strong> \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0441\u00a0 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c\u043e\u0435<\/strong>: \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0435<\/strong>: \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0441 \u044d\u0442\u0438\u043c \u0432\u0441\u0451 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0445\u043e\u0440\u043e\u0448\u043e, \u0430 \u0441 \u0432\u0435\u0431\u043e\u043c \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p><strong>\u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0438<\/strong>.\u00a0<\/p>\n<\/li>\n<li>\n<p><strong>\u0415\u0441\u0442\u044c \u0432\u043e\u0432\u043b\u0435\u043a\u0430\u044e\u0449\u0430\u044f \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430<\/strong>: \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043b\u043e\u0436\u0438\u043b\u0438, \u0447\u0442\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0443\u0442 \u043f\u0443\u0448\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u043e\u0435<\/strong>: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u0441\u0442\u043e\u043b\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0430 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<p>Apple \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0442\u0435\u0440\u043c\u0438\u043d\u0430 PWA, \u043d\u0430\u0437\u044b\u0432\u0430\u044f \u0438\u0445 Home Screen Web Apps \u2014 \u044d\u0434\u0430\u043a\u043e\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. <\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 PWA \u043d\u0430 iOS \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0434\u0430\u0451\u0442 PWA \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c\u0441\u044f.\u00a0<\/p>\n<p>\u041d\u0430 Android \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u041d\u0430 iOS (\u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e) \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u041d\u0430 \u044d\u043a\u0440\u0430\u043d \u201e\u0414\u043e\u043c\u043e\u0439\u201c\u00bb, \u043d\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u0441\u0442\u043e\u043b\u0435.\u00a0<\/p>\n<figure class=\"\"><\/figure>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043e\u0432 \u0432 Chrome \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443 \u0440\u044f\u0434\u043e\u043c \u0441 URL \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438, \u0447\u0442\u043e PWA-\u0440\u0435\u0436\u0438\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p> \u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0440\u0430\u043d\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 30 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0433\u0434\u0435-\u0442\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0430\u043d\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d \u043e\u0442\u043a\u0440\u044b\u043b \u0432 \u0444\u043e\u043d\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c HTTPS.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0443\u0436\u0435\u043d web app manifest \u2014 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438 \u0432 \u043d\u0451\u043c \u043e\u043f\u0438\u0441\u0430\u043d URL, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u0438\u043a\u043e\u043d\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c service worker, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u00ab\u0444\u0435\u0442\u0447\u0438\u0442\u00bb \u0437\u0430\u043f\u0440\u043e\u0441 \u2014 \u043f\u0443\u0441\u0442\u043e\u0439 service worker \u043d\u0435 \u043f\u0440\u043e\u043a\u0430\u0442\u0438\u0442.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u043e \u0432\u0441\u0451 \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435: \u0437\u0430\u0447\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c PWA, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f? \u042f \u0445\u043e\u0447\u0443 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043f\u043e\u0447\u0435\u043c\u0443 PWA \u2014 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0437\u0434\u043e\u0440\u043e\u0432\u043e.\u00a0<\/p>\n<p><a class=\"anchor\" name=\"pros\" id=\"pros\"><\/a><\/p>\n<h3>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 PWA<\/h3>\n<h4>\u0413\u0438\u0431\u043a\u043e\u0441\u0442\u044c<\/h4>\n<p>\u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e PWA, \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u0442\u0430\u043c \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0451, \u0447\u0442\u043e \u0432\u044b \u0443\u043c\u0435\u0435\u0442\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u0432 PWA \u0438 \u0434\u0430\u0436\u0435 \u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h4>\u0414\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0446\u0438\u044f<\/h4>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0451 \u0438 \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0435\u043a\u043b\u0430\u043c\u0443. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0434\u043e\u0432\u0435\u0441\u0442\u0438 \u0435\u0433\u043e \u0434\u043e App Store \u2014 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430: \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0439\u0442\u0438 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0440\u0435\u0432\u044c\u044e, \u043a\u043b\u044e\u0447\u0430\u043c\u0438 \u0438 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u044f\u043c\u0438. \u0410 \u0441 PWA \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0418 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0451 \u043a\u0430\u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0448\u0442\u0443\u043a\u0438, \u043a\u0430\u043a PWA Builder \u2014 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442 \u0432\u0430\u0448\u0438 PWA \u0432 \u043d\u0435\u0447\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u043e\u0435, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432 App Store. \u0417\u043d\u0430\u0447\u0438\u0442, PWA \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0446\u0438\u0438 \u043b\u0443\u0447\u0448\u0435.<\/p>\n<h4>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435: F5<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u0439\u0442\u0438 \u0432 App Store \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\u00bb \u044f\u0432\u043d\u043e. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0451 \u0435\u0449\u0451 \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 \u0440\u0435\u0432\u044c\u044e. \u0410 \u0434\u043b\u044f PWA \u0432\u0441\u0451 \u043f\u0440\u043e\u0449\u0435 \u2014 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 F5 \u0438\u043b\u0438 Command-R \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u041e\u0421.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u044f \u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0441\u044f \u043a \u0434\u043e\u043a\u043b\u0430\u0434\u0443, \u0442\u043e \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b \u0443 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0445, \u043a\u0430\u043a \u043e\u043d\u0438 \u043f\u0438\u0448\u0443\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0442\u0430\u043c \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u0414\u0430, \u0442\u0430\u043c \u0435\u0441\u0442\u044c API, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u0432\u0435\u0431\u0435. \u041d\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u044d\u0442\u043e WebView, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u0435\u0435.<\/p>\n<h4>API<\/h4>\n<p>\u0415\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Project Fugu. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0442\u043e\u0440\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u044d\u0442\u043e Google \u0438 Microsoft. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f API, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0421\u0430\u043c\u043e\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u0437\u0434\u0435\u0441\u044c \u2014 \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u041e\u0421 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u0432\u0430\u043c \u0447\u0442\u043e-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 iOS, \u0435\u0441\u043b\u0438 \u0432\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0435 Chrome, \u0442\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 WebKit. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043d\u0435 \u0434\u0430\u0451\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a\u0438\u043c-\u0442\u043e API, \u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u0423 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c <a href=\"https:\/\/www.youtube.com\/watch?v=iC3fspqn3vA&amp;ab_channel=SytacDevJam\"><u>\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u043a\u043b\u0430\u0434<\/u><\/a> \u043f\u0440\u043e \u044d\u0442\u043e.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0423 \u041e\u0421 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0436\u0435\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438: \u043f\u0440\u044f\u043c\u043e \u0431\u0430\u0439\u0442\u0438\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u0430\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c HID-\u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u044b. \u041d\u043e \u043d\u0435\u043a\u0438\u0439 \u0432\u0435\u043d\u0434\u043e\u0440 \u043f\u043e \u0438\u043c\u0435\u043d\u0438 Apple \u0433\u043e\u0432\u043e\u0440\u0438\u0442: \u00ab\u0414\u0430, \u0432\u044b \u0442\u0430\u043c \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0435\u0441\u044c, \u0432\u0441\u0451 \u0437\u0434\u043e\u0440\u043e\u0432\u043e. \u041d\u043e \u044f \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u044e \u0432\u0430\u043c \u043f\u043e\u043c\u0435\u0448\u0430\u0442\u044c\u00bb.<\/p>\n<p>\u041d\u043e \u0438 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0434\u043e \u043f\u043e\u0440\u044b \u0434\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0412 \u0444\u0435\u0432\u0440\u0430\u043b\u0435 2023 \u0433\u043e\u0434\u0430 \u0415\u0421 \u0441\u043a\u0430\u0437\u0430\u043b Apple, \u0447\u0442\u043e \u0438\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e WebKit \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u0440\u0440\u0435\u043b\u0438\u0440\u0443\u0435\u0442 \u0441 \u0435\u0432\u0440\u043e\u043f\u0435\u0439\u0441\u043a\u0438\u043c\u0438 \u0437\u0430\u043a\u043e\u043d\u0430\u043c\u0438, \u0438 \u043e\u0431\u044f\u0437\u0430\u043b \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0434\u0432\u0438\u0436\u043a\u0438. <\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u042f \u043e\u0447\u0435\u043d\u044c \u0436\u0434\u0443, \u043a\u043e\u0433\u0434\u0430 Apple \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u0435\u0442 \u0432 \u044d\u0442\u043e\u043c \u0441\u0443\u0434\u0435, \u0434\u0430 \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0435\u0449\u0451 \u0438 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e Google \u0442\u043e\u0436\u0435 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c. \u042f \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438 \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0434\u043e\u043a\u043b\u0430\u0434: \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c, \u0433\u043e\u0434\u0430 \u0447\u0435\u0440\u0435\u0437 \u0434\u0432\u0430-\u0442\u0440\u0438 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f Chromium \u0434\u043b\u044f iOS. \u0412\u044b \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0435\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u044d\u0442\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u044c \u043f\u0440\u043e \u0441\u0443\u0434, \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0434\u0435\u043b\u044e \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c <a href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/main\/docs\/ios\/build_instructions.md\"><u>\u044d\u0442\u0430 \u0441\u0441\u044b\u043b\u043a\u0430<\/u><\/a>.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u00a0<\/p>\n<p>\u0423 Firefox \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0430 \u0434\u043b\u044f iOS. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e \u043d\u0435\u0439 \u043f\u0440\u043e\u0439\u0442\u0438 \u0438 \u0441\u0430\u043c\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c Xcode.<\/p>\n<p><a class=\"anchor\" name=\"forwho\" id=\"forwho\"><\/a><\/p>\n<h3>\u041a\u043e\u043c\u0443 \u043e\u043d\u043e \u043d\u0430\u0434\u043e<\/h3>\n<p>\u041d\u043e \u0432\u0441\u0435 \u0436\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441: \u043a\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u044b PWA? \u041d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0443\u0447\u0448\u0435. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, PWA \u0435\u0441\u0442\u044c \u0443 Spotify, TikTok, Twitter, Pinterest. \u041f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u0431\u0440\u0435\u043d\u0434\u044b \u0432\u043b\u043e\u0436\u0438\u043b\u0438\u0441\u044c \u0432 PWA. \u041a\u0441\u0442\u0430\u0442\u0438, \u044f \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043e\u0444\u043e\u0440\u043c\u0438\u043b \u043a\u0430\u0440\u0442\u0443 \u043e\u0434\u043d\u043e\u0433\u043e \u0436\u0435\u043b\u0442\u043e\u0433\u043e \u0431\u0430\u043d\u043a\u0430, \u0438 \u0438\u043c, \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0442\u043e\u0436\u0435 \u043d\u0430\u0434\u043e PWA.<\/p>\n<p>\u0415\u0441\u0442\u044c Project Fugu API Showcase, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Fugu API \u0434\u043b\u044f PWA. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0445 \u043f\u043e\u043b\u0438\u0441\u0442\u0430\u0439\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0438 \u0443\u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0443\u043c\u0435\u0435\u0442 \u0432\u0435\u0431.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u00a0<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Squoosh. \u041e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043e\u0444\u043b\u0430\u0439\u043d\u0435 \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e WebAssembly.\u00a0<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0415\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Excalidraw, \u043e\u043d\u043e \u0442\u043e\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b. \u041e\u043d\u043e \u0442\u043e\u0436\u0435 offline first \u0438 \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u00a0<\/p>\n<p>\u0415\u0441\u0442\u044c SVGcode \u2014 \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0430\u0441\u0442\u0440 \u0432 \u0432\u0435\u043a\u0442\u043e\u0440 \u2014 \u043c\u0435\u0447\u0442\u0430!<\/p>\n<p>\u00a0<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041d\u0443 \u0438 \u043f\u043e\u043a\u0430\u0436\u0443, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0441\u0432\u043e\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u042f \u043f\u0440\u043e\u0448\u0435\u043b \u0432\u0435\u0441\u044c \u043f\u0443\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e PWA \u0438 \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043c \u0441 \u0432\u0430\u043c\u0438. \u0423 \u043d\u0430\u0441 \u0441 \u0434\u0440\u0443\u0437\u044c\u044f\u043c\u0438 \u0435\u0441\u0442\u044c \u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0439 \u0432\u0435\u0447\u0435\u0440 \u0447\u0435\u0442\u0432\u0435\u0440\u0433\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0433\u0440\u0430\u0435\u043c \u0432 D&amp;D. \u041d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0432\u0441\u0435 \u0437\u043d\u0430\u044e\u0442, \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u0442 \u0432\u0435\u0447\u0435\u0440 \u043c\u0435\u043d\u044f \u043d\u0435\u0442 \ud83d\ude42<\/p>\n<p>\u0412 \u0438\u0433\u0440\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043a\u0435\u043d\u044b \u2014 \u044d\u0442\u043e \u043a\u0440\u0443\u0436\u043e\u0447\u043a\u0438 \u0441 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c\u0438 \u0440\u0430\u043c\u043e\u0447\u043a\u0430\u043c\u0438. \u041c\u044b \u0438\u0445 \u0440\u0438\u0441\u0443\u0435\u043c \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432 Photoshop. \u042f \u0440\u0435\u0448\u0438\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441 \u044d\u0442\u0438\u043c \u0432\u0441\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041a\u043e\u0433\u0434\u0430 \u044f \u0433\u043e\u0442\u043e\u0432\u0438\u043b \u0434\u043e\u043a\u043b\u0430\u0434 \u043f\u0440\u043e Fugu, \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 API \u0432 \u0432\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442.\u00a0<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u0442\u0430\u043c \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u043a\u0440\u0430\u0441\u043d\u044b\u0445 \u0440\u0430\u043c\u043e\u043a. \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u2014 \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0412 \u0441\u0438\u043d\u044e\u044e \u0440\u0430\u043c\u043a\u0443 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0430 \u0430\u043f\u0438\u0448\u043a\u0430, \u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u043d\u0430 \u0438\u043b\u0438 \u043d\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442. \u041e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438 JSON \u2014 \u043e\u043d \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f, \u043d\u043e \u043d\u0435 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.\u00a0<\/p>\n<p>\u042f \u043f\u043e\u043b\u0438\u0441\u0442\u0430\u043b \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u043f\u043e\u043d\u044f\u043b: \u043f\u043e\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u0438 API. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/dnd-tokenizer-41471e.netlify.app\"><u>\u043c\u043e\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/u><\/a>, \u0430 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0435\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043d\u043e \u0435\u0441\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430 \u00abInstall PWA\u00bb. \u041d\u043e \u0435\u0451 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0443\u0436\u0435 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 PWA. \u041a\u0430\u043a \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443? <\/p>\n<p><a class=\"anchor\" name=\"hide\" id=\"hide\"><\/a><\/p>\n<h3>\u041f\u0440\u044f\u0447\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438<\/h3>\n<p>\u041d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0435, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0435 \u0441 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439. \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0438 URL, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043b\u0435\u0436\u0438\u0442 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442.<\/p>\n<pre><code class=\"javascript\">\/\/ app.manifest  \"related_applications\": [    {      \"platform\": \"webapp\",          \"url\": \"https:\/\/my.app\/app.webmanifest\"    }  ],<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432 JavaScript \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 <code>getInstalledRelatedApps<\/code>.<\/p>\n<pre><code class=\"javascript\">if ('getInstalledRelatedApps' in navigator) {    const relatedApps =      await navigator.getInstalledRelatedApps();    const PWAisInstalled = relatedApps.length > 0;     if (PWAisInstalled) {      installButton.classList.add('hidden');    }  }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043e\u043d \u0447\u0442\u043e-\u0442\u043e \u0432\u0435\u0440\u043d\u0443\u043b, \u0437\u043d\u0430\u0447\u0438\u0442, PWA \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e, \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0435\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0430\u0434\u043e. \u0412 <code>getInstalledRelatedApps<\/code>\u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0445\u043d\u0443\u0442\u044c \u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u0430 \u0448\u0442\u0443\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 Android.<\/p>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c CSS-\u0440\u0435\u0448\u0435\u043d\u0438\u0435: \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u0441\u0442\u0438\u043b\u044f\u0445, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0443\u0436\u043d\u043e\u043c <code>display-mode<\/code> \u043a\u043d\u043e\u043f\u043a\u0430 \u043f\u0440\u044f\u0442\u0430\u043b\u0430\u0441\u044c.<\/p>\n<pre><code class=\"css\">@media (display-mode: standalone),         (display-mode: window-controls-overlay) {          .pwa-install-button {            display: none;          }  } <\/code><\/pre>\n<p><a class=\"anchor\" name=\"nice\" id=\"nice\"><\/a><\/p>\n<h3>\u041a\u0440\u0430\u0441\u0438\u0432\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430\u043c\u0438<\/h3>\n<p>\u0425\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0436\u0438\u043c\u0430\u044e \u00ab\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u00bb, \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c. <\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u043f\u043e\u043b\u0435 <code>description<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0436\u0438\u0442\u0435 <code>form_factor<\/code> (<code>wide<\/code> \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 \u0438 <code>narrow<\/code>\u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e) \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b. \u0415\u0441\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, Chrome \u043d\u0435 \u043f\u043e\u0439\u043c\u0435\u0442, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u0442\u0430 \u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0438 \u0441\u043f\u043b\u044e\u0449\u0438\u0442 \u0435\u0451.\u00a0<\/p>\n<pre><code class=\"javascript\">\/\/ app.manifest  \"short_name\": \"D&amp;D Tokenizer\",  \"description\": \"Some description.\",  \"screenshots\": [    {      \"src\": \".\/screens\/desktop.jpg\",      \"type\": \"image\/jpeg\",      \"sizes\": \"800x583\",      \"form_factor\": \"wide\"    },    {      \"src\": \".\/screens\/mobile.jpg\",<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/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-352700","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/352700","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=352700"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/352700\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=352700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=352700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=352700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}