Search

[WWDC] Meet Web Push for Safari

Meet Web Push for Safari - WWDC22 - Videos - Apple Developer
Bring better notifications to your websites and web apps in Safari on macOS with Web Push. We'll show you how you can remotely send...
https://developer.apple.com/videos/play/wwdc2022/10098/
๐ŸŽ
contents

๋“ค์–ด๊ฐ€๋ฉฐ

Web push : web application user๋“ค์—๊ฒŒ ์›๊ฒฉ์œผ๋กœ notification๋ฅผ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ๊ธฐ๋Šฅ
๋ ๋ง~๐Ÿ”” ํ™”๋ฉด ์˜ค๋ฅธ์ชฝ ์œ„์— webkit.org์˜ ์•Œ๋ฆผ์ด ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค.
์•Œ๋ฆผ์„ ํด๋ฆญํ•˜๋ฉด WebKit์˜ ๊ธ€์ด ์ƒˆ ์ฐฝ์— ์—ด๋ฆฌ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
์งœ์ž”๐Ÿ™Œ
์›น ํ‘ธ์‹œ๋Š” macOS Ventura๋ถ€ํ„ฐ Mac Safari์—์„œ ์ง€์›๋˜๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.
*iOS, iPadOS์—์„œ๋Š” ๋‚ด๋…„๋ถ€ํ„ฐ ์ง€์›์„ ์‹œ์ž‘ํ•  ๊ฑฐ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
๐Ÿ™Œย ์›น ํ‘ธ์‹œ์— ๋Œ€ํ•œ ์ง€์›์ด ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค!
์›น ํ‘œ์ค€์— ๋งž๊ฒŒ ์ฝ”๋”ฉํ•œ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ๊ฒฝ์šฐ์—๋„ Safari์—์„œ ์ž‘๋™ํ•˜๊ฒŒ ํ•˜๋ ค๊ณ  ๋ณ€๊ฒฝํ•  ํ•„์š”๊ฐ€ ์—†์–ด์š”.
*๋ธŒ๋ผ์šฐ์ € ๊ฐ์ง€ ๊ธฐ๋Šฅ์—์„œ Safari๋ฅผ ์ œ์™ธํ•˜์ง€๋งŒ ์•Š๋Š”๋‹ค๋ฉด
โ€ข
browser detection์—์„œ feature detection์œผ๋กœ ์ „ํ™˜ํ•˜๊ธฐ ์ข‹์€ ํƒ€์ด๋ฐ์ž…๋‹ˆ๋‹ค!
โ—ฆ
feature detection ์ตœ๊ณ !
์šฐ๋ฆฌ๋Š” ๋™์ผํ•œ Apple Push Notification Service๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ๋ชจ๋“  Mac๊ณผ iOS ๊ธฐ๊ธฐ์—์„œ ๊ธฐ๋ณธ์ ์ธ ํ‘ธ์‹œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ด์š”.
But, Safari ์‚ฌ์šฉ์ž๋“ค๊ณผ ์—ฐ๊ฒฐ๋˜๊ธฐ ์œ„ํ•ด์„œ๋Š” Apple ๊ฐœ๋ฐœ์ž ๊ณ„์ •์ด ํ•„์š”ํ•˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค.
์šฐ๋ฆฌ๋Š” ์›น ํ‘ธ์‹œ์— ์ƒˆ ์—”๋“œํฌ์ธํŠธ URL๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์˜๋„์น˜ ์•Š๊ฒŒ Safari๋ฅผ ์ œ์™ธํ•˜๋Š” ์ผ์ด ์ƒ๊ธธ ์ˆ˜๋„ ์žˆ์–ด์š”.
์šฐ๋ฆฌ๊ฐ€ ์„œ๋ฒ„ ์—”๋“œํฌ์ธํŠธ๋ฅผ ์—„๊ฒฉํ•˜๊ฒŒ ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ๋‹ค๋ฉด push.apple.com์˜ ๋ชจ๋“  ์„œ๋ธŒ ๋„๋ฉ”์ธ์—์„œ URL์„ ํ—ˆ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

User experience

User์˜ ์‹œ๊ฐ์œผ๋กœ ์›น ํ‘ธ์‹œ ๊ฒฝํ—˜์— ๋Œ€ํ•ด์„œ ์‚ดํŽด๋ณด์ž!
Demo) WebKit open source project๋ฅผ ์ตœ์‹  ์ƒํƒœ๋กœ ์œ ์ง€ํ•ด์•ผ ํ•˜๋Š”๋ฐ ์›น ํ‘ธ์‹œ๊ฐ€ ๊ทธ๊ฑธ ๋„์™€์ค๋‹ˆ๋‹ค.
webkit.org๋Š” ์‚ฌ์šฉ์ž ์ œ์Šค์ฒ˜๋กœ ์š”์ฒญํ•˜์ง€ ์•Š์œผ๋ฉด ํ‘ธ์‹œ ๊ถŒํ•œ์„ ๋ฐ›์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
๊ตฌ๋… ์•Œ๋ฆผ์„ ์œ„ํ•ด ์žˆ๋Š” ์ข… ๋ชจ์–‘์„ ๋ˆŒ๋Ÿฌ๋ณผ๊ฒŒ์š”.
์‹œ์Šคํ…œ ์•Œ๋ฆผ ํ”„๋กฌํ”„ํŠธ๊ฐ€ ๋‚˜์˜ต๋‹ˆ๋‹ค.(๋‹ค๋ฅธ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์—์„œ ๋ณด๋Š” ๊ฒƒ๊ณผ ๋™์ผ)
โ€ข
์ด ๊ฒฝ์šฐ์—๋Š” webkit.org๋ฅผ ๋Œ€์‹ ํ•˜๋Š” ๊ฒ๋‹ˆ๋‹ค.
ํ—ˆ์šฉ์„ ๋ˆ„๋ฅด๋ฉด ์„ธํŒ… ์™„๋ฃŒ ์ž…๋‹ˆ๋‹ค.
webkit.org์—์„œ๋Š” ์ƒˆ๋กœ์šด ๋ธ”๋กœ๊ทธ ๊ธ€์— ๋Œ€ํ•ด ์•Œ๋ฆผ๊ณผ ์†Œ์Šค ์ฝ”๋“œ ์ €์žฅ์†Œ์— ๋Œ€ํ•œ ์•Œ๋ฆผ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋ˆ„๊ตฐ๊ฐ€ WebKit ๋ธ”๋กœ๊ทธ์— ์›น ํ‘ธ์‹œ ๊ด€๋ จํ•ด์„œ ๊ธ€์„ ์˜ฌ๋ ธ๋„ค์š”! ๐Ÿ™Œ๐Ÿ‘€
์›น ํ‘ธ์‹œ ์•Œ๋ฆผ์€ ๋‹ค๋ฅธ ์•Œ๋ฆผ๊ณผ ๋˜‘๊ฐ™์ด ํ‘œ์‹œ๋˜๊ณ  webkit.org๊ฐ€ ๋ณด๋‚ธ ๊ฒƒ์œผ๋กœ ์—ฌ๊ฒจ์ง‘๋‹ˆ๋‹ค.
ํ‘ธ์‹œ ์•Œ๋ฆผ์„ ๋ˆŒ๋Ÿฌ์„œ webkit.org ๋ธ”๋กœ๊ทธ๋ฅผ ์—ด์–ด๋ดค์Šต๋‹ˆ๋‹ค.
์‚ฌ์šฉ์ž๊ฐ€ ์›น ์‚ฌ์ดํŠธ์— ๋Œ€ํ•œ ํ†ต์ œ๊ถŒ์„ ๋ถ€์—ฌ๋ฐ›์œผ๋ฉด ๊ทธ ๊ถŒํ•œ์— ๋Œ€ํ•œ ํ†ต์ œ๊ถŒ์ด ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.
macOS ์‚ฌ์šฉ์ž๋กœ์„œ ์‹œ์Šคํ…œ ์„ค์ •์—์„œ ์•Œ๋ฆผ ์„ค์ •์„ ๊ด€๋ฆฌํ•˜๋Š”๋ฐ ์ต์ˆ™ํ•ด์š”.
์—ฌ๊ธฐ์—์„œ webkit.org์˜ ์•Œ๋ฆผ์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์–ด์š”.
Safari ์‚ฌ์šฉ์ž๋กœ์„œ preference์—์„œ ์•Œ๋ฆผ ์„ค์ •์„ ๊ด€๋ฆฌํ•˜๋Š”๋ฐ๋„ ์ต์ˆ™ํ•ด์š”.
์—ฌ๊ธฐ์„œ๋„ webkit.org์˜ ๊ถŒํ•œ์„ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ํ•ด์ œํ•  ์ˆ˜ ์žˆ์–ด์š”.
์ด๊ฒŒ ์›น ํ‘ธ์‹œ๊ฐ€ Mac Safari์—์„œ ์ž‘๋™ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.
๐Ÿ“–
Things to remember
โ€ข
Permission requires a user gesture
โ—ฆ
์šฐ๋ฆฌ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์š”์ฒญํ•˜์ง€ ์•Š์€ ๊ตฌ๋… ์š”์ฒญ์— ์˜ํ•ด ์ŠคํŒธ ์ฒ˜๋ฆฌ๊ฐ€ ๋˜๋Š” ๊ฑธ ์›์น˜ ์•Š์•„์š”. ๋”ฐ๋ผ์„œ ์›น ์‚ฌ์ดํŠธ์—์„œ๋Š” ํ‘ธ์‹œ ๊ตฌ๋… ์š”์ฒญ๋งŒ ํ•  ์ˆ˜ ์žˆ์Œ
โ—ฆ
๋งˆ์šฐ์Šค ํด๋ฆญ์ด๋‚˜ ํ‚ค๋ณด๋“œ ํƒ€๊ฑด์— ๋ฐ˜์‘
โ€ข
User control notifications
โ—ฆ
์›น ์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์•Œ๋ฆผ์„ ํ‘œ์‹œํ•  ๊ถŒํ•œ์ด ์ƒ๊ธฐ๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ๊ทธ ๊ถŒํ•œ์„ ์ œ์–ดํ•จ
โ—ฆ
Safari ์„ค์ •์ด๋‚˜ ์‹œ์Šคํ…œ ์„ค์ •์—์„œ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Œ
โ—ฆ
๋‘ ๊ตฐ๋ฐ์—์„œ ์ œ์–ดํ•˜๋Š” ๊ฒฝ์šฐ ์„ค์ •์€ ๋™๊ธฐํ™”๋œ ์ฑ„๋กœ ์œ ์ง€๋จ
โ€ข
You provide fine-grained controls
โ—ฆ
๋‹ค์–‘ํ•œ ์œ ํ˜•์˜ ์ด๋ฒคํŠธ์— ์•Œ๋ฆผ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒฝ์šฐ, ์„ธ๋ฐ€ํ•˜๊ฒŒ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒŒ ์ข‹์Œ
โ–ช
์›น ์•ฑ ๋‚ด์˜ ์•Œ๋ฆผ ์œ ํ˜•์— ๋Œ€ํ•ด์„œ

Web push flow

์›น ํ‘ธ์‹œ์˜ ์ „์ฒด์ ์ธ ํ๋ฆ„ ๋‹ค๋ฃจ๊ธฐ: ๊ถŒํ•œ์„ ์š”์ฒญํ•˜๋Š” ๊ฒƒ๋ถ€ํ„ฐ ์•Œ๋ฆผ ์„ผํ„ฐ์—์„œ ํ•ญ๋ชฉ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ๊นŒ์ง€!
Demo) ์‚ฌ์šฉ์ž๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ํƒญ์—์„œ ์‚ฌ์ดํŠธ๋ฅผ ๋ฐฉ๋ฌธํ•˜๋Š” ๊ฒฝ์šฐ๋ฅผ ๋ด…์‹œ๋‹ค.
Safari์—์„œ webkit.org๋ฅผ ์—ด์—ˆ์Šต๋‹ˆ๋‹ค.
ํƒญ์ด ์—ด๋ ธ๊ธฐ ๋•Œ๋ฌธ์— Service Worker๋ฅผ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์–ด์š”.
Service Worker?
Service Worker ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์„ค์น˜๋˜๋ฉด ์›น ์•ฑ์—์„œ ํ‘ธ์‹œ ๊ตฌ๋… ์š”์ฒญ์„ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด ์š”์ฒญ์€ ์‚ฌ์šฉ์ž ์ œ์Šค์ฒ˜์™€ ์—ฐ๊ฒฐ๋˜์–ด์•ผ ํ•ด์š”.
webkit.org๋Š” ์ข… ๋ชจ์–‘์„ ๋ˆŒ๋Ÿฌ ํ—ˆ๊ฐ€๋ฅผ ์š”์ฒญํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์‚ฌ์šฉ์ž ์ œ์Šค์ฒ˜ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑ์‹œํ‚ต๋‹ˆ๋‹ค.
๊ตฌ๋…ํ•˜๊ธฐ๋ฅผ ๋ˆ„๋ฅด๋ฉด ์‹œ์Šคํ…œ ํ”„๋กฌํ”„ํŠธ๊ฐ€ ๋œจ๋Š”๋ฐ ์‚ฌ์šฉ์ž๋Š” ์—ฌ๊ธฐ์„œ ์ตœ์ข… ๊ฒฐ์ •์„ ํ•˜๊ณ  ์ด ์›น ์‚ฌ์ดํŠธ์— ๊ฐ•ํ•œ ๊ถŒํ•œ์„ ๋ถ€์—ฌ๋ฐ›์•„์š”.
But, ์‚ฌ์šฉ์ž๊ฐ€ ๊ฑฐ์ ˆ์„ ํ•  ์ˆ˜๋„ ์žˆ๋Š”๋ฐ, JavaScript๋„ ๋Œ€์ฒ˜ํ•  ์ค€๋น„๊ฐ€ ๋˜์–ด ์žˆ์–ด์•ผ ํ•ด์š”.
ํ•˜์ง€๋งŒ ์‚ฌ์šฉ์ž๊ฐ€ ๊ถŒํ•œ์„ ๋ถ€์—ฌํ–ˆ๋‹ค๊ณ  ํ•˜๋ฉด PushSubscription ๊ฐ์ฒด๋ฅผ JavaScript๊ฐ€ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
๋ธŒ๋ผ์šฐ์ €์— ์žˆ๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ์„œ๋ฒ„์—์„œ ๋ณด๋‚ด๋Š” ํ‘ธ์‹œ ๋ฉ”์‹œ์ง€์— ํ•„์š”ํ•œ ๋ชจ๋“  ํ•ญ๋ชฉ์ด ํฌํ•จ๋˜์–ด ์žˆ์–ด์š”.
โ€ข
URL ์—”๋“œํฌ์ธํŠธ ๊ฐ™์€ ์ •๋ณด ํฌํ•จ
PushSubscription ํŽ˜์ด๋กœ๋“œ๋ฅผ ์›น ์•ฑ์„ ์œ„ํ•ด ๊ฐ€์žฅ ์ ํ•ฉํ•œ ๋ฐฉ์‹์œผ๋กœ ์„œ๋ฒ„๋กœ ๋‹ค์‹œ ๋ณด๋ƒ…๋‹ˆ๋‹ค.
์ธ๊ธฐ ์žˆ๋Š” ์„œ๋ฒ„ ํŒจํ‚ค์ง€๋“ค์€ ๊ตฌ๋… ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด ์›น ํ‘ธ์‹œ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์•„๋‹ˆ๋ฉด ์ง์ ‘ ๊ด€๋ฆฌํ•  ์ˆ˜๋„ ์žˆ์ฃ !
ํ‘ธ์‹œ ๋ฉ”์‹œ์ง€๋ฅผ ์„œ๋ฒ„์— ๊ธฐ๋ก๋œ URL ์—”๋“œํฌ์ธํŠธ๋กœ ๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•๊ณผ ์‹œ๊ฐ„์—๋„ ๋™์ผํ•˜๊ฒŒ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.
โ€ข
์‹œ๊ธฐ๋Š” ์‚ฌ์šฉ์ž์™€ ์›น ์‚ฌ์ดํŠธ์— ๋‹ฌ๋ ค ์žˆ์–ด์š”.
ํ‘ธ์‹œ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋‚ด๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค๋ฉด!
ํ‘ธ์‹œ๋ฅผ ๋ณด๋‚ผ ๋•Œ Service Worker๊ฐ€ ์–ผ๋งˆ๋‚˜ ํ•„์š”ํ•œ์ง€ ๊ธฐ์–ตํ•˜์‹œ๋‚˜์š”?
โ€ข
์„œ๋ฒ„์—์„œ ํ‘ธ์‹œ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋‚ด๊ณ 
โ€ข
Safari๊ฐ€ ๊ทธ๊ฑธ ์ˆ˜์‹ 
โ€ข
Safari์—์„œ Service Worker๋ฅผ ๊นจ์šฐ๊ณ 
โ€ข
JavaScript ํ‘ธ์‹œ ์ด๋ฒคํŠธ๋กœ ๊ทธ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋ƒ„
โ€ข
์•Œ๋ฆผ ์„ผํ„ฐ์—์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์•Œ๋ฆผ์„ ๋ณด์—ฌ ์ฃผ๋Š” ๊ฑด ํ‘ธ์‹œ ์ด๋ฒคํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•  ๋•Œ ํ•„์ˆ˜์ 
ํ‘ธ์‹œ ์ด๋ฒคํŠธ ๋ฐ ์•Œ๋ฆผ ์ฐฝ์€ ํ˜„์žฌ ์›น ์‚ฌ์ดํŠธ๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ํƒญ์— ์—ด๋ ค ์žˆ๋Š” ๊ฒฝ์šฐ ๋ณด์—ฌ์ง‘๋‹ˆ๋‹ค.
์›น ์‚ฌ์ดํŠธ๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ํƒญ์— ์—ด๋ ค ์žˆ์ง€ ์•Š์•„๋„ ๋ณด์—ฌ์ง‘๋‹ˆ๋‹ค.
macOS Ventura์— ์žˆ๋Š” Safari์˜ ๊ฒฝ์šฐ, Safari๊ฐ€ ์‹คํ–‰ ์ค‘์ด ์•„๋‹ ๋•Œ๋„ ์ด๋Ÿฐ ์ผ์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
์‚ฌ์šฉ์ž๊ฐ€ ํ•ด๋‹น ์•Œ๋ฆผ์„ ํด๋ฆญํ•˜๋ฉด notificationclick event ๊ฐ€ Service Worker์— ์ „์†ก๋˜์–ด ์ ์ ˆํ•œ ๋ฐ˜์‘์„ ๋ณด์ด๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
โ€ข
์˜ˆ๋ฅผ ๋“ค์–ด, ์ƒˆ ์ฐฝ์„ ์—ด ๋•Œ ํ•ด๋‹น ์•Œ๋ฆผ๊ณผ ๊ด€๋ จ๋œ URL๋กœ ์ด๋™ํ•˜๋Š” ๊ฑฐ

Implementation details

๊ธฐ์กด ์›น ์•ฑ์— ์›น ํ‘ธ์‹œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๊ฒƒ ์•Œ์•„๋ณด์ž!
ํ๋ฆ„์„ ๋” ์ž˜ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์„ ์•Œ์•„๋ณด์ฃ . ์›น ํ‘ธ์‹œ ์ง€์› ๊ธฐ๋Šฅ์„ ๊ธฐ์กด ์›น ์•ฑ์— ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒ๋‹ˆ๋‹ค.
Demo) Browser Pets ์‚ฌ์ดํŠธ์—์„œ ๊ท€์—ฌ์šด ๋™๋ฌผ ์นœ๊ตฌ๋“ค์„ ๋ฐ›๊ณ  ์‹ถ์–ด!
BrowserPets ๋„๋ฉ”์ธ์— ServiceWorker ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์กด์žฌ โ†’ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„๋ฅผ ๋†’์ด๊ณ  ์—ฌ๋Ÿฌ ํƒญ์„ ๋™๊ธฐํ™”
๋” ์ƒ์œ„ ๋ ˆ๋ฒจ๋กœ ๊ฐ€๊ฒŒ ๋˜๋ฉด,
์—”์ง€๋‹ˆ์–ด๊ฐ€ Browser Pets ํŽ˜์ด์ง€๋ฅผ ๋ฐฉ๋ฌธํ•˜๋ฉด ์ด JavaScript๋Š” Service Worker ์Šคํฌ๋ฆฝํŠธ๊ฐ€
โ€ข
์ด๋ฏธ ๋“ฑ๋ก๋œ ๊ฒƒ์ธ์ง€ ํ™•์ธ
โ€ข
ํ•„์š”ํ•œ ๊ฒฝ์šฐ๋Š” ๋“ฑ๋ก
์ด๊ฒŒ ๋ฐ”๋กœ feature detection ๋ฐฉ์‹ โ†’ ์ตœ๊ณ ์˜ ๋ฐฉ์‹!!
Service Worker์˜ ์ „์ œ ์กฐ๊ฑด์„ ์ฒ˜๋ฆฌํ•˜๋ฉด ํ‘ธ์‹œ ๊ตฌ๋… ์ค€๋น„๋Š” ๋๋‚œ ๊ฒ๋‹ˆ๋‹ค.
But, ๋ช…ํ™•ํ•œ ์‚ฌ์šฉ์ž ์ œ์Šค์ฒ˜๊ฐ€ ์—†์œผ๋ฉด ํ‘ธ์‹œ ๊ตฌ๋…์„ ์š”์ฒญํ•  ์ˆ˜ ์—†์–ด์š”. ๐Ÿ‘‰
๋ฒ„ํŠผ์„ ๋ˆ„๋ฅธ ๋ฐ ๋Œ€ํ•œ ์‘๋‹ต์œผ๋กœ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ โ†’ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑํ•˜๋Š” ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜
์‚ฌ์šฉ์ž๊ฐ€ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ํ‘ธ์‹œ ๊ตฌ๋… ์š”์ฒญ์„ ์œ„ํ•œ ์ฝ”๋“œ๊ฐ€ ๋œน๋‹ˆ๋‹ค.
1.
ํ‘ธ์‹œ ๊ตฌ๋… ์š”์ฒญ์„ ์„ค์ •
โ€ข
๊ณต๊ฐœ ํ‚ค - Apple์˜ push server๋ฅผ ํ†ตํ•ด ์„œ๋ฒ„ ์‹๋ณ„
โ€ข
๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ VAPID๋ž€ ํ‘œ์ค€ ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•ด์š”.
โ€ข
์›น์—์„œ๋Š” ์„œ๋ฒ„ ์„ค์ •์— ๊ฐ€์žฅ ์ ํ•ฉํ•œ ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•˜๋Š” ๋ฆฌ์†Œ์Šค๊ฐ€ ์žˆ์–ด์š”.
2.
VAPID ์„ค์ •์ด ์™„๋ฃŒ๋˜๋ฉด ๊ตฌ๋… ์š”์ฒญ์„ ๋ณด๋‚ผ ์ค€๋น„๊ฐ€ ๋๋‚จ
โ€ข
ํ‘ธ์‹œ๋Š” ํ•ญ์ƒ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ ธ์š”.
โ—ฆ
JavaScript Push API์˜ ๊ธฐ์ค€์œผ๋กœ ๋ณธ๋‹ค๋ฉด JavaScript runtime์€ ํ‘ธ์‹œ์— ๋Œ€ํ•ด์„œ ์„ ํƒ์ ์œผ๋กœ ์‘๋‹ตํ•˜๋Š” ๊ฑธ ํ—ˆ๋ฝํ•˜์ง€๋งŒ ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
โ—ฆ
Safari์—์„œ๋Š” ๊ทธ ๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜์ง€ ์•Š์•„์š”.
3.
ํ‘ธ์‹œ ํ—ˆ๊ฐ€๋ฅผ ์š”์ฒญ
โ€ข
์ด JavaScript๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์Šน์ธํ•˜๊ฑฐ๋‚˜ ๊ฑฐ์ ˆํ•  ์ˆ˜ ์žˆ๋Š” ๊ถŒํ•œ ํ”„๋กฌํ”„ํŠธ๋ฅผ ์—ฝ๋‹ˆ๋‹ค.
โ€ข
์‚ฌ์šฉ์ž๊ฐ€ ๊ถŒํ•œ์„ ํ—ˆ๊ฐ€ > Push Subscription ๊ฐ์ฒด ์ œ๊ณต
โ—ฆ
URL ์—”๋“œํฌ์ธํŠธ
โ—ฆ
์ „์†ก์„ ์œ„ํ•œ ํ‘ธ์‹œ ๋ฉ”์‹œ์ง€ ์•”ํ˜ธํ™”์— ์‚ฌ์šฉํ•˜๋Š” ํ‚ค
4.
๋ชจ๋“  ์„ธ๋ถ€ ์‚ฌํ•ญ์„ ์šฐ๋ฆฌ ์„œ๋ฒ„๋กœ ์ „์†ก
*์„ธ๋ถ€ ๋‚ด์šฉ์€ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์— ๋”ฐ๋ผ ๋‹ค์–‘ํ•ฉ๋‹ˆ๋‹ค
Service Worker JavaScript ์ฝ”๋“œ ๋‹ค์‹œ ์‚ดํŽด๋ณด๊ธฐ
์ฝ”๋“œ๋ฅผ ๋ณด๋‹ˆ ํ‘ธ์‹œ ์ด๋ฒคํŠธ๋ฅผ ํฌํ•จํ•ด์„œ ์ƒˆ๋กœ์šด ์ด๋ฒคํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•œ๋‹ค.
ํ‘ธ์‹œ ๋ฉ”์‹œ์ง€๊ฐ€ Browser Pets ์„œ๋ฒ„์—์„œ ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €๋กœ ์ „์†ก๋˜๋ฉด Service Worker๊ฐ€ ํ‘ธ์‹œ ์ด๋ฒคํŠธ๋ฅผ ์ „์†กํ•ฉ๋‹ˆ๋‹ค.
โ€ข
์ด๋ฒคํŠธ์—๋Š” Push Message Data ๊ฐ์ฒด๋„ ํฌํ•จ๋จ
โ€ข
์„œ๋ฒ„์—์„œ ๋ณด๋‚ธ ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผํ•˜๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋ฐฉ๋ฒ• ์กด์žฌ
โ€ข
JSON accessor๋ฅผ ์‚ฌ์šฉํ•ด์š”
ํ‘ธ์‹œ ๊ตฌ๋…์„ ํ—ˆ์šฉํ•˜๋ฉด JavaScript๊ฐ€ ํ‘ธ์‹œ๋ฅผ ์‚ฌ์šฉ์žํ•œํ…Œ ๋„์šด๋‹ค๊ณ  ํ–ˆ๋˜๊ฑฐ ๊ธฐ์–ต๋‚จ์š”?
platform native notification์„ ํ•ญ์ƒ ํ‘œ์‹œํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ
โ€ข
why? ํ‘ธ์‹œ๋ฅผ ๋ˆ„๋ฅผ ๋•Œ๋งˆ๋‹ค ๋ฐ˜์‘ํ•˜๋„๋ก
โ€ข
ํ‘ธ์‹œ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์—์„œ ๋นจ๋ฆฌ ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒŒ ์ข‹์Œ
โ€ข
JSON blob์—์„œ ํ•„์š”ํ•œ ๋ชจ๋“  ๊ฑธ ์ˆ˜ํ–‰
โ—ฆ
URL๋กœ ์ž‘์—… ์„ค์ •์„ ํ•˜๋Š” ๊ฒƒ๋„ ํฌํ•จ
์•Œ๋ฆผ์ด ํ‘œ์‹œ๊ฐ€ ๋˜๊ณ  ์‚ฌ์šฉ์ž๊ฐ€ ๊ทธ ์•Œ๋ฆผ์„ ํด๋ฆญํ•˜๋Š” ๊ฑธ ์ฒ˜๋ฆฌํ•ด๋ด…์‹œ๋‹ค.
โ€ข
๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ƒˆ ์ฐฝ์„ ์—ด๊ธฐ ์œ„ํ•ด ํด๋ฆญํ•œ ์•Œ๋ฆผ์˜ URL๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.
์›น ํ‘ธ์‹œ๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ์“ฐ๋Š” JavaScript๋Š” ์ด๊ฒŒ ๋‹ต๋‹ˆ๋‹ค.
๐Ÿ“–
Development and debug practices
โ€ข
Web Inspector
โ—ฆ
๋ธŒ๋ผ์šฐ์ € ํƒญ์—์„œ ์—ฐ ์›น ์‚ฌ์ดํŠธ์˜ ๋””๋ฒ„๊ทธ๋ฅผ ๋•๋Š” ๊ฒƒ ์™ธ์— ์ผ๋„ ํ•จ
โ—ฆ
Service Worker ์ธ์Šคํ„ด์Šค ๊ฒ€์‚ฌ
โ—ฆ
์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์˜ breakpoints๋ฅผ ์„ค์ •
โ—ฆ
JavaScript๋ฅผ ๋””๋ฒ„๊ทธํ•˜๊ณ  ๊ฒ€์‚ฌํ•ด์„œ ํ‘ธ์‹œ๋ฅผ ๋„์šธ ์ˆ˜ ์žˆ์Œ
โ—ฆ
ํ‘ธ์‹œ์™€ ์•Œ๋ฆผ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ ๊ฐ€๋Šฅ
โ€ข
Server errors
โ—ฆ
Apple Push Notification ์„œ๋ฒ„๋Š” ํ‘ธ์‹œ ๋ฉ”์‹œ์ง€๋ฅผ ๋„์šฐ๋ ค๊ณ  ํ•  ๋•Œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ค˜์š”.
์‚ฌ์šฉ์ž์˜ ๊ฐœ์ธ ์ •๋ณด ๋ณดํ˜ธ์™€ ๊ฐ€์šฉ ์ „๋ ฅ์— ๋Œ€ํ•œ ์ฝ”๋“œ ์ž‘์„ฑ์— ๋Œ€ํ•œ ์ด์•ผ๊ธฐ
๐Ÿ“–
Privacy and power
โ€ข
Permission requires a user gesture
โ—ฆ
ํ‘ธ์‹œ ์•Œ๋ฆผ์„ ๋ณด๋ ค๋ฉด ์‚ฌ์šฉ์ž ์ œ์Šค์ฒ˜๊ฐ€ ํ•„์š”
โ—ฆ
์›น ํ”Œ๋žซํผ์˜ ๋‹ค๋ฅธ ํŠน๋ณ„ํ•œ ๊ธฐ๋Šฅ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์‚ฌ์šฉ์ž์˜ ์‹ ๋ขฐ๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด์„œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์›น ํ‘ธ์‹œ์˜ ์‚ฌ์šฉ์„ ์š”์ฒญํ•˜๋„๋ก ์š”๊ตฌํ•ด์•ผ ํ•จ
โ€ข
No silent background runtime
โ—ฆ
์‚ฌ์šฉ์ž์—๊ฒŒ ์•Œ๋ฆผ์„ ๋ณด์—ฌ์•ผ ํ•จ
โ—ฆ
ํ‘ธ์‹œ ์ด๋ฒคํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฑด JavaScript๊ฐ€ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์ž‘๋™๋˜๋กœ๊ณ  ํ•˜๋Š” ๊ฒŒ ์•„๋‹˜
โ–ช
์ด ๋ฐฉ์‹์€ ์‚ฌ์šฉ์ž์˜ ์‹ ๋ขฐ๋„ ์žƒ๊ณ  ๋ฐฐํ„ฐ๋ฆฌ ์ˆ˜๋ช…๋„ ๋‹ณ๊ฒŒ ๋จ..
โ—ฆ
์•Œ๋ฆผ์„ ์ฒ˜๋ฆฌํ•  ๋•Œ๋Š” ์•Œ๋ฆผ ์„ผํ„ฐ์— ์•Œ๋ฆผ์„ ๊ฒŒ์‹œํ•ด์•ผ๋งŒ ํ•จ
โ€ข
Violations result in revoked subscriptions
โ—ฆ
๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €๋“ค์€ ์‚ฌ์šฉ์ž์— ๋Œ€ํ•œ ํ‘ธ์‹œ ํ‘œ์‹œ ๊ทœ์ • ์œ„๋ฐ˜ ๋ฐฉ์นจ์ด ์กด์žฌ
โ–ช
Safari๋„ ๋งˆ์ฐฌ๊ฐ€์ง€ ์ž…๋‹ˆ๋‹ค.
โ—ฆ
macOS Ventura์˜ beta build์—์„  ์„ธ ๋ฒˆ์˜ ํ‘ธ์‹œ ์ด๋ฒคํŠธ ํ›„ ์ ์‹œ์— ์•Œ๋ฆผ์„ ๊ฒŒ์‹œํ•˜์ง€ ์•Š์œผ๋ฉด ์‚ฌ์ดํŠธ์˜ ํ‘ธ์‹œ ๊ตฌ๋…์ด ์ทจ์†Œ๋ฉ๋‹ˆ๋‹ค.
โ–ช
๋‹ค์‹œ ๊ถŒํ•œ์„ ์–ป๋Š” ๊ณผ์ •์„ ์ง„ํ–‰ํ•ด์•ผ๋งŒ ํ•ด์š”.
๋ชจ๋“  ์‚ฌ์ดํŠธ์—์„œ ์จ์ค˜.. Apple ๊ฐœ๋ฐœ์ž ๊ณ„์ •์€ ํ•„์š” ์—†์–ด.. ํ‘œ์ค€์— ๋งž์ถฐ ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  feature detection์„ ์ด์šฉํ•˜๋ฉด ์˜๋„์น˜ ์•Š๊ฒŒ Safari๋ฅผ ์ œ์™ธํ•˜๋Š” ์ผ๋„ ์—†์„ ํ…Œ๊ณ  ์šฐ๋ฆฌ ์•ฑ์˜ ์‚ฌ์šฉ์ž๋“ค์€ macOS Ventura์˜ Safari 16์—์„œ ์›น ํ‘ธ์‹œ์˜ ์ด์ ์„ ๋ˆ„๋ฆฌ๊ฒŒ ๋  ๊ฒƒ์ด์•ผ..