웹 푸시 알림(Web Push Notification)

    👉 시작하면서 웹 푸시 알림(Web Push Notification)이란, 말 그대로 브라우저 환경에서 푸시 알림을 받을 수 있는 기술을 의미한다. 푸시 알림이라고 하면 네이티브 앱의 전유물이라고 느낄 수 있지만, 웹 푸시 기술을 통해 웹에서도 푸시 알림 기능을 구현하고 사용할 수 있다. 브라우저에 구현되어있는 Push API와 자세한 스펙은 아래 문서에서 확인해볼 수 있다. MDN Web Docs W3 Spec 본 포스팅에서는 웹 푸시가 동작하는 메커니즘에 대해 조금 세부적으로 살펴보고, 직접 데모 코드를 살펴보며 웹 푸시에 대한 전반적인 이해를 할 수 있도록 진행할 예정이다. 분량을 조절하기 위해 모든 API 기능에 대해 설명하진 않으니 자세한 내용은 글 중간중간에 추가해둔 참조 링크(문서)를 참고하..

    [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간!

    🎉 소개 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 첫 번째 저서, "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 한다. 본 블로그에도 프로그레시브 웹 앱에 대해 간략히 알아볼 수 있는 강좌를 작성했었는데, 프로그레시브 웹 앱에 대해 보다 더 다양하고 자세한 내용을 다룰 수 있는 내용을 정리하여 집필하게 되었다. 📖 책 보러 가기 책에 대한 자세한 내용은 아래 온라인 서점에서 확인해볼 수 있다. YES24 교보문고 알라딘 인터파크도서 프로그레시브 웹 앱의 전반적인 내용과 다양한 핵심 기능을 밑바닥부터 구현해보며 한 걸음 더 나아갈 수 있도록 구성되어있다. 오프라인 환경에서 웹 페이지를 사용하거나 게시물에 대한 백그라운드 동기화 작업 수행, 그리고 좋아요 알림 기..

    [WWDC20] Safari Web Extension/사파리 웹 확장 살펴보기

    이번 포스팅에서는 Safari 14 버전부터 사용 가능하게 될 웹 확장(Web Extension)에 대해 알아보고, 샘플 확장 프로그램을 개발해보고자 한다. 기존 사파리(14버전 미만) 브라우저에서도 확장 프로그램을 사용할 수 있었지만, 스위프트로 개발된 네이티브 앱을 별도로 설치하고 활성화하는 방식으로 사용한다는 불편함이 있었다. (접근성도 좋지 않았다) 하지만 곧 업데이트될 사파리 14 버전부터는 구글 크롬 브라우저와 같이 자바스크립트로 웹 확장을 개발할 수 있게 되는데, 웹 개발 모델을 따르고, 웹 확장을 지원하는 다른 브라우저와의 호환성도 유지하기 때문에 사파리 웹 확장을 개발한 후 다른 브라우저에서도 동일한 확장 기능을 사용할 수 있을 것으로 보인다. 본 포스팅을 본격적으로 시작하기에 앞서 함께..

    [PWA] 프로그레시브 웹 앱 시작하기 (6) - Push, 푸시 알림

    [ 공지 ] 프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다! 현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며, 하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다. (도서 소개 및 실습 미리보기) https://geundung.dev/106 [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대� geundung.dev SNS 앱 예제로 배우는 프로그레시브 웹 앱 (구매 링크 / 2020.07.31 출간) [YE..

    [PWA] 프로그레시브 웹 앱 시작하기 (5) - Push, 푸시 알림

    [ 공지 ] 프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다! 현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며, 하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다. (도서 소개 및 실습 미리보기) https://geundung.dev/106 [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대� geundung.dev SNS 앱 예제로 배우는 프로그레시브 웹 앱 (구매 링크 / 2020.07.31 출간) [YE..

    [PWA] 프로그레시브 웹 앱 시작하기 (4) - 서비스워커 상태

    [ 공지 ] 프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다! 현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며, 하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다. (도서 소개 및 실습 미리보기) https://geundung.dev/106 [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대� geundung.dev SNS 앱 예제로 배우는 프로그레시브 웹 앱 (구매 링크 / 2020.07.31 출간) [YE..

    [PWA] 프로그레시브 웹 앱 시작하기 (3) - 리소스 캐싱 및 Fetch

    [ 공지 ] 프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다! 현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며, 하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다. (도서 소개 및 실습 미리보기) https://geundung.dev/106 [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대� geundung.dev SNS 앱 예제로 배우는 프로그레시브 웹 앱 (구매 링크 / 2020.07.31 출간) [YE..

    [PWA] 프로그레시브 웹 앱 시작하기 (2) - 서비스워커 등록

    [ 공지 ] 프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다! 현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며, 하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다. (도서 소개 및 실습 미리보기) https://geundung.dev/106 [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대� geundung.dev SNS 앱 예제로 배우는 프로그레시브 웹 앱 (구매 링크 / 2020.07.31 출간) [YE..

    [PWA] 프로그레시브 웹 앱 시작하기 (1) - PWA란?

    [ 공지 ] 프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다! 현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며, 하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다. (도서 소개 및 실습 미리보기) https://geundung.dev/106 [PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간! 안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대� geundung.dev SNS 앱 예제로 배우는 프로그레시브 웹 앱 (구매 링크 / 2020.07.31 출간) [YE..