{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":1,"style":"BOLD"}],"text":" Для тех, кто не понял с первого раза","type":"header-three","key":"15phq"},{"data":{"image":{"id":"5f22a34122373c0e2f1ed9bf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"c0sk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7bk99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Говорят, чтобы статья была максимально полезной, она должна быть понятна даже твоему деду, который до сих пор не понимает чем вы там занимаетесь в своих “интырнетах”. Исходя из этого, я решил довольно простым языком расписать “Что такое PWA и нахрен оно вообще нужно?”. Поэтому, если тебе не удалось с первого раза разобраться с этой неведомой штукой, в этой статье будет всё, чтобы решить это раз и навсегда.","type":"unstyled","key":"4it96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Цель статьи:","type":"unstyled","key":"136q8"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":6,"offset":82}],"inlineStyleRanges":[],"text":"Я не буду подробно разжевывать тебе о PWA, так как на эту тему написано уже много статей.","type":"unstyled","key":"7et2a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Моя цель — простым языком дать основную информацию, которой тебе хватит, чтобы понимать что такое PWA. Потом показать реальный пример, которым забетонируем всё, что ты усвоил.","type":"unstyled","key":"5ip3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"После прочтения ты будешь понимать следующее:","type":"unstyled","key":"7pa34"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможности и преимущества.","type":"unordered-list-item","key":"7q960"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные понятия.","type":"unordered-list-item","key":"5vh00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка PWA.","type":"unordered-list-item","key":"bdcd3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как обновлять кэш.","type":"unordered-list-item","key":"2qp9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А ну и еще, я настоятельно рекомендую взять сейчас ноутбук и повторять всё, что я буду делать. Иначе, информация вылетит из головы.","type":"unstyled","key":"33ott"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На этом вводная часть закончена, переходим к основной части.","type":"unstyled","key":"a3ach"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Возможности и преимущества","type":"header-two","key":"ac7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я подготовил несколько логически связанных пунктов, которыми попробую описать всю картину.","type":"unstyled","key":"8dt7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":182,"offset":0,"style":"BOLD"}],"text":"Технология PWA была анонсирована компанией Google в 2015 году. Она позиционирует себя как дополнительная надстройка, которая позволяет сделать из сайта подобие мобильного приложения.","type":"unstyled","key":"6ut3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При этом внутренности никакие не меняются, не трансформируются, сайт остаётся тем же, трансформируется только браузер.","type":"unstyled","key":"e6q42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Какие возможности предоставялет PWA?","type":"unstyled","key":"af0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отправка уведомлений, кэширование контента и установка ярлыка на рабочий стол;","type":"unordered-list-item","key":"6hrp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отправка уведомлений в виде всплывающего окна, в котором можно оповещать пользователя о чем-либо;","type":"unordered-list-item","key":"5te7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа в автономном режиме, то есть в отсутствие интернет-соединения, благодаря кэшированию контента.","type":"unordered-list-item","key":"9lodj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пару слов о преимуществах","type":"unstyled","key":"1ld0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простота в установке. Не нужно идти ни в какие магазины приложений, что-то скачивать и танцевать с бубном. Просто открываешь сайт по ссылке, выскакивает окошко “установить ярлык на рабочий стол”, устанавливаешь и готово.","type":"unordered-list-item","key":"jp2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конечно это будет работать на всех более-менее современных устройствах, нужен только браузер.","type":"unordered-list-item","key":"3bhio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сайт становится доступнее, из-за ярлыка на рабочем столе. Разблокировал телефон, тыкнул на ярлык и сайт открылся. Круто же.","type":"unordered-list-item","key":"1dp56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Занимает мало памяти, менее одного мегабайта.","type":"unordered-list-item","key":"2503q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Повышенная безопасность, все ресурсы передаются только по https протоколу.","type":"unordered-list-item","key":"6us3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стабильная работа. Если будут неполадки с интернетом, контент будет компенсирован из кэша, тем самым сайт будет всегда доступен.","type":"unordered-list-item","key":"5g9g4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка PWA менее трудоемкий процесс, нежели создание мобильного приложения. Не нужно писать две одинаковые прилы на Android и IOS. Поэтому, для бизнеса это будет намного дешевле.","type":"unordered-list-item","key":"a22uu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"2rl2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не приятные моменты","type":"unstyled","key":"cr7g4"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":3,"offset":147},{"key":2,"length":17,"offset":579},{"key":3,"length":17,"offset":693}],"inlineStyleRanges":[{"length":3,"offset":147,"style":"BOLD"},{"length":17,"offset":579,"style":"BOLD"},{"length":23,"offset":617,"style":"BOLD"},{"length":29,"offset":681,"style":"BOLD"},{"length":30,"offset":867,"style":"BOLD"}],"text":"Есть заблуждение, по поводу того, что PWA помогает улучшить SEO показатели. Я с этим не согласен!\nИ первая проблема с которой ты сталкнешься — это SPA, где html разметку на страницу рендерит javascript. Пока скрипты не загрузятся(сколько им там нужно) разметка не появится, а будет лишь div с айдишником “app”. Вот как раз в тот момент, когда всё раздупляется, происходит SEO анализ, но страница, как ты понял, пустая. И хоть ты добавишь +100500 PWA на сайт, они никак не ускорят рендер html кода.\nИ чтобы быть менее голословным, давай убедимся на реальном примере. Возьмём сайт https://madops.io, который и является single page application’ом. Если посмотреть на его внутренности view-source:https://madops.io, то ты и увидишь всё то, что я описал выше.\nВ остальных же случаях, когда сервер разом рендерит всю html разметку, проблем не возникает, как, например, тут view-source:https://maddevs.io","type":"unordered-list-item","key":"9eajm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ограниченные возможности. Такие функции как управление камерой, отправка смс, доступ к датчикам и многое другое не будет доступно для PWA, по соображениям безопасности.","type":"unordered-list-item","key":"fnd2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не поддерживается некоторыми браузерами. Например, на IOS в safary пока не поддерживаются push-уведомления.","type":"unordered-list-item","key":"3j2is"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":3,"offset":100}],"inlineStyleRanges":[],"text":"Думаю, этого вполне достаточно, чтобы уже представить что такое PWA. Ну а если мало, можно почитать тут","type":"unstyled","key":"c112k"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":17,"offset":44}],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"},{"length":17,"offset":44,"style":"BOLD"}],"text":"Вот список сайтов, которые используют PWA — https://pwa.rocks","type":"unstyled","key":"16fod"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Основные понятия","type":"header-two","key":"9loss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Service Worker — Это по сути файл со скриптами, который отвечает за всю эту магию. Все запросы браузера идут через него, что даёт кучу возможностей, например, если отсутствует соединение с интернетом возвращает контент из кэша(если он конечно там есть).\nВ нем мы обрабатываем различные события, запись, удаление файлов из кэша и многое другое.\nСкрипты работают в фоновом режиме, параллельно с приложением.","type":"unstyled","key":"epb6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Manifest.json — Файл настроек. Там мы указывает какие иконки использовать, какой текст отображать в ярлыке, в каком формате открывать окно браузера и тд. Более подробно поговорим о нём чуть ниже.","type":"unstyled","key":"avcel"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Application Shell — Так называют оболочку для PWA. А если конкретнее, это браузер, который слегка трансформируется, чтобы дать больше возможностей разработчику.","type":"unstyled","key":"275qe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"HTTPS — Одно из главных требования PWA — передача данных по https протоколу, что более безопасно.\nПри разработке можно использовать localhost.","type":"unstyled","key":"8rvd6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Push Notifications — технология для отправки push-уведомлений.","type":"unstyled","key":"v5bf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Настройка PWA","type":"header-two","key":"4ss8j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А настроить её на самом деле очень просто, и чтобы это доказать, давай сразу перейдем к написанию кода, так будет проще. Погнали!","type":"unstyled","key":"9dknr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А нет, стой.","type":"unstyled","key":"3nadn"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":39,"offset":30}],"inlineStyleRanges":[],"text":"Вот ссылка на уже готовый код https://github.com/denisoed/PWA-example, от туда можешь скачать картинки, которые потребуются дальше, ну и за одно ознакомишься с тем, что получилось.","type":"unstyled","key":"dehue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, начнем с создания папки для проекта, назовем её PWA. Далее в эту папку добавим index.html, в котором будет вот такой код","type":"unstyled","key":"egj0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":11,"style":"ITALIC"},{"length":4,"offset":22,"style":"ITALIC"},{"length":7,"offset":55,"style":"ITALIC"},{"length":4,"offset":105,"style":"ITALIC"},{"length":7,"offset":124,"style":"ITALIC"},{"length":5,"offset":173,"style":"ITALIC"},{"length":5,"offset":202,"style":"ITALIC"},{"length":4,"offset":230,"style":"ITALIC"},{"length":6,"offset":256,"style":"ITALIC"},{"length":3,"offset":286,"style":"ITALIC"},{"length":3,"offset":310,"style":"ITALIC"}],"text":" \n \n \n \n PWA\n \n \n

