1000 смирённых поклонов!!! Спасибо я так давно ждал!!! Я буду использовать обязательно потому, что: 1) это реальные клиенты которых я получаю из поиска, так как сайты с PWA ранжируются выше, а значит клиентов! 2) продавать приложения по цене сайта намного проще, чем сайт! И много много многое!!!
Сложно сказать. Развернуть такое приложение очень просто, но: а) рядовой пользователь знать не знает как его установить, и отсюда вытекает: б) AppStore такое приложение публиковать не будет, а в iOs, из Safari к примеру, его установить - целая история Это очень клевая технология, но практического применения в ней мизер.
Как вовремя нашла ваш урок, просмотрела, хоть поняла что к чему, ещё хорошо что в консоли все объясняете, кроме как ошибок, в ней ничего не знаю, в другие вкладки и не заходила, а тут прям находка, кучу открытий для себя сделала, если что, я новичок, которого посадили в сложный проект, без знания языка и сказали освоить за короткий срок, за 2 недели научилась оформлению на html, css, так же освоила axios, api, да и вообще кучу всего, а тут на днях сказали посмотреть и изучить PWA, чтоб знала что к чему, сутками не сплю, учеба😅
Ой, спасибо огромное! Это видео - реально ценный клад. Я вообще не понимал, как так возможно закешировать страницу, чтобы она открывалась без интернета. Гуглил гуглил, и ничего. А оказывается есть волшебные три буквы: PWA
Только по работе вспоминал фронт лид об этом, я начал гуглить вер воркеры, узнавать что такое pwa, и тут бац, твое видео как раз очень в тему и вовремя. Спасибо) не зря - лучший фронтенд канал на ютубе
1000 смирённых поклонов!!! Спасибо я так давно ждал!!! Я буду использовать обязательно потому, что: 1) это реальные клиенты которых я получаю из поиска, так как сайты с PWA ранжируются выше, а значит клиентов больше! 2) продавать приложения по цене сайта намного проще, чем сайт! И много много многое!!!
Отличный туториал, никак руки не доходили чтобы разобраться :) А тут все разжевал :) Было бы круто послушать о Advanced решениях по PWA и фреймворках, WorkBox :) Спасибо.
О да! Развитие темы pwa категорически интересно. Например как можно кэшировать пользовательский ввод и передавать инфу при появлении сети. Большое спасибо!!!
спасибо! Очень-очень актуальное сейчас видео PWA технологии! Пожалуйста выпускайте новые видосы по этой теме. Работа с железом телефона например, непаханное поле )
Еще такой момент, на 42:10 в 49 строке пишется await caches.match('/offline.html'), но ведь у нас запрос динамический, т.е. делается fetch за данными, т.е. ожидается, что в ответ придет json/объект, а не html, или я чего то не понимаю, объясните плиз?
Спасибо большое! Единственное, если установить на смартфон и отключить интернет а потом обновить страницу - пишет "Не удается получить доступ к сайту". Насколько я понял, там нужно как-то по другому использовать ServiceWorker, чтобы работал кеш на смартфоне ?
Подскажите пожалуйста, как называется плагин, который автоматически описывает, т.е. например : type: 'listener', listener 'event'. подписывает вот эти type и listener?
Каким образом в случае отсутствия интернета загружается файл sw.js? Он же не захеширован нами (что происходит с хешем браузера тоже не ясно, он там сам по себе живет). Соответственно когда в app.js доходит момент до регистрации воркера, откуда он берется?
Внедрил PWA в свой проект. В первую очередь делал это ради возможности установки на главный экран, потому что это будет весьма удобно для использования. Но потом и идея с кэшем и возможностью запуска оффлайн мне тоже показалась неплохой и я решил сделать и это. И, как я понял, работает это весьма странно и нестабильно. Я заметил, что если зайти в приложение с включенным интернетом, то при перезаходе в него без интернета кэш подгружается и все работает нормально. Но если же попытаться зайти сразу без интернета, то будет надпись: "Не удаётся получить доступ к сайту", кэш просто не подгружается. Почитал комментарии и понял, что не только у меня такое. Может кто знает, как это фиксится, пишите, буду рад. Но в целом, я думаю это сказывается сырость технологии. На бумаге, потенциально, это достаточно перспективно, но работает пока так себе. Единственное, ради чего можно это добавлять, так это для возможности установки на главный экран и еще может уведомлений. Хоть и не пробовал играться с уведомлениями, но почитав комментарии, понял, что и там наблюдаются проблемы в работе.
А кэшируется ли браузером сам файл сервис вокера sw.js? Напрмер, изменили версию кэша c 's-app-1' на 's-app-2', но если sw.js закэшируется в браузере (как обычные js скрипты), то получается приложение будет использовать старую версию кэша 's-app-1'
Кстати можно вопрос, а почему когда приложение запускаем через live-server то при отключении сети файлы отдаются с кеша а если зайти по url от firebase и попробовать тоже самое то ничего не отдается
Спасибо за урок. Можно пару вопросов? 1. Все сделал по уроку. Тестирую в Chrome, Yandex, Firefox. Без файлов: app,js manifest.json, sw.js - lighthouse отрабатывает отлично. Разумеется PWA - нет. Подключаю файлы. На всех трех браузерах в адресной строке появляется значок установки. Устанавливается Работает, но lighthouse отрабатывает и видит, что это PWA только через Yandex. Chrome и Firefox - не воспринимают. Чистил все и куки и темпы и все что мог. Что я не так делаю? 2. При входе через сотовый (chrome, yandex браузеры) - не предлагает установить приложение. Почему? Ведь браузер видит PWA? 3. Психанух. Купил еще один домен в зоне .ru (до этого .online был) просто перезалил файлы - все ок. Впечатление, что PWA живет своей жизнью... 4. Заметил, что если впервые выскакиват на сотовом уведомление "Установить приложение" и если сделать отмену, то при повторном посещении сайта - больше подобное не предлагается... Только если полностью очистить историю браузера. Что весьма не удобно, т.к. большинство пользователей в начале скорее всего отменят установку. Можно ли это как-то настроить? Буди признателен за любые советы. Может кто сталкивался. Второй день бьюсь - нет закономерности. Более того теперь Chrome и Firefox виснут при тесте lighthouse/// HELP
29:38 неверно. при возврате из промиса не обязательно делать await. Если вернуть другой промис, то результат будет тот же для вызывающего кода. ps) отличный туториал. просто решил придраться к словам.
Здравствуйте, подскажите пожалуйста, у меня PWA, все настроено, прикрутил web push, однако пуш-уведомления приходят не всегда. А для меня очень важно чтобы уведомления доходили. Я так понимаю, это сервис воркер в спячку глухую уходит, и уже оттуда не видит новые уведомления, или дело не в этом? Кто знает, как это исправить? Помогите пожалуйста!
Есть нюанс с той частью, где описывается , как удалять старые версии кэша, при добавлении новой версии. Так как юзер не ставит галку update on reload, у него кэш обновится только после того как он закроет страницу, а потом снова откроет
Владилен, добрый день! Не мог бы ли ты добавить к себе в видео или может у тебя есть источник, где показано как реализовать кастомную кнопку "добавить на главный экран". Хочется создать свою кнопочку, но инфы толком не нашел.
Отличный ролик, все разжевал, спасибо большое! Единственное, заметил, что на видео, время от времени, на вкладке с сервис воркером, в девтулзах появлялось сообщение об ошибке рядом с файликом sw.js, видно на 23:50 и на 18:26, про что это?
Спасибо большое за курс! Хотел еще узнать, можно ли отправлять закэшированные данные на api сервер, когда интернет соединение восстанавливается? может кто-то знает и подскажет)
тема очень интересна, но только так и не понял - как создать/получить apk такого сайта, чтобы кто угодно мог установить у себя на мобильном и использовать сайт, как приложение,
Спаисбо за видео. Было интересно. Только вопрос: cashes.match() сравнивает только имена файлов или содержимое тоже? Если, к примеру, поправили стили, кэш обновится или пользователь должен будет его чистить?
Спасибо огромное! А продолжение видео будет?) Очень интересует баннер установки приложения и отправка уведомлений/сообщений через Firebase. Сейчас как раз начал интегрировать в Vue2+Leaflet PWA.
Исходный код тут: t.me/js_by_vladilen/339
Получить профессию Frontend разработчика - bit.ly/3a6IZCn
С детского сада знаю, что ПВА необходим для апликейшн !!!
Есть подозрение, что не все поймут 😃
😂👍
Слишком годно :)
Клей))
)))))))))))))))))))
Будете использовать технологию для своих приложений?)
1000 смирённых поклонов!!! Спасибо я так давно ждал!!!
Я буду использовать обязательно потому, что:
1) это реальные клиенты которых я получаю из поиска, так как сайты с PWA ранжируются выше, а значит клиентов!
2) продавать приложения по цене сайта намного проще, чем сайт!
И много много многое!!!
Конечно, спасибо, не знал об этом
Да совместно с NUXT и VUE)))
Было бы круто увидеть видео по стеку: vue-spa + pwa
Огромное тебе спасибо
Сложно сказать. Развернуть такое приложение очень просто, но:
а) рядовой пользователь знать не знает как его установить, и отсюда вытекает:
б) AppStore такое приложение публиковать не будет, а в iOs, из Safari к примеру, его установить - целая история
Это очень клевая технология, но практического применения в ней мизер.
Спасибо за как всегда великолепные уроки. Пожалуй лучшие в Ютьюбе по глубине и доступности изложения. Очень круто
Круто! Спасибо, Владилен!
Как раз писал что интересно узнать про PWA!
ле, давненько я не видел, чтобы так просто и без лишней воды объясняли тему, лукас и подписка
Такой кайф, когда на стажировки дали pwa сделать, и есть такой канал как твой.
Как вовремя нашла ваш урок, просмотрела, хоть поняла что к чему, ещё хорошо что в консоли все объясняете, кроме как ошибок, в ней ничего не знаю, в другие вкладки и не заходила, а тут прям находка, кучу открытий для себя сделала, если что, я новичок, которого посадили в сложный проект, без знания языка и сказали освоить за короткий срок, за 2 недели научилась оформлению на html, css, так же освоила axios, api, да и вообще кучу всего, а тут на днях сказали посмотреть и изучить PWA, чтоб знала что к чему, сутками не сплю, учеба😅
Большое спасибо за труд, ценим и ждём продолжение про более продвинутые концепции PWA)
Отлично! Как раз сегодня начал разбираться с тем, что такое PWA. Оказалось, под мои задачи подходит. Теперь нужно делать вёрстку под комп и мобильник.
Внятная речь, качественная подача. Спасибо за труд!
Спасибо за видео!
Интересно было бы еще посмотреть как это реализовать внутри приложения на том же Vue || React
почти весь свой js изучаю с этого канала) Был бы рад увидеть гайд PWA в практике с каким то полезным сайте
Ой, спасибо огромное! Это видео - реально ценный клад.
Я вообще не понимал, как так возможно закешировать страницу, чтобы она открывалась без интернета. Гуглил гуглил, и ничего. А оказывается есть волшебные три буквы: PWA
Да, было бы неплохо разобрать тему обновления PWA при обновлении сайта на хосте))
Я ради этого и гуглю, вот сюда попал... Но кажется зря
@@ArtiomNeganov нагуглил что-нибудь? А то я только сейчас докопался до service workers, до этого пытался сбросить кэш при перезагрузке
@@Timoffey ну как, 2 года прошло. Нагуглил?
@@ДмитрийСитников-ш2хну как? Месяц прошел.
О, качественная годнота!
Благодарю за проделанный труд и за то, что делишься знаниями!
Спасибо, Владилен! Как всегда - локанично, доступно и исчерпывающе!
Спасибо, Владилен. Лайк, колокольчик, все дела 👍
Только по работе вспоминал фронт лид об этом, я начал гуглить вер воркеры, узнавать что такое pwa, и тут бац, твое видео как раз очень в тему и вовремя. Спасибо) не зря - лучший фронтенд канал на ютубе
Спасибо за урок. Всё понятно и доступно. Сэкономил кучу времени. Кстати изучаю твои курсы на udemy, тоже очень доволен. Всем рекомендую
Первый раз посмотрел на скорости х2, чтобы просто понимать, что это и зачем😅 Однозначно снова пересмотрю, когда буду внедрять) Спасибо тебе!
Очень интересно, спасибо! Хотелось бы ещё больше!🦾
Всё чётко, освежил знания, жду видос про workbox!
Не успел я проголосовать за эту тему, как она появилась) Владилен мое уважение!!!
Модно, стильно, молодёжно. Давно хотел видосик про пва. Сразу лайк!
Я только начинаю изучать какую либо технологию и Владилен сразу выпускает видео по ней)
1000 смирённых поклонов!!! Спасибо я так давно ждал!!!
Я буду использовать обязательно потому, что:
1) это реальные клиенты которых я получаю из поиска, так как сайты с PWA ранжируются выше, а значит клиентов больше!
2) продавать приложения по цене сайта намного проще, чем сайт!
И много много многое!!!
спасибо огромное! как всегда супер! Было бы интересно послушать более расширенный курс по СВ и с более подробным рассмотрением)))
Очень круто! Хотелось бы более продвинутый курс на примере более сложного pwa !
Спасибо за отличный материал! Будет очень интересно узнать о более продвинутых темах в концепции PWA
я буквально пару дней назад так же ютуб установил и ещё подумал как это работает) вон оно что оказывается. Теперь хочется глубже погрузиться и изучать
Отличный урок! Хотелось бы узнать про использование геолокации и bluetooth в PWA
Спасибо за ролик, дает отличное базовое понимание того, что это и зачем
Отличный туториал, никак руки не доходили чтобы разобраться :) А тут все разжевал :) Было бы круто послушать о Advanced решениях по PWA и фреймворках, WorkBox :) Спасибо.
Давно пора было эту тему раскрыть, круто спасибо)
Ещё этого не хватало) Благодарю!
Владилен Здоровья, Успехов ...ПВА это клей
О да! Развитие темы pwa категорически интересно. Например как можно кэшировать пользовательский ввод и передавать инфу при появлении сети. Большое спасибо!!!
спасибо! Очень-очень актуальное сейчас видео PWA технологии! Пожалуйста выпускайте новые видосы по этой теме. Работа с железом телефона например, непаханное поле )
Супер актуальное и полезное видео. Огромное спасибо за такую ценную информацию.
Ждем более продвинутую работу с PWA)
Спасибо! лучшее что я видел по pwa
Нужно больше уроков по PWA, Владилен ) Нотификашки, workbox и т.д.
Отличный туториал, хотим ещё! 😀
Полезное видео, спасибо! Очень вовремя)
Полезный материал! Да, было бы не плохо разобрать настройку workbox...
Спасибо за видео урок, ждем разбор work box
Спасибо за видео, просто и понятно о PWA и service workers.
Очень крутая тема! Большое спасибо за такое простое и понятное объяснение!
Понравилось ! Спасибо!
Можно развивать эту тему дальше
кайф! спасибо! жду более глубоких уроков по теме!
Спасибо огромное! Очень полезное видео!!! Интересно будет сделать PWA на Angular!
Спасибо за видео. Ещё как понял начало. Го глубокое. И ещё спасибо за предоставленный контент.
Еще такой момент, на 42:10 в 49 строке пишется await caches.match('/offline.html'), но ведь у нас запрос динамический, т.е. делается fetch за данными, т.е. ожидается, что в ответ придет json/объект, а не html, или я чего то не понимаю, объясните плиз?
Спасибо большое за урок! Было бы круто если сняли видео про WorkBox
+++
Спасибо за курс👍
Спасибо большое! Единственное, если установить на смартфон и отключить интернет а потом обновить страницу - пишет "Не удается получить доступ к сайту".
Насколько я понял, там нужно как-то по другому использовать ServiceWorker, чтобы работал кеш на смартфоне ?
Спасибо, Владилен, за урок!
Как всегда супер видео. Ждём ПВА на Ангуларе
Спасибо большое, это очень важная и нужная штука!
Круто! Хотелось бы увидить как сделать PWA с реактом
Классный обзор. Можно добавить к курсу по angular
Подскажите пожалуйста, как называется плагин, который автоматически описывает, т.е. например : type: 'listener', listener 'event'. подписывает вот эти type и listener?
Каким образом в случае отсутствия интернета загружается файл sw.js? Он же не захеширован нами (что происходит с хешем браузера тоже не ясно, он там сам по себе живет).
Соответственно когда в app.js доходит момент до регистрации воркера, откуда он берется?
Оу маай !!!))) Спасибо, интересная тема и очень полезное видео !!)))))
Спасибо! Интересная тема.
При переходе на Манифест версии 3, CSP запрещает выполнение сторонних скриптов и теперь не получается подключить offline.html
Лайк за невероятно годный контент, не глядя
Внедрил PWA в свой проект. В первую очередь делал это ради возможности установки на главный экран, потому что это будет весьма удобно для использования. Но потом и идея с кэшем и возможностью запуска оффлайн мне тоже показалась неплохой и я решил сделать и это. И, как я понял, работает это весьма странно и нестабильно. Я заметил, что если зайти в приложение с включенным интернетом, то при перезаходе в него без интернета кэш подгружается и все работает нормально. Но если же попытаться зайти сразу без интернета, то будет надпись: "Не удаётся получить доступ к сайту", кэш просто не подгружается. Почитал комментарии и понял, что не только у меня такое. Может кто знает, как это фиксится, пишите, буду рад. Но в целом, я думаю это сказывается сырость технологии. На бумаге, потенциально, это достаточно перспективно, но работает пока так себе. Единственное, ради чего можно это добавлять, так это для возможности установки на главный экран и еще может уведомлений. Хоть и не пробовал играться с уведомлениями, но почитав комментарии, понял, что и там наблюдаются проблемы в работе.
hi! после деплоя приложение / страница в браузере работали в офлайне? локально (с liveServer) работает, на гитхабе - нет(
Большое спасибо! Было очень познавательно и интересно!
Отличное видео, спасибо! Было бы здорово посмотреть как это выглядит на vue, а так же как это совмещается с SSR
Круто а можно подробнее про эту тему с workbox, вывести кнопку Установить в ui сайта, push notification и прочие апихи которые сейчас доступны а pwa?)
А кэшируется ли браузером сам файл сервис вокера sw.js? Напрмер, изменили версию кэша c 's-app-1' на 's-app-2', но если sw.js закэшируется в браузере (как обычные js скрипты), то получается приложение будет использовать старую версию кэша 's-app-1'
Кстати можно вопрос, а почему когда приложение запускаем через live-server то при отключении сети файлы отдаются с кеша
а если зайти по url от firebase и попробовать тоже самое то ничего не отдается
Владилен, спасибо огромное! Хотелось бы увидеть, как это работает на смартфоне, например с картой.
Владилен как всегда топ . Я за то чтоб познакомиться с более глубокими концептами.
Спасибо за урок. Можно пару вопросов?
1. Все сделал по уроку. Тестирую в Chrome, Yandex, Firefox. Без файлов: app,js manifest.json, sw.js - lighthouse отрабатывает отлично. Разумеется PWA - нет. Подключаю файлы. На всех трех браузерах в адресной строке появляется значок установки. Устанавливается Работает, но lighthouse отрабатывает и видит, что это PWA только через Yandex. Chrome и Firefox - не воспринимают. Чистил все и куки и темпы и все что мог. Что я не так делаю?
2. При входе через сотовый (chrome, yandex браузеры) - не предлагает установить приложение. Почему? Ведь браузер видит PWA?
3. Психанух. Купил еще один домен в зоне .ru (до этого .online был) просто перезалил файлы - все ок. Впечатление, что PWA живет своей жизнью...
4. Заметил, что если впервые выскакиват на сотовом уведомление "Установить приложение" и если сделать отмену, то при повторном посещении сайта - больше подобное не предлагается... Только если полностью очистить историю браузера. Что весьма не удобно, т.к. большинство пользователей в начале скорее всего отменят установку. Можно ли это как-то настроить?
Буди признателен за любые советы. Может кто сталкивался. Второй день бьюсь - нет закономерности. Более того теперь Chrome и Firefox виснут при тесте lighthouse/// HELP
Спасибо огромное конечно нужно продолжение
подскажите пожалуйста что нужно изменить в коде что была возможность применить данный проект(p.w.a) для своего сайта.? пожалуйста подскажите.
29:38 неверно. при возврате из промиса не обязательно делать await. Если вернуть другой промис, то результат будет тот же для вызывающего кода.
ps) отличный туториал. просто решил придраться к словам.
Здравствуйте, подскажите пожалуйста, у меня PWA, все настроено, прикрутил web push, однако пуш-уведомления приходят не всегда. А для меня очень важно чтобы уведомления доходили. Я так понимаю, это сервис воркер в спячку глухую уходит, и уже оттуда не видит новые уведомления, или дело не в этом? Кто знает, как это исправить? Помогите пожалуйста!
Есть нюанс с той частью, где описывается , как удалять старые версии кэша, при добавлении новой версии.
Так как юзер не ставит галку update on reload, у него кэш обновится только после того как он закроет страницу, а потом снова откроет
Спасибо за видео. Очень познавательно и полезно
Владилен, добрый день! Не мог бы ли ты добавить к себе в видео или может у тебя есть источник, где показано как реализовать кастомную кнопку "добавить на главный экран". Хочется создать свою кнопочку, но инфы толком не нашел.
Я читал о SW на MDN и там запись в кэш завернута в e.waitUntil(). У вас нет. Получается это не обязательно?
Было бы интересно посмотреть на более продвинутые ПВА на Реакте ещё и с использованием пуш уведомлений.
Отличный ролик, все разжевал, спасибо большое! Единственное, заметил, что на видео, время от времени, на вкладке с сервис воркером, в девтулзах появлялось сообщение об ошибке рядом с файликом sw.js, видно на 23:50 и на 18:26, про что это?
Очень круто, спасибо!
Отличный урок!!! Спасибо!!!
Спасибо большое за курс!
Хотел еще узнать, можно ли отправлять закэшированные данные на api сервер, когда интернет соединение восстанавливается? может кто-то знает и подскажет)
Да, было бы неплохо развернуть данную тему дальше.
ура ! Разбери офлайн часть и background sync будет интересно.
Гоу видео про Workbox :) И продвинутые темы в PWA
тема очень интересна, но только так и не понял - как создать/получить apk такого сайта, чтобы кто угодно мог установить у себя на мобильном и использовать сайт, как приложение,
Спаисбо за видео. Было интересно. Только вопрос: cashes.match() сравнивает только имена файлов или содержимое тоже? Если, к примеру, поправили стили, кэш обновится или пользователь должен будет его чистить?
Спасибо огромное! А продолжение видео будет?) Очень интересует баннер установки приложения и отправка уведомлений/сообщений через Firebase. Сейчас как раз начал интегрировать в Vue2+Leaflet PWA.
Спасибо, хороший урок!
все просто и понятно. мне как бекендеру особенно интересно изучать чего у вас на фронте происходит. спасибо буду прокачивать скилы в этом направлении
Спасибо большое)
Можете пожалуйста сделать видео на тему Workbox?)