우아한테크코스 4기 마르코(장원석) 테코톡 발표자료
Progressive Web App의 service worker, manifest, push notifcation, cache 등을 중심으로
장원석
nextjws@gmail.com
https://wonsss.github.io/
마이크로서비스 스타일로 만들어진 시스템을 모노리틱 스타일로 이관한 사례와 함께 스프링을 이용해 모듈형 모노리스(modular monoliths)를 만든 경험을 바탕으로 모노리틱/마이크로서비스 보다 본질적인 문제를 제기하고, 문제 해결을 위한 생각을 공유합니다.
https://github.com/arawn/building-modular-monoliths-using-spring
Docker is a tool that allows users to package applications into containers to run on Linux servers. Containers provide isolation and resource sharing benefits compared to virtual machines. Docker simplifies deployment of containers by adding images, repositories and version control. Popular components include Dockerfiles to build images, Docker Hub for sharing images, and Docker Compose for defining multi-container apps. Docker has gained widespread adoption due to reducing complexity of managing containers across development and operations teams.
Nodejs - A performance que eu sempre quis terEmerson Macedo
O documento discute a evolução das tecnologias da web ao longo do tempo e as limitações das tecnologias atuais para suportar alta escalabilidade e concorrência. Propõe o uso de Node.js, que usa I/O não bloqueante e event loop para suportar milhares de usuários simultâneos de forma eficiente com poucos recursos.
Supercharging CI/CD with GitLab and Rancher - June 2017 Online MeetupShannon Williams
In our June Rancher meetup, GitLab joined us to discuss how to use GitLab tools and the Rancher container management platform for an automated, scalable CI pipeline. We were also joined by the devops team at Kloeckner.i who demonstrated their real-world example of the two together.
Docker Online Meetup #22: Docker NetworkingDocker, Inc.
Building on top of his talk at DockerCon 2015, Jana Radhakrishnan, Lead Software Engineer at Docker, does a deep dive into Docker Networking with additional demos and insights on the product roadmap.
This document provides an introduction and overview of Node.js and MongoDB. It discusses that Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine that uses an event-driven, non-blocking I/O model. It can be used for real-time applications and is well-suited for I/O-intensive applications. MongoDB is also introduced as a popular JSON-based NoSQL database that can be easily used with Node.js applications. Examples are given for connecting to MongoDB from Node.js code.
SpringBoot with MyBatis, Flyway, QueryDSLSunghyouk Bae
This document provides an overview and tutorials for using MyBatis with Spring Boot. It introduces the mybatis-spring-boot-starter dependency, and covers setting up MyBatis mappers using annotation and XML styles. It also demonstrates MyBatis configuration in Spring Boot, database migrations with Flyway, and MyBatis testing. Additional sections explain concepts like repositories, Java configuration, and using QueryDSL with MyBatis.
A brief overview of the significance of API Gateways in microservices architecture by providing Kong as an example.
Slide 2: Monolith Vs Microservices
Monolith:
Pros-
Simple to implement
Less integration test - easy to test
Easy to ship
Fast development
Cons-
Violates Open-Close principle
Nightmare when it comes to managing the code
Difficult to enhance
Bigger artifacts
Hard to replace individual components like DB, Logger etc.
Microservices-
Pros-
Easy to manage
One reason to change
Dynamic scaling
Single responsibility
Cons-
Multiple points of failure
Hard to test - rich integration tests required
Heterogeneity in infrastructure
Slide 3: API Gateway Pattern
It is microservices design pattern.
An API gateway is a service which is the entry point into the application from the outside world. It’s responsible for request routing, API composition, and other functions, such as authentication.
There are a lot of issues when client is talking to multiple components to get the job done. These include multiple proxies at client side, different logic to handle different calls, client needs to know the implementation details of server.
A much better approach is for a client to make a single request to what’s known as an API gateway. An API gateway is a service which is the single entry-point for API requests into an application. It’s similar to the Facade pattern from object-oriented design. Like a facade, an API gateway encapsulates the application’s internal architecture and provides an API to its clients. It might also have other responsibilities, such as authentication, monitoring, and rate limiting.
These are also termed as BFF - Backend For Frontend
Slide 4: API Gateway in Action
It acts as a “backend for the frontend”. The clients do not know which services they are talking to. They communicate with a single interface - API Gateway. The gateway resolves the client requests and distributes them to respective services.
Slide 7: Kong Architecture
Kong is a cloud-native, fast, scalable, and distributed Microservice Abstraction Layer (also known as an API Gateway, API Middleware or in some cases Service Mesh). Made available as an open-source project in 2015, its core values are high performance and extensibility.
Actively maintained, Kong is widely used in production at companies ranging from startups to Global 5000 as well as government organizations.
Docker is a platform for building, shipping and running applications. It provides lightweight virtual containers that allow applications to run consistently regardless of environment. Key Docker concepts include images, containers, Docker Engine and tools like Docker Compose and Docker Machine. The document then provides steps for setting up WordPress and Laravel projects using Docker, including using Docker Compose to define services and Docker Machine to provision and manage Docker hosts.
The document introduces Docker, a container platform. It discusses how Docker addresses issues with deploying different PHP projects that have varying version requirements by allowing each project to run isolated in its own container with specified dependencies. It then covers key Docker concepts like images, containers, linking, exposing ports, volumes, and Dockerfiles. The document highlights advantages of Docker like enabling applications to run anywhere without compatibility issues and making deployment more efficient.
Introduction to Kubernetes and Google Container Engine (GKE)Opsta
Kubernetes is an open-source system for automating
deployment, scaling, and management of containerized
applications. This presentation will show you overview of Kubernetes concept and benefit with Google Container Engineer (GKE)
GDG DevFest Bangkok 2017 at Ananda UrbanTech FYI Center on October 7, 2017
See Facebook Live here
https://www.facebook.com/gamez.always/videos/10204052467627401/
※다운로드하시면 더 선명한 자료를 보실 수 있습니다.
PAYCO 쇼핑의 아키텍처를 MSA로 변경하면서 겪은 삽질을 공유합니다.
레거시 서비스에서 서비스를 분리해내는 방법과 순서, 이후 고려해야 할 사항을 공유하고자 합니다.
목차
1. PAYCO 쇼핑?
2. 프로젝트 진행 과정
3. 아키텍처 공유
대상
- MSA, Spring cloud, Docker, Ansible 등을 실무에 적용하는 방법에 관심이 있는 분
- Spring Cloud를 써서 MSA로 개발하고 싶은데 어디서부터 손대야 할지 모르는 분
■관련 동영상: https://youtu.be/l195D5WT_tE
We start with an introduction to what Apache Camel is, and how you can use Camel to make integration much easier. Allowing you to focus on your business logic, rather than low level messaging protocols, and transports. You will also hear what other features Camel provides out of the box, which can make integration much easier for you.
We look into web console tooling that allows you to get insight into your running Apache Camel applications, which has among others visual route diagrams with tracing/debugging and profiling capabilities. In addition to the web tooling we will also show you other tools in the making.
효율적 모바일 서비스를 위한 AWS 빌딩블럭 - API Gateway 및 Device Farm을 중심으로 (윤석찬, AWS 테크에반젤리스트)Amazon Web Services Korea
AWS 월간 웨비나 8월 녹화 동영상은 아래 링크를 참고하십시오.
https://aws.amazon.com/ko/blogs/korea/category/webinar/
---
모바일 시장이 확대됨에 따라 적은 비용으로 더 빠르게 모바일 사용자를 대상으로 한 모바일 앱 및 웹 서비스를 개발하는 것이 점차 더 중요해지고 있습니다.
이 강연에서는 AWS가 제공하는 Amazon Cognito, Mobile Analytics 및 SNS 등 모바일 서비스들과 SDK를 통해 더 빠르게 모바일 서비스를 개발해 사용자의 요구 사항에 대응하고 확장성을 갖춘 모바일 앱을 만드는 방법에 대해알아봅니다.
또한, AWS Lambda라는 클라우드 함수를 이용한 손쉬운 비지니스 로직 구현, 새로 나온 Amazon DeviceFarm을 통한 자동화된 앱 테스트 및 Amazon API Gateway를 통한 모바일 백엔드 구축 방법 등 서버 없이도 효율적인 모바일 서비스 아키텍처를 구성하는 방법을 알려드립니다
이준영 (현 소프트웨어인라이프 연구원)
OpenShfit와 CSB.IO
인프라 비용을 절감하고 애플리케이션 개발속도를 향상 시킬 수 있는 방안으로 PaaS와 레드햇의 오픈 소스 솔루션인 OpenShift에 대하여 설명한다.
그리고, CSB.IO와 OpenShift의 미래 모습에 대해서도 소개한다.
- The Cloud Life Seminar 2014 발표 내용
이번 월간 웨비나에서는 AWS 클라우드를 통해 어떻게 손쉽게 소프트웨어를 개발하고, 배포하는 과정을 자동화 할 수 있는지를 알아 봅니다. 이를 위해 Amazon.com의 소프트웨어 개발 과정 상의 경험과 이를 토대로 만들어진 AWS CodeDeploy와 CodePipeline 서비스를 소개해 드리고, 이를 통해 EC2 인스턴스 뿐만 아니라 기존 서버에 손쉽게 배포하는 방법을 알려드립니다. 본 세션을 통해 클라우드를 통한 민첩하고 빠른 개발 및 배포를 통해 진화된 데브옵스(DevOps) 프로세스를 정립할 수 있는 방법을 안내해 드립니다.
[네이버오픈소스세미나] Pinpoint를 이용해서 서버리스 플랫폼 Apache Openwhisk 트레이싱하기 - 오승현NAVER Engineering
네이버 오픈소스 세미나 - Performance does matter
2019.07.11
<세션 요약>
네이버 서비스에서 사내 서버리스 플랫폼까지 흘러가는 트랜잭션을 추적하고 분석하기 위해 개발한 Pinpoint의 Apache Openwhisk 플러그인과 그 개발 과정을 소개합니다.
Apache Openwhisk는 서버리스 플랫폼을 구축할 수 있는 오픈소스 프로젝트로 스칼라 언어와 Akka 라이브러리를 사용한 Actor 모델에 기반하고 있습니다. 스칼라 언어로 작성된 애플리케이션을 위한 Pinpoint 플러그인을 만들면서 겪었던 문제들과 해결했던 과정들을 위주로 설명드릴 예정입니다.
<연사 소개>
네이버에서 Serverless 플랫폼을 개발하고 있으며, 다양한 오픈소스 프로젝트에 관심이 많습니다.
Apache Openwhisk contributor로 활동하면서, Openwhisk 기반 서버리스 플랫폼의 트레이싱을 위한 Pinpoint 플러그인을 개발하고 컨트리뷰션을 진행하고 있습니다.
클라우드 컴퓨팅 기반 기술과 오픈스택(Kvm) 기반 Provisioning Ji-Woong Choi
TTA에 KVM 기반 프로비저닝 기술에 대한 데모 세션을 포함하는 세미나 관련 자료입니다. 클라우드환경으로 가고자 해서 Paas를 어떤 플랫폼위에 올린다면 그리고 가상화 환경이나 클라우드 환경으로 올린다면 어떤 환경으로 올릴것인가를 고민하여야 합니다.
그리고 이 hypervisor중에 cloud 환경에서 가장 주목받는 kvm을 기반으로 하는 두가지 가상화 클라우드 솔루션인 rhev와 openstack을 잠시 살펴볼 것입니다.
그리고 이러한 가상화 클라우드 환경에서 자동화 하는 솔류션을 어떻게 고려해야 하는가를 살펴보고, 그런 솔류션중에 하나인 아테나 피콕에 대해 살펴보겠습니다.
그리고 오픈스택환경하에서 구축해서 사용했던 사용기와 이를 자동화하기위해 개발자들이 사용했던 간단한 ansible provisioning 모습을 시연합니다.
"왕초보의 앱 확장 프로그램 개발 입문하기"
iOS 개발자의 친구, Safari와 Xcode의 확장 프로그램을 써보신 적 있나요? 꼭 Safari와 Xcode가 아니어도 확장 프로그램을 써본 경험은 있을 거예요. 개발하다 필요한 순간에 코드 스냅샷을 찍거나 웹 사이트 번역을 하거나 팝업창을 띄운다던가... 이런 경험들 말이죠.
이러한 사용 경험을 개발 경험으로 바꾼다면 어떨까요?
이 세션에서는 Safari Extension과 Xcode Extension을 만드는 과정을 간단하게 공유해 드리려고 합니다. 과자 먹듯이 가볍게 들어주세요!
-------------
Let's Swift 2022 의 '우당탕탕! Safari Extensiond에서 Xcode Extension까지' 세션의 발표자료입니다.
(2022-11-30)
Similar to Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석) (20)
2. 목차
•1. PWA 개요
•2. 설치 가능하게 만들기
•3. 서비스 워커
•4. Web Push Notification
•5. 오프라인 실행 지원
3. • 프로그레시브 웹 앱(PWA)은 새롭게 떠오르는 웹 브라우저 API를
전통적인 점진적 향상(progressive enhancement) 기법과
함께 사용해서 네이티브 앱에 필적하는 사용자 경험을 제공하는
크로스 플랫폼 웹 애플리케이션을 말합니다. - MDN -
1. PWA 개요
1) PWA 정의
네이티브 앱에
서
만 구현할 수 있던 기능을
점진적으로 웹 기술로 구현
•점진적 향상(progressive enhancement)
4. 모든 코드를 실행할 수 있는 최신 브라우저 사용자에게는 가능한
최고의 경험을 제공하면서 이전 브라우저를 포함한 가능한 많은
사용자들에게도 필수 기능과 콘텐츠를 제공하려는 디자인 철학
크로스 브라우징 지원
progressive enhancement
기능 탐지 및 폴리필
progressive enhancement란
5. 크로스 브라우징 확인
progressive enhancement
https://www.browserstack.com/
브라우저 호환성 표 확인
https://caniuse.com/
CanIUse
BrowserStack
기기별, 브라우저별 크로스 브라우징
원격 시뮬레이팅하는 테스트 도구
(1분씩 무료, 로컬 가능)
7. 3) 활용 사례(Twitter Lite)
1. PWA 개요
mobile.twitter.com
구글플레이스토어 앱 설치
빠른 속도
데이터를 덜 사용
저장공간도 덜 차지
푸시 알림
오프라인 실행 지원
세션당 페이지 수 65% 증가
보
낸
트윗 75% 증가
이탈률 20% 감소
출처: https://web.dev/twitter/
8. 3) 활용 사례(많은 앱들이 네이티브 앱 외에도 PWA를 추가 지원)
1. PWA 개요
https://appsco.pe
https://www.pwastats.com
PWA 예시 확인
9. 1) Manifest 설정
2. 설치 가능하게 만들기
Web App Manifest는 브라우저에게
데스크톱이나 모바일 기기에
설치할 때 어떻게 작동해야 하는지
알려주는 JSON 형식의 파일
macOS iOS
10. 1) Manifest 설정
2. 설치 가능하게 만들기
manifest.json 파일을 최상위 디렉터리에 만든다.
index.html의 head 태그 내에 다음과 같은 링크 태그를 추가한다.
<link rel="manifest" href="manifest.json" />
11. 2) manifest.json의 구성요소
2. 설치 가능하게 만들기
background_color
theme_color
icons
name
short_name
description
orientation
display
display_override
scope
start_url
categories
screenshots
prefer_related_applications
related_applications
protocol_handlers
share_target
shortcuts
https://developer.mozilla.org/en-US/docs/Web/Manifest
12. 2. 설치 가능하게 만들기
MDN
https://developer.mozilla.org/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json
Goolge Developers
https://web.dev/add-manifest/
13. 2. 설치 가능하게 만들기
3) 바로가기 추가 - Manifest(shortcuts)
manifest.json
14. 2. 설치 가능하게 만들기
4) 공유 대상 되기 - Manifest(share_target)
설치된 PWA가
시스템의 share dialog에
서
share target이 되도록 설정
manifest.json
15. 2. 설치 가능하게 만들기
5) 커스텀 설치 버튼 만들기
기본 설치 버튼
InApp 커스텀 설치 버튼
16. 2. 설치 가능하게 만들기
5) 커스텀 설치 버튼 만들기
any.js
beforeInstallPrompt 이벤트
설치 prompt 표시 전 감지
설치 prompt 표시안되도록 지
연
하고
변수에 BeforeInstallPromptEvent를 저장
BeforeInstallPromptEvent.prompt()
설치 prompt 표시
17. 6) 예외 - iOS에
서
설치
2. 설치 가능하게 만들기
iOS에
서
는 설치 prompt가
아직 지원되지 않음
18. 1) 별도의 워커 스레드에
서
동작하는 특징
3. 서비스 워커
서비스워커
워커스레드
푸시서비스
캐시
백그라운드
오프라인
페이지가 닫혔더라도 또는 오프라인이어도 서비스워커는 계속 동작
웹페이지
메인스레드
User Agent
(웹브라우저)
푸시 알림 표시
Fetch 응답
19. 2) 서비스 워커 등록
3. 서비스 워커
navigator.serviceWorker.register()
서비스워커의 scriptURL을 전달하여
서비스 워커 등록
index.js
20. 3) 생명주기
3. 서비스 워커
Installing
Installed/
waiting
Activating Activated Redundant
register된 서비스워커는 위와 같은 생명주기를 거친다
21. Activated
3) 생명주기
3. 서비스 워커
Installed/
waiting
Activating Redundant
Installing
서비스 워커의 업데이트가 발견되는 경우 설치
(업데이트 여부는 기존 서비스 워커 파일과의 바이트 단위 비교
결
과에 따름)
Installing
23. Installing Activated
3) 생명주기
3. 서비스 워커
Redundant
대기중인 서비스워커
활성화하는 방
법
Activating
Installed/
waiting
1. 기존 서비스워커가 제어하는 웹페이지 닫기
2. 개발자도구에
서
skipWaiting 직접 누르기
3. install 이벤트 내 self.skipWaiting() 호출
26. 3) 생명주기
3. 서비스 워커
Installing
Installed/
waiting
Activating Redundant
Activated
Activated
Acitvated되어 클라이언트를 제어하게 되면
fetch, sync, push 등의 기능 이벤트 제어 가능
27. Activated
3) 생명주기
3. 서비스 워커
Installing
Installed/
waiting
Activating
Redundant
새로운 서비스 워커로 대체되었을 때
곧 소
멸
될 서비스 워커의 상태
Redundant
28. 4) 서비스 워커를 통해 처리할 수 있는 이벤트
3. 서비스 워커
푸시 알림 관
련
이벤트
push
pushsubscriptionchange
notificationclick
notificationclose
서비스 워커 설치 관
련
이벤트
install
activate
네트워크 요청 관
련
이벤트
fetch
백그라운드 동기화 관
련
이벤트
sync
클라이언트와 통신 관
련
이벤트
message
29. 1) 백그라운드에
서
도 알림 수신
4. Web Push Notification
사용자의 재참여를
유도하는 데 유용한
built-in 자바스크립트만으로도 구현 가능
푸시 알림
30. 2) Web Push의 브라우저 호환성 - 2022년 현재
4. Web Push Notification
31. iOS의 웹 푸시 지원 계획
4. Web Push Notification
출처 : https://www.apple.com/ios/ios-16-preview/features/
2023년 iOS 16 safari에
서
Web Push Notification 지원 예정
32. 2) Web Push와 브라우저 호환성 - 2023년 예정
4. Web Push Notification
Linux
W
indow
s
m
acO
S
Android
iO
S
33. 3) Web Push Protocol 개요
4. Web Push Notification
클라이언트
푸시 서비스
서버 서비스워커 User Agent
(웹브라우저)
푸시 알림 표시
(백그라운드)
34. 4) 푸시 서비스 - FCM
4. Web Push Notification
푸시 메시지를 클라이언트(브라우저)로 전달하는 기능을 담당
Firebase 클라우드 메시징(FCM)
메시지를 안정적으로 무료 전송할 수 있는
크로스 플랫폼 메시징 솔루션
35. 5) 알림 구독 과정
4. Web Push Notification
클라이언트
푸시 서비스
서버
3
.
구
독
정
보
를
응
답
P
u
s
h
S
u
b
s
c
r
i
p
t
i
o
n
공개키 암호화 방식 사용
(VAPID 인증 방식)
(브라우저)
4. 구독 정보 전달
POST API 요청
public
private
1. 공개키 전달 public
2
.
구
독
요
청
공
개
키
를
담
아
서
p
u
s
h
M
a
n
a
g
e
r
.
s
u
b
s
c
r
i
b
e
(
)
p
u
b
l
i
c
public
private
38. 6) 푸시 메시지 전송 과정
4. Web Push Notification
클라이언트
푸시 서비스
서버
(브라우저)
A
.
푸
시
메
시
지
전
송
메시지를 비공개 키로 암호화 후 전송
private
B
.
푸
시
메
시
지
전
송
public
공개키로 검증 후 메시지 전송
public
private
public
private
39. Push Event / showNotification() - "똑똑똑. 알림 왔어요"
4. Web Push Notification - Push API
registration.showNotification()
서비스워커가 알림 표시
백그라운드에
서
푸시서비스로부터
오는 푸시메시지 감지
notificationClick 이벤트
푸시 알림이 클릭되었을 때
clients.openWindow()
전달된 url의 새 윈도우 열기
•push 이벤트
serviceWorker.js
41. Cache Storage API
5. 오프라인 실행 지원
•- 코드 기반 접근 방식으로서 개발자가 캐시 내용을 완벽하게 제어 가능
•- 서비스워커를 통해 제어할 수 있어 오프라인에
서
도 해당 캐시 사용 가능
•- 웹페이지 구성을 위한 기본적이며 정적인 구성 요소인 App Shell 캐싱
• 하는데 주로 사용 (html, css, js)
리소스 캐싱, 캐시 응답, 캐시 삭제
42. 1) 리소스 캐싱하기
5. 오프라인 실행 지원 - Cache Storage
•caches.open()
• Cache.addAll()
•install 이벤트
• 서비스워커 등록되어
설치될 때
한번만 발생
• caches.open()
• - 첫 번째 인자로 문자
열
로 된 캐시 이름을 전달하여
해당되는 캐시를 열거나
존
재하지 않는 경우 새로운 캐시를 생성
• - Cache
객
체를 resolve하는 프로미스를 반환
• Cache.addAll()
• - 리소스 요청 문자
열
값으로 구성된 배열을 인자로 받아 모든 리소스를 캐시 스토리지에 캐싱
•
44. 2) 캐시에
서
응답하기
5. 오프라인 실행 지원 - Cache Storage
• event.respondWith()
• - 브라우저의 기본 요청을 막고 서비스 워커에
서
리소스를 대신 응답하는 메소드
• caches.match()
• - 인자로 전달된 URL 문자
열
이나 Request가 캐시된 Response의 key와 일치하는지 확인
• - 캐시에
서
리소스를 찾으면 Response에 대한 프로미스를 반환
•caches.match()
•fetch 이벤트
• event.respondWith()
• Cache First 전략
•
먼
저 캐시에
서
응답하고
• 없으면 네트워크 요청하여 응답
• 웹페이지에
서
네트워크
요청을 수행할 때 발생
serviceWorker.js
46. 3) 불필요한 캐시 삭제하기
5. 오프라인 실행 지원 - Cache Storage
•caches.keys()
•activate 이벤트
•caches.delete()
• 캐시 스토리지의 모든 캐시 목록 배열을
resolve하는 프로미스를 반환
• 메소드의 첫 인자로 캐시 이름을 전달하여
지정한 캐시를 제거
• 새로운 서비스 워커가 활성화될 때 발생
serviceWorker.js
48. •캐싱을 편리하게 돕는 구글의 WorkBox Library
•동적 게시물 캐싱에 적합한 IndexedDB API
•백그라운드 동기화를 위한 sync 이벤트
•앱 아이콘의 배지 숫자 변경을 위한 Badging API
•다른 앱에 공유하기 위한 Share API
•멀티스레드 간 통신하기 위한 Broadcast Channel API
•위치정보를 얻기 위한 Geolocation API
•블루투스 연결을 위한 Web Bluetooth API
•모바일 연락처 접근을 위한 Contact Picker API
•사용자의 유휴 상태 감지를 위한 Idle Detection API
•다바이스의 파일을 읽고 쓰기 위한 File System Access API
•안드로이드앱 등으로 변환하여 스토어에 배포
웹 앱을 위한 점진적으로 향상되는 다양한 기술들
더 살펴보면 좋을 내용
49. Google - Learn PWA
(https://web.dev/learn/pwa/)
MDN - 프로그레시브 웹 앱
(https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps)
[도서] SNS 앱 예제로 배우는 프로그레시브 웹 앱
iOS 16 preview feature
(https://www.apple.com/ios/ios-16/features/)
Firebase 클라우드 메시징
(https://firebase.google.com/docs/cloud-messaging?hl=ko)
MDN - 점진적 향상
(https://developer.mozilla.org/ko/docs/Glossary/Progressive_Enhancement)
Reference
50. 감사합니다
•1. PWA 개요
•2. 설치 가능하게 만들기
•3. 서비스 워커
•4. Web Push Notification
•5. 오프라인 실행 지원