\n \n $\"Mad$ \n \n

PWA

Progressive Web Apps

\n ","type":"blockquote","key":"17kon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Верстку я уже подготовил, но пока без стилей это выглядит плохо, поэтому добавим и их. Создаём папку css, в которую добавляем файл styles.css и вставляем в него код ниже ","type":"unstyled","key":"6ujs6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"1mktv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":35,"style":"ITALIC"},{"length":11,"offset":96,"style":"ITALIC"},{"length":46,"offset":213,"style":"ITALIC"},{"length":10,"offset":260,"style":"ITALIC"},{"length":10,"offset":312,"style":"ITALIC"},{"length":10,"offset":361,"style":"ITALIC"},{"length":10,"offset":459,"style":"ITALIC"}],"text":"body {\n font-family: sans-serif;\n}/* Make content area fill the entire browser window */\nhtml,\n.fullscreen {\n display: flex;\n height: 100%;\n margin: 0;\n padding: 0;\n width: 100%;\n background-color: # 000;\n}/* Center the content in the browser window */\n.container {\n margin: auto;\n text-align: center;\n}.container img {\n width: 50px;\n height: auto;\n}.container h1 {\n color: # fff;\n font-size: 12rem;\n font-weight: bold;\n margin: 30px 0 -20px;\n}.container p {\n color: # fff;\n font-size: 3rem;\n margin: 0;\n}","type":"blockquote","key":"6hrg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"1of6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Конечно же, подключаем этот файл в index.html, в тэг … ","type":"unstyled","key":"4hquq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"1nn01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":6,"style":"ITALIC"},{"length":4,"offset":23,"style":"ITALIC"}],"text":"","type":"blockquote","key":"dno6f"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":3,"offset":61}],"inlineStyleRanges":[{"length":17,"offset":104,"style":"BOLD"},{"length":13,"offset":163,"style":"BOLD"}],"text":"Давай сразу подключим нужные картинки, которые можно скачать тут. Перейдешь по ссылке, там будет кнопка Clone or download, зеленая такая, жмешь её, потом кликаешь Download ZIP. Скачается архив, в нем и будут картинки в папке images. Фух, думаю довольно доступно объяснил","type":"unstyled","key":"7t068"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"eddim"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":3,"offset":193}],"inlineStyleRanges":[],"text":"Открываешь проект, создаешь там директорию images, куда вставляешь все картинки. Далее открываешь index.html и вставляешь в тэг … мета информацию. Что это и зачем, можешь почитать тут.","type":"unstyled","key":"2cdl3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":6,"style":"ITALIC"},{"length":4,"offset":17,"style":"ITALIC"},{"length":4,"offset":43,"style":"ITALIC"},{"length":3,"offset":72,"style":"ITALIC"},{"length":4,"offset":95,"style":"ITALIC"},{"length":4,"offset":135,"style":"ITALIC"},{"length":7,"offset":154,"style":"ITALIC"},{"length":4,"offset":179,"style":"ITALIC"},{"length":7,"offset":215,"style":"ITALIC"},{"length":4,"offset":236,"style":"ITALIC"},{"length":7,"offset":281,"style":"ITALIC"},{"length":4,"offset":304,"style":"ITALIC"},{"length":7,"offset":338,"style":"ITALIC"},{"length":4,"offset":359,"style":"ITALIC"},{"length":7,"offset":390,"style":"ITALIC"},{"length":4,"offset":433,"style":"ITALIC"},{"length":7,"offset":464,"style":"ITALIC"},{"length":4,"offset":490,"style":"ITALIC"},{"length":7,"offset":506,"style":"ITALIC"}],"text":"\n\n\n\n\n\n\n\n","type":"blockquote","key":"21tj1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В итоге, в файле index.html должна быть вот такая структура","type":"unstyled","key":"6ikci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":10,"style":"ITALIC"},{"length":4,"offset":21,"style":"ITALIC"},{"length":7,"offset":54,"style":"ITALIC"},{"length":4,"offset":104,"style":"ITALIC"},{"length":7,"offset":123,"style":"ITALIC"},{"length":3,"offset":165,"style":"ITALIC"},{"length":4,"offset":176,"style":"ITALIC"},{"length":4,"offset":202,"style":"ITALIC"},{"length":3,"offset":235,"style":"ITALIC"},{"length":4,"offset":258,"style":"ITALIC"},{"length":4,"offset":302,"style":"ITALIC"},{"length":7,"offset":321,"style":"ITALIC"},{"length":4,"offset":350,"style":"ITALIC"},{"length":7,"offset":386,"style":"ITALIC"},{"length":4,"offset":411,"style":"ITALIC"},{"length":7,"offset":456,"style":"ITALIC"},{"length":4,"offset":483,"style":"ITALIC"},{"length":7,"offset":517,"style":"ITALIC"},{"length":4,"offset":542,"style":"ITALIC"},{"length":7,"offset":573,"style":"ITALIC"},{"length":4,"offset":620,"style":"ITALIC"},{"length":7,"offset":651,"style":"ITALIC"},{"length":4,"offset":678,"style":"ITALIC"},{"length":7,"offset":694,"style":"ITALIC"},{"length":3,"offset":753,"style":"ITALIC"},{"length":4,"offset":770,"style":"ITALIC"},{"length":5,"offset":810,"style":"ITALIC"},{"length":5,"offset":839,"style":"ITALIC"},{"length":4,"offset":867,"style":"ITALIC"},{"length":6,"offset":893,"style":"ITALIC"},{"length":3,"offset":923,"style":"ITALIC"},{"length":3,"offset":947,"style":"ITALIC"}],"text":"\n \n \n \n PWA\n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n $\"Mad$ \n \n

PWA

Progressive Web Apps

\n ","type":"blockquote","key":"9q5fh"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":21,"offset":91}],"inlineStyleRanges":[],"text":"Теперь остаётся запустить и посмотреть, что получилось. Я тут нашел очень удобный экстеншн Web Server for Chrome, который запускает локальный сервер, его нужно установить, он нам понадобится далее. Там ничего сложно, просто укажи папку с проектом, где лежит index.html, он сам всё сделает. Копируешь ссылку и вставляешь в браузер.","type":"unstyled","key":"ab04e"},{"data":{"image":{"id":"5f22a4ede0739b74292e1420"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3j17u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" И вот что у нас получилось. Я бы не сказал, что это шЭдЭвр, но как по мне нормально! ","type":"unstyled","key":"ft05r"},{"data":{"image":{"id":"5f22a4fb7c64f45cde264a5e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2o71f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":134,"style":"BOLD"},{"length":10,"offset":159,"style":"BOLD"},{"length":6,"offset":183,"style":"BOLD"},{"length":1,"offset":190,"style":"BOLD"},{"length":16,"offset":215,"style":"BOLD"}],"text":" Ну слушай, самое сложное, считай, мы сделали, давай-ка теперь посмотрим, что думает google валидация о нашей работе. Для этого нажми f12 и перейди во вкладку Lighthouse (раньше было Audits), там будет синяя кнопка Generate report, тыкай. ","type":"unstyled","key":"a3858"},{"data":{"image":{"id":"5f22a52373336439715dd269"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fdj0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" После того, как пройдет процесс валидации, мы увидим следующую картину: пункт отвечающий за PWA будет серым. Это говорит о том, что у нас отсутствуют настройки. ","type":"unstyled","key":"ea27c"},{"data":{"image":{"id":"5f22a55910d80961dbefeabc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"arao8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"4dqf0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И если проскроллить ниже, можно увидеть рекомендации, которые нужно выполнить, чтобы PWA работало как часы.","type":"unstyled","key":"3c3eo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"},{"length":10,"offset":8,"style":"ITALIC"},{"length":54,"offset":19,"style":"ITALIC"},{"length":10,"offset":8,"style":"BOLD"}],"text":"Вкладка Lighthouse поможет тебе отслеживать все ошибки при настройки PWA.","type":"blockquote","key":"3ctr6"},{"data":{"image":{"id":"5f22a5b8cc1a863f99831c48"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a36me"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"bm081"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Ну вот, наконец-то мы дошли до самого интересного.","type":"header-two","key":"7r8js"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала нужно создать файл manifest.json в корне проекта. В него мы добавляем следующие метаданные:","type":"unstyled","key":"cfj6c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"name — Полное название. Используется в ярлыке приложения","type":"unordered-list-item","key":"eupsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"short_name — Сокращенное название, будет задействовано там, где полное имя не будет помещаться","type":"unordered-list-item","key":"12e8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"icons — Список иконок, которые будут отображаться в ярлыке установленного приложения.","type":"unordered-list-item","key":"1kkg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"lang — Язык по умолчанию","type":"unordered-list-item","key":"cg69b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"start_url — Обязательный параметр. Он говорит приложению с какого файла нужно стартовать. При открытии приложения, браузер будет всегда открывать эту страницу","type":"unordered-list-item","key":"3ea3n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"display — Говорит о том, в каком формате открывать окно браузера.","type":"unordered-list-item","key":"ctc4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"background_color — Это свойство используется на экране заставки при первом запуске приложения на мобильном устройстве.","type":"unordered-list-item","key":"aauag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":11,"offset":130,"style":"BOLD"},{"length":4,"offset":242,"style":"ITALIC"},{"length":7,"offset":261,"style":"ITALIC"}],"text":"theme_color — Задает цвет панели инструментов и может быть отражен в предварительном просмотре приложения в переключателях задач. theme_color должен соответствовать цвету мета-темы, указанному в заголовке документа. В Нашем случае так ","type":"unordered-list-item","key":"2o37o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" {\n \"name\": \"Progressive Web Apps\",\n \"short_name\": \"PWA\",\n \"icons\": [\n {\n \"src\": \"images/mstile-70x70.png\",\n \"sizes\": \"70x70\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"images/mstile-144x144.png\",\n \"sizes\": \"144x144\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"images/mstile-150x150.png\",\n \"sizes\": \"150x150\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"images/mstile-192x192.png\",\n \"sizes\": \"310x150\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"images/mstile-310x150.png\",\n \"sizes\": \"310x150\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"images/mstile-310x310.png\",\n \"sizes\": \"310x310\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"images/mstile-512x512.png\",\n \"sizes\": \"310x310\",\n \"type\": \"image/png\"\n }\n ],\n \"lang\": \"en-US\",\n \"start_url\": \"/index.html\",\n \"display\": \"standalone\",\n \"background_color\": \"black\",\n \"theme_color\": \"black\"\n} ","type":"blockquote","key":"8sick"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"76ohq"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":3,"offset":27}],"inlineStyleRanges":[],"text":"Этого пока достаточно. Вот тут есть описание всех свойств этого файла, как будет время, почитай обязательно.","type":"unstyled","key":"d3faf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключаем manifest.json в index.html в тэг …","type":"unstyled","key":"9n354"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":6,"style":"ITALIC"},{"length":4,"offset":21,"style":"ITALIC"}],"text":"","type":"blockquote","key":"1diq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приступаем к написанию скриптов. Создаем папку c названием js, в которую добавляем файл main.js с вот таким кодом:","type":"unstyled","key":"4ps7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":42,"style":"ITALIC"}],"text":"window.addEventListener('load', () => {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.register('/sw.js').then(reg => {\n console.log('SW registered!');\n }).catch(err => console.log('SW registration FAIL:', err));\n }\n});","type":"blockquote","key":"1hr61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пару слов о том, что там происходит.","type":"unstyled","key":"dat1q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как только страница загрузилась, проверяем, поддерживает ли браузер serviceWorker, и если успешно, то идём дальше.","type":"unordered-list-item","key":"89osg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее регистрируем наш файл sw.js(который еще предстоит настроить). Ничего необычного.","type":"unordered-list-item","key":"e8i3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключаем cкрипты в index.html, но уже не в тэг …, а перед закрывающим тэгом .","type":"unstyled","key":"ao9e5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":8,"style":"ITALIC"}],"text":"","type":"blockquote","key":"7fdpo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну теперь давай создадим сам файл sw.js. В нем будет храниться вся логика для Service Worker. Создаем его в корне проекта, и первой строкой добавим туда название кэша.","type":"unstyled","key":"4lhg7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const cacheName = 'pwa_v1';","type":"blockquote","key":"96n5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":37,"style":"BOLD"}],"text":"Следующей строкой добавим переменную includeToCache. В ней мы указываем файлы, которые нужно закэшировать. Да, я понимаю, что не удобно, приходится руками прописывать все файлы, но имеем то, что имеем. Зато мы всегда будем уверены, что ничего лишнего не кэшируется. Экономия трафика и стабильность.","type":"unstyled","key":"55trd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const includeToCache = [\n '/',\n '/index.html',\n '/images/favicon.ico',\n '/images/logo.svg',\n '/images/logo-black.svg',\n '/css/styles.css',\n '/js/main.js'\n];","type":"blockquote","key":"brlqa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":132,"style":"BOLD"}],"text":"Следующими идут события. Service Worker имеет несколько событий под капотом, их ещё называют жизненные циклы. И первое из них - это install. Оно срабатывает только один раз при записи кэша.","type":"unstyled","key":"btevc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":65,"offset":0,"style":"ITALIC"},{"length":6,"offset":170,"style":"ITALIC"}],"text":"/* Start the service worker and cache all of the app's content */\nself.addEventListener('install', e => {\n e.waitUntil(\n caches.open(cacheName).then(cache => {\n return cache.addAll(includeToCache);\n })\n );\n});","type":"blockquote","key":"2t7nu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":8,"style":"BOLD"},{"length":11,"offset":178,"style":"BOLD"}],"text":"Событие fetch. Это событие просматривает все запросы, и если что-то совпадает с тем, что лежит в кэше, отдает совпадение из кэша. Иначе, отдает то, что приходит с сервера.\nМетод respondWith, который дословно переводится “Ответь с помощью…”, как раз и отвечает за выдачу данных из кэша или тех, что вернул сервер. А если сервер ничего не вернул, то берем из кэша.","type":"unstyled","key":"8n64o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"ITALIC"},{"length":6,"offset":148,"style":"ITALIC"}],"text":"/* Serve cached content when offline */\nself.addEventListener(‘fetch’, e => {\n e.respondWith(\n caches.match(e.request).then(response => {\n return response || fetch(e.request);\n })\n );\n});","type":"blockquote","key":"4m50f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этого кода пока достаточно. Давай теперь убедимся что файл sw.js зарегистрирован и кэш записан. Перейди в консоль разработчика, открой вкладку Application и там перейди в настройки Service Workers. Здесь мы видим, что файл sw.js успешно зарегистрирован, это подтверждает зелёная лампочка.","type":"unstyled","key":"fqq90"},{"data":{"image":{"id":"5f22a6c5e2b12627040977e9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8oaf3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Продолжаем движение по боковой навигационной панели, находим выпадающий список с названием Cache Storage, где собственно и хранится наш кэш. Если на него нажать, можно увидеть какие файлы и контент были закэшированны.","type":"unstyled","key":"8b6lq"},{"data":{"image":{"id":"5f22a6e26da6015854938a40"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7kd5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"b5ltt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, если отключить интернет и перезагрузить страницу, сайт будет работать.","type":"unstyled","key":"52tig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подведём итоги. Для того, чтобы заставить сайт работать при отсутствии интернета, не нужно устанавливать никакие фреймворки, добавлять библиотеки и прочее. Достаточно нескольких строк кода и общего понимания этой технологии.","type":"unstyled","key":"fp24v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Как обновлять кэш?","type":"header-two","key":"56l4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первая проблема, с которая я столкнулся, разбираясь с PWA, была связана с обновлением старого кэша. Но, как оказалось, это решается очень просто.","type":"unstyled","key":"6ovh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давай поменяем парочку стилей, чтобы было видно что, что-то изменилось. Обновим страницу, убедимся что стили поменялись на странице. Обрубим соединение с интернетом, ещё раз перезагрузим страницу, но почему-то кэш не обновился, и мы видим старую версию сайта.","type":"unstyled","key":"erp7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":67,"style":"BOLD"}],"text":"Решение выглядит следующим образом. В файл sw.js добавляем событие activate, при вызове которого, будем проверять имя старого и нового кэша, и если имена отличаются, то удаляем старый и добавляем новый. Да, чтобы кэш обновлялся, нам нужно менять его название при каждом обновлении кода.","type":"unstyled","key":"bj2qm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":47,"style":"BOLD"}],"text":"В начале я не зря в имени кэша указал постфикс *_v1, это и будет его версией. На самом деле не важно, как называть, главное, чтобы имена отличались.","type":"unstyled","key":"2qhoq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":43,"style":"ITALIC"},{"length":34,"offset":89,"style":"ITALIC"},{"length":2,"offset":124,"style":"ITALIC"},{"length":2,"offset":215,"style":"ITALIC"},{"length":6,"offset":250,"style":"ITALIC"}],"text":"self.addEventListener(‘activate’, e => {\n // delete any caches that aren’t in cacheName\n // which will get rid of version\n e.waitUntil(\n caches.keys().then(keys => Promise.all(\n keys.map(key => {\n if (cacheName !== key) {\n return caches.delete(key);\n }\n })\n )).then(() => {\n console.log(cacheName + ‘ now ready to handle fetches!’);\n })\n );\n});","type":"blockquote","key":"6aeo7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если почитать код, можно увидеть условие, где сравниваются имена кэшей, и если они не совпадают, старый кэш удаляется.","type":"unstyled","key":"6jm4u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":28,"style":"BOLD"}],"text":"Пару слов по поводу события activate. Это событие срабатывает после того, как воркер был зарегистрирован и готов к работе. Но чтобы он был готов, нужно дождаться пока старый кэш перестанет использоваться сайтом, a на это потребуется какое-то время. И чтобы избавится от этого ожидания, можно добавить метод ниже.","type":"unstyled","key":"54f4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"self.skipWaiting();","type":"blockquote","key":"36ehe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":93,"style":"BOLD"}],"text":"Теперь кэш будет обновляться сразу после регистрации нового воркера. Добавляем его в событие install.","type":"unstyled","key":"dv4fp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":65,"offset":0,"style":"ITALIC"},{"length":6,"offset":190,"style":"ITALIC"},{"length":19,"offset":107,"style":"BOLD"}],"text":"/* Start the service worker and cache all of the app's content */\nself.addEventListener('install', e => { self.skipWaiting(); e.waitUntil(\n caches.open(cacheName).then(cache => {\n return cache.addAll(includeToCache);\n })\n );\n});","type":"blockquote","key":"6ksn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":10,"style":"BOLD"}],"text":"И в файле main.js добавим функцию update, которая при каждой перезагрузке страницы будет запускать обновление кэша.","type":"unstyled","key":"6c0ab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"reg.update();","type":"unstyled","key":"3p4ts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":22,"style":"BOLD"},{"length":7,"offset":86,"style":"BOLD"}],"text":"Добавляем над методом console.log(). На самом деле не важно, главное чтобы в коллбэке .then()","type":"unstyled","key":"5fu2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":42,"style":"ITALIC"},{"length":13,"offset":152,"style":"BOLD"}],"text":"window.addEventListener('load', () => {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.register('/sw.js').then(reg => {\n \n reg.update();\n \n console.log('SW registered!');\n }).catch(err => console.log('SW registration FAIL:', err));\n }\n});","type":"blockquote","key":"9uje9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":92,"style":"BOLD"}],"text":"Вот и всё, перезагружаем страницу. Снова открываем инструменты разработчика, ставим галочку offline в табе Service Workers на боковой панели, ещё раз перезагружаем страницу и наблюдаем за вкладкой Cache Storage. Там можно будет увидеть, как старый кэш сменится новым.","type":"unstyled","key":"5lstp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":154,"offset":0,"style":"BOLD"}],"text":"Хочу предупредить, может понадобиться несколько раз перезагрузить страницу, так как на установку нового воркера тоже требуется время (около 2 мин обычно).","type":"unstyled","key":"dtv3g"},{"data":{"image":{"id":"5f22a73a722bd53266b46345"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7ktl6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" И после очередной перезагрузки страницы, мы видим наши новые стили и обновлённый кэш, ура! ","type":"unstyled","key":"52urr"},{"data":{"image":{"id":"5f22a74e9c71bf02d55e8ab8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1lk7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"1gqii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"header-two","key":"d8o89"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Благодаря данной статье ты, мой дорогой друг, обучился базовым принципам работы с технологией PWA на реальном примере. Не стесняйся оставлять комментарии к статье и делистся собственными примерами о настройке PWA. Всех благ!","type":"unstyled","key":"e2pa0"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":3,"offset":31}],"inlineStyleRanges":[],"text":"Ранее статья была опубликована тут.","type":"unstyled","key":"c8f4l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"14erg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"O7aivTOuXQFKTiq7RLaY"}],"entityMap":{"0":{"data":{"href":"https://www.google.com/search?q=Progressive%20Web%C2%A0Apps","url":"https://www.google.com/search?q=Progressive%20Web%C2%A0Apps"},"mutability":"MUTABLE","type":"LINK"},"11":{"data":{"url":"https://blog.maddevs.io/progressive-web-apps-prakticheskoe-rukovodstvo-cc2cd02bc6fe"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://en.wikipedia.org/wiki/Single-page_application","url":"https://en.wikipedia.org/wiki/Single-page_application"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://madops.io/","url":"https://madops.io/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://madops.io/","url":"https://madops.io/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps","url":"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://pwa.rocks/","url":"https://pwa.rocks/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://github.com/denisoed/PWA-example","url":"https://github.com/denisoed/PWA-example"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://github.com/denisoed/PWA-example","url":"https://github.com/denisoed/PWA-example"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://www.w3schools.com/tags/tag_meta.asp","url":"https://www.w3schools.com/tags/tag_meta.asp"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb","url":"https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://developer.mozilla.org/en-US/docs/Web/Manifest","url":"https://developer.mozilla.org/en-US/docs/Web/Manifest"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}