κ³ κΈ μλΉμ€ μ컀 μ λ΅μ ν΅ν΄ κΈλ‘λ² μμ₯μμ λ°μ΄λ μ±λ₯μ λ°ννλ κ³ μ±λ₯, κ³ μ λ’°μ±, μ°Έμ¬λ λμ νλ‘κ·Έλ μλΈ μΉ μ±(PWA)μ ꡬμΆνλ λ°©λ²μ μμ보μΈμ.
νλ‘κ·Έλ μλΈ μΉ μ±: κΈλ‘λ² μ ν리μΌμ΄μ μ μν μλΉμ€ μ컀 μ λ΅ λ§μ€ν°νκΈ°
λμμμ΄ μ§ννλ μΉ κ°λ° νκ²½μμ νλ‘κ·Έλ μλΈ μΉ μ±(PWA)μ μΉ κΈ°μ μ ν΅ν΄ μ ν리μΌμ΄μ κ³Ό μ μ¬ν κ²½νμ μ 곡νλ κ°λ ₯ν μ κ·Ό λ°©μμΌλ‘ λΆμνμ΅λλ€. PWA μ±κ³΅μ ν΅μ¬μλ μ€νλΌμΈ κΈ°λ₯, μ±λ₯ ν₯μ, νΈμ μλ¦Όμ κ°λ₯νκ² νλ μ¨μ 곡λ‘μμΈ μλΉμ€ μμ»€κ° μμ΅λλ€. μ΄ μ’ ν© κ°μ΄λμμλ κ³ κΈ μλΉμ€ μ컀 μ λ΅μ κΉμ΄ νκ³ λ€μ΄, μ μΈκ³ μ¬μ©μμ 곡κ°μ μ»λ κ³ μ±λ₯, κ³ μ λ’°μ±μ λ§€λ ₯μ μΈ PWAλ₯Ό ꡬμΆνλ λ° νμν μ§μκ³Ό κΈ°μ μ μ 곡ν©λλ€.
μλΉμ€ μ컀μ ν΅μ¬ μ΄ν΄νκΈ°
κ³ κΈ μ λ΅μ μ΄ν΄λ³΄κΈ° μ μ κΈ°λ³Έ μ¬νμ λ€μ νλ² μ§μ΄λ³΄κ² μ΅λλ€. μλΉμ€ μ컀λ λ©μΈ μΉ μ ν리μΌμ΄μ κ³Ό λ³κ°λ‘ λ°±κ·ΈλΌμ΄λμμ μ€νλλ μλ°μ€ν¬λ¦½νΈ νμΌμ λλ€. νλ‘κ·Έλλ° κ°λ₯ν λ€νΈμν¬ νλ‘μ μν μ νμ¬ λ€νΈμν¬ μμ²μ κ°λ‘μ±κ³ λ€μμ κ°λ₯νκ² ν©λλ€:
- μ€νλΌμΈ μ κ·Όμ μν μμ° μΊμ±.
- λ€νΈμν¬ μμ² λ° μλ΅ κ΄λ¦¬.
- νΈμ μλ¦Ό ꡬν.
- μ ν리μΌμ΄μ μ±λ₯ ν₯μ.
μλΉμ€ μ컀λ μ¬μ©μκ° PWAλ₯Ό λ°©λ¬Έν λ νμ±νλλ©°, μ§μ μΌλ‘ "μ±κ³Ό κ°μ" κ²½νμ λ¬μ±νλ λ° νμμ μ λλ€.
μ£Όμ μλΉμ€ μ컀 μ λ΅
λͺ κ°μ§ μ£Όμ μ λ΅μ΄ ν¨κ³Όμ μΈ μλΉμ€ μ컀 ꡬνμ κΈ°μ΄λ₯Ό νμ±ν©λλ€:
1. μΊμ± μ λ΅
μΊμ±μ λ§μ PWA μ΄μ μ ν΅μ¬μ λλ€. ν¨κ³Όμ μΈ μΊμ± μ λ΅μ λ€νΈμν¬μμ 리μμ€λ₯Ό κ°μ Έμ¬ νμμ±μ μ΅μννμ¬ λ‘λ© μκ°μ λ¨μΆνκ³ μ€νλΌμΈ κ°μ©μ±μ λμ λλ€. μΌλ°μ μΈ μΊμ± μ λ΅μ λ€μκ³Ό κ°μ΅λλ€:
- μΊμ μ°μ (Cache-First): μΊμμμ 리μμ€λ₯Ό κ°μ Έμ€λ κ²μ μ°μ μν©λλ€. 리μμ€κ° μ¬μ© κ°λ₯νλ©΄ μ¦μ μ 곡λ©λλ€. κ·Έλ μ§ μμΌλ©΄ λ€νΈμν¬λ₯Ό μ¬μ©νκ³ μλ΅μ λμ€μ μ¬μ©ν μ μλλ‘ μΊμλ©λλ€. μ΄ μ λ΅μ μ΄λ―Έμ§, CSS, μλ°μ€ν¬λ¦½νΈ νμΌκ³Ό κ°μ΄ κ±°μ λ³κ²½λμ§ μλ μ μ μμ°μ μ΄μμ μ λλ€.
- λ€νΈμν¬ μ°μ (Network-First): λ¨Όμ λ€νΈμν¬μμ 리μμ€λ₯Ό κ°μ Έμ€λ €κ³ μλν©λλ€. λ€νΈμν¬ μμ²μ΄ μ€ν¨νλ©΄(μ: μ°κ²° λΆλ λλ μ€νλΌμΈ λͺ¨λ) μΊμλ λ²μ μ΄ μ 곡λ©λλ€. μ΄ μ λ΅μ API μλ΅κ³Ό κ°μ΄ μμ£Ό λ³κ²½λλ λμ μ½ν μΈ μ μ ν©ν©λλ€.
- μΊμ μ μ©(Cache-Only): μΊμμμλ§ λ¦¬μμ€λ₯Ό μ 곡ν©λλ€. 리μμ€κ° μΊμμ μμΌλ©΄ μμ²μ΄ μ€ν¨ν©λλ€. μ΄ μ λ΅μ μ€νλΌμΈ μ μ© κΈ°λ₯μ μ μ©ν©λλ€.
- λ€νΈμν¬ μ μ©(Network-Only): νμ μΊμλ₯Ό μ°ννμ¬ λ€νΈμν¬μμ 리μμ€λ₯Ό κ°μ Έμ΅λλ€. νμ μ΅μ μνμ¬μΌ νλ λ°μ΄ν°μ μ μ©ν©λλ€.
- μ¬κ²μ¦ μ€μλ μ€λλ λ°μ΄ν° μ¬μ©(Stale-While-Revalidate): μΊμλ λ²μ μ μ¦μ μ 곡νλ©΄μ λμμ λ°±κ·ΈλΌμ΄λμμ μΊμλ₯Ό μ λ°μ΄νΈν©λλ€. μ΄λ₯Ό ν΅ν΄ λΉ λ₯Έ μ΄κΈ° κ²½νμ μ 곡νλ©΄μ μ΅μ λ°μ΄ν°λ₯Ό κ²°κ΅ μ¬μ©ν μ μλλ‘ λ³΄μ₯ν©λλ€. μ λμ μΌλ‘ μ΅μ μνμΌ νμκ° μλ μ½ν μΈ μ μ ν©ν©λλ€.
μμ (μΊμ μ°μ ):
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request).then(function(response) {
return caches.open('my-cache').then(function(cache) {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
2. μ€νλΌμΈ μ°μ μ κ·Όλ²
μ€νλΌμΈ μ°μ μ² νμ μΈν°λ· μ°κ²° μμ΄λ μννκ² μλνλ PWAλ₯Ό ꡬμΆνλ κ²μ μ°μ μν©λλ€. μ¬κΈ°μλ λ€μμ΄ ν¬ν¨λ©λλ€:
- μλΉμ€ μ컀 μ€μΉ μ€μ νμ μμ° μΊμ±.
- μΊμλ μ½ν μΈ , λμ€μ μ μΆν μ μλ μμ λλ μ 보 λ©μμ§μ κ°μ μλ―Έ μλ μ€νλΌμΈ κ²½ν μ 곡.
- λμ μ½ν μΈ μ `λ€νΈμν¬ μ°μ ` λλ `μ¬κ²μ¦ μ€μλ μ€λλ λ°μ΄ν° μ¬μ©` μ λ΅μ μ¬μ©νμ¬ μ€νλΌμΈ μ¬μ©μ νμ©ν λ€μ, κ°λ₯ν λ μ¬μ©μ μ 보 μ λ°μ΄νΈ.
μμ (μ€νλΌμΈ ν΄λ°±):
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(function() {
return caches.match('offline.html'); // Fallback to offline page
})
);
});
3. μΊμλ 리μμ€ μ λ°μ΄νΈ
μΊμλ 리μμ€λ₯Ό μ΅μ μνλ‘ μ μ§νλ κ²μ μ¬μ©μμκ² μ΅μ μ½ν μΈ λ₯Ό μ 곡νλ λ° μ€μν©λλ€. μλΉμ€ μ컀λ λ€μκ³Ό κ°μ μ¬λ¬ κ°μ§ λ°©λ²μΌλ‘ μΊμλ 리μμ€λ₯Ό μ λ°μ΄νΈν μ μμ΅λλ€:
- μΊμ λ²μ€ν (Cache Busting): μ μ μμ°μ νμΌ μ΄λ¦μ λ²μ λ²νΈλ κ³ μ ν΄μλ₯Ό μΆκ°ν©λλ€. μμ°μ΄ λ³κ²½λλ©΄ νμΌ μ΄λ¦μ΄ λ³κ²½λκ³ μλΉμ€ μ컀λ μ λ²μ μ κ°μ Έμ΅λλ€.
- λ°±κ·ΈλΌμ΄λ λκΈ°ν(Background Sync): μ¬μ©μκ° μ€νλΌμΈ μνμΌ λ μμ μ λκΈ°μ΄μ μΆκ°νκ³ μΈν°λ· μ°κ²°μ΄ κ°λ₯ν΄μ§λ©΄ μλ²μ λκΈ°νν μ μλλ‘ ν©λλ€.
- μ£ΌκΈ°μ μ¬κ²μ¦(Periodic Revalidation): λ°±κ·ΈλΌμ΄λμμ μΊμλ μ½ν μΈ μ μ λ°μ΄νΈλ₯Ό μ£ΌκΈ°μ μΌλ‘ νμΈνκ³ νμν κ²½μ° μΊμλ₯Ό μ λ°μ΄νΈν©λλ€.
μμ (μΊμ λ²μ€ν ):
`style.css` λμ `style.v1.css` λλ `style.css?v=1`μ μ¬μ©ν©λλ€.
μλΉμ€ μ컀 κ³ κΈ κΈ°μ
1. λμ μΊμ±
λμ μΊμ±μ μλ΅ λ΄μ©μ΄λ μμ²μ λ°λΌ μλ΅μ μΊμ±νλ κ²μ ν¬ν¨ν©λλ€. μ΄λ API μλ΅, μ¬μ©μ μνΈ μμ© λ°μ΄ν° λλ νμμ λ°λΌ κ°μ Έμ€λ 리μμ€λ₯Ό μΊμ±νλ λ° μ μ©ν μ μμ΅λλ€. λ€μν μ½ν μΈ μ ν, μ λ°μ΄νΈ λΉλ λ° κ°μ©μ± μꡬ μ¬νμ μμ©νκΈ° μν΄ μ μ ν μΊμ± μ λ΅μ μ ννμμμ€.
μμ (API μλ΅ μΊμ±):
self.addEventListener('fetch', function(event) {
const request = event.request;
if (request.url.includes('/api/')) {
event.respondWith(
caches.match(request).then(function(response) {
return response || fetch(request).then(function(response) {
// Cache only successful responses (status 200)
if (response && response.status === 200) {
return caches.open('api-cache').then(function(cache) {
cache.put(request, response.clone());
return response;
});
}
return response;
});
})
);
}
});
2. νΈμ μλ¦Ό
μλΉμ€ μ컀λ νΈμ μλ¦Όμ νμ±ννμ¬ μ¬μ©μκ° μ±μ μ κ·Ήμ μΌλ‘ μ¬μ©νμ§ μμ λμλ μ°Έμ¬λ₯Ό μ λν μ μμ΅λλ€. μ΄λ₯Ό μν΄μλ νΈμ μλ¦Ό μλΉμ€(μ: Firebase Cloud Messaging, OneSignal)λ₯Ό ν΅ν©νκ³ μλΉμ€ μ컀μμ νΈμ μ΄λ²€νΈλ₯Ό μ²λ¦¬ν΄μΌ ν©λλ€. νΈμ μλ¦Όμ ꡬννμ¬ μ¬μ©μμκ² μ€μν μ λ°μ΄νΈ, μλ¦Ό λλ κ°μΈνλ λ©μμ§λ₯Ό 보λ΄μμμ€.
μμ (νΈμ μλ¦Ό μ²λ¦¬):
self.addEventListener('push', function(event) {
const data = event.data.json();
self.registration.showNotification(data.title, {
body: data.body,
icon: 'icon.png'
});
});
3. λ°±κ·ΈλΌμ΄λ λκΈ°ν
λ°±κ·ΈλΌμ΄λ λκΈ°νλ₯Ό μ¬μ©νλ©΄ PWAκ° λ€νΈμν¬ μμ²μ λκΈ°μ΄μ λ£κ³ λμ€μ μΈν°λ· μ°κ²°μ΄ κ°λ₯ν λ λ€μ μλν μ μμ΅λλ€. μ΄λ μ¬μ©μκ° μ€νλΌμΈμΌ λ μμ μ μΆμ΄λ λ°μ΄ν° μ λ°μ΄νΈλ₯Ό μ²λ¦¬νλ λ° νΉν μ μ©ν©λλ€. `SyncManager` APIλ₯Ό μ¬μ©νμ¬ λ°±κ·ΈλΌμ΄λ λκΈ°νλ₯Ό ꡬννμμμ€.
μμ (λ°±κ·ΈλΌμ΄λ λκΈ°ν):
// In your main application code
navigator.serviceWorker.ready.then(function(registration) {
registration.sync.register('my-sync-event')
.then(function() {
console.log('Sync registered');
})
.catch(function(err) {
console.log('Sync registration failed: ', err);
});
});
// In your service worker
self.addEventListener('sync', function(event) {
if (event.tag == 'my-sync-event') {
event.waitUntil(
// Perform actions related to 'my-sync-event'
);
}
});
4. μ½λ λΆν λ° μ§μ° λ‘λ©
μ΄κΈ° λ‘λ μκ°μ κ°μ νλ €λ©΄ μ½λλ₯Ό λ μμ λ©μ΄λ¦¬λ‘ λΆν νκ³ μ€μνμ§ μμ 리μμ€λ μ§μ° λ‘λ©νλ κ²μ κ³ λ €νμμμ€. μλΉμ€ μ컀λ μ΄λ¬ν λ©μ΄λ¦¬λ₯Ό κ΄λ¦¬νκ³ νμμ λ°λΌ μΊμ±νκ³ μ 곡νλ λ° λμμ μ€ μ μμ΅λλ€.
5. λ€νΈμν¬ μ‘°κ±΄μ λν μ΅μ ν
μΈν°λ· μ°κ²°μ΄ λΆμμ νκ±°λ λλ¦° μ§μμμλ μ΄λ¬ν 쑰건μ μ μνλ μ λ΅μ ꡬννμμμ€. μ¬κΈ°μλ μ ν΄μλ μ΄λ―Έμ§ μ¬μ©, λ¨μνλ λ²μ μ μ ν리μΌμ΄μ μ 곡 λλ λ€νΈμν¬ μλμ λ°λΌ μΊμ± μ λ΅μ μ§λ₯μ μΌλ‘ μ‘°μ νλ κ²μ΄ ν¬ν¨λ μ μμ΅λλ€. `NetworkInformation` APIλ₯Ό μ¬μ©νμ¬ μ°κ²° μλλ₯Ό κ°μ§νμμμ€.
κΈλ‘λ² PWA κ°λ°μ μν λͺ¨λ² μ¬λ‘
κΈλ‘λ² μ¬μ©μλ₯Ό μν PWAλ₯Ό ꡬμΆνλ €λ©΄ λ¬Ένμ , κΈ°μ μ λ―Έλ¬ν¨μ μ μ€νκ² κ³ λ €ν΄μΌ ν©λλ€:
1. κ΅μ ν(i18n) λ° νμ§ν(l10n)
- μΈμ΄ μ§μ: μ¬λ¬ μΈμ΄λ₯Ό μ§μν©λλ€. `Accept-Language` ν€λλ₯Ό μ¬μ©νμ¬ μ¬μ©μμ μ νΈ μΈμ΄λ₯Ό κ²°μ νκ³ μ μ ν μ½ν μΈ λ₯Ό μ 곡ν©λλ€.
- ν΅ν νμ: λ€λ₯Έ μ§μμ λ§λ μ μ ν ν΅ν νμκ³Ό κΈ°νΈλ₯Ό μ¬μ©ν©λλ€.
- λ μ§ λ° μκ° νμ: λ μ§ λ° μκ° νμμ νμ§ κ΄λ‘μ λ§κ² μ‘°μ ν©λλ€.
- μ€λ₯Έμͺ½μμ μΌμͺ½(RTL) μ§μ: PWAκ° μλμ΄ λ° νλΈλ¦¬μ΄μ κ°μ RTL μΈμ΄λ₯Ό μ§μνλμ§ νμΈν©λλ€.
- μμ (μλ°μ€ν¬λ¦½νΈλ₯Ό μ΄μ©ν κ΅μ ν): κ°λ ₯ν κ΅μ ν ꡬνμ μν΄ `i18next` λλ `formatjs`μ κ°μ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©ν©λλ€.
2. μ±λ₯ μ΅μ ν
- HTTP μμ² μ΅μν: CSS λ° μλ°μ€ν¬λ¦½νΈ νμΌμ κ²°ν©νκ³ μΈλΌμΈνμ¬ μμ² μλ₯Ό μ€μ λλ€.
- μ΄λ―Έμ§ μ΅μ ν: μ΅μ νλ μ΄λ―Έμ§ νμ(μ: WebP)μ μ¬μ©νκ³ , μ΄λ―Έμ§λ₯Ό μμΆνλ©°, νλ©΄ ν¬κΈ°μ λ°λΌ λ°μν μ΄λ―Έμ§λ₯Ό μ 곡ν©λλ€.
- μ½λ λΆν λ° μ§μ° λ‘λ©: μ²μμλ νμ μ½λλ§ λ‘λνκ³ μ ν리μΌμ΄μ μ λ€λ₯Έ λΆλΆμ μ§μ° λ‘λ©ν©λλ€.
- μ½λ μΆμ: CSS λ° μλ°μ€ν¬λ¦½νΈ νμΌμ μΆμνμ¬ ν¬κΈ°λ₯Ό μ€μ λλ€.
- μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN) μ¬μ©: CDNμ ν΅ν΄ μ ν리μΌμ΄μ μμ°μ λΆμ°νμ¬ μ μΈκ³ μ¬μ©μμ λκΈ° μκ°μ μ€μ λλ€.
3. μ¬μ©μ κ²½ν(UX) κ³ λ €μ¬ν
- μ κ·Όμ±: PWAκ° μ₯μ κ° μλ μ¬μ©μμκ² μ κ·Ό κ°λ₯νμ§ νμΈν©λλ€. μλ§¨ν± HTMLμ μ¬μ©νκ³ , μ΄λ―Έμ§μ λ체 ν μ€νΈλ₯Ό μ 곡νλ©°, μΆ©λΆν μμ λλΉλ₯Ό 보μ₯ν©λλ€.
- μ¬μ©μ μΈν°νμ΄μ€(UI) λμμΈ: νμνκ³ μ΄ν΄νκΈ° μ¬μ΄ μ¬μ©μ μΉνμ μΈ μΈν°νμ΄μ€λ₯Ό λμμΈν©λλ€.
- ν μ€ν : λ€μν κΈ°κΈ° λ° λ€νΈμν¬ μ‘°κ±΄μμ PWAλ₯Ό ν μ€νΈνμ¬ λͺ¨λ μ¬μ©μμκ² μΌκ΄λ κ²½νμ 보μ₯ν©λλ€. UI/UXκ° μΌκ΄λκ³ μ μ νμ§ νμΈνκΈ° μν΄ λ°μ€ν¬ν±κ³Ό λͺ¨λ°μΌ λͺ¨λμμ ν μ€νΈνλ κ²μ κ³ λ €νμμμ€.
- μ μ§μ ν₯μ: ꡬν λΈλΌμ°μ μμλ κΈ°λ³Έ κΈ°λ₯μ μ 곡νλλ‘ PWAλ₯Ό ꡬμΆνκ³ , μ΅μ λΈλΌμ°μ μμλ κ³ κΈ κΈ°λ₯μΌλ‘ μ μ§μ μΌλ‘ ν₯μμν΅λλ€.
4. 보μ
- HTTPS: μμ ν ν΅μ μ 보μ₯νκΈ° μν΄ νμ HTTPSλ₯Ό ν΅ν΄ PWAλ₯Ό μ 곡ν©λλ€.
- μμ ν μΊμ±: μΊμμ μ μ₯λ λ―Όκ°ν λ°μ΄ν°λ₯Ό 보νΈν©λλ€.
- κ΅μ°¨ μ¬μ΄νΈ μ€ν¬λ¦½ν (XSS) λ°©μ§: μ¬μ©μ μ λ ₯μ μ΄κ· νκ³ μΆλ ₯μ μ΄μ€μΌμ΄ννμ¬ XSS 곡격μ λ°©μ§ν©λλ€.
5. κΈλ‘λ² μ¬μ©μ κΈ°λ°
- μλ² μμΉ: μλ² μΈνλΌκ° μ¬μ©μμ λΉκ΅νμ¬ μ΄λμ μμΉνλμ§ κ³ λ €νμμμ€. μ μΈκ³μ μΌλ‘ λΆμ°λ μλ² λ€νΈμν¬λ κΈλ‘λ² μ κ·Όμ±μ λ§€μ° μ€μν©λλ€.
- μκ°λ: PWAκ° μκ°λλ₯Ό μ¬λ°λ₯΄κ² μ²λ¦¬νλμ§ νμΈν©λλ€. λ μ§μ μκ°μ νμ§ νμμΌλ‘ νμνκ³ λ€μν μΌκ΄ μ μ½ μκ°μ (DST) μΌμ μ μ μν©λλ€.
- λ¬Ένμ λ―Όκ°μ±: λμμΈκ³Ό λ©μμ§μμ λ¬Ένμ μ°¨μ΄λ₯Ό μΌλμ λμμμ€. ν λ¬Ένμμ ν¨κ³Όκ° μλ κ²μ΄ λ€λ₯Έ λ¬Ένμμλ 곡κ°μ μ»μ§ λͺ»ν μ μμ΅λλ€. λͺ©ν μμ₯μμ μ² μ ν μ¬μ©μ μ‘°μ¬λ₯Ό μννμμμ€.
- κ·μ μ€μ: PWAκ° μ¬μ©λλ μμ₯μ GDPR, CCPA λ± κ΄λ ¨ λ°μ΄ν° κ°μΈ μ 보 λ³΄νΈ κ·μ μ μ€μνμμμ€.
λꡬ λ° λ¦¬μμ€
PWAλ₯Ό ꡬμΆνκ³ μ΅μ ννλ λ° λμμ΄ λλ λͺ κ°μ§ λꡬμ 리μμ€κ° μμ΅λλ€:
- Workbox: μλΉμ€ μ컀 ꡬνκ³Ό μΊμ±μ λ¨μννλ κ΅¬κΈ κ°λ° λΌμ΄λΈλ¬λ¦¬μ λλ€.
- Lighthouse: μΉ μ±μ νμ§μ ν₯μμν€κΈ° μν μ€ν μμ€ μλν λꡬμ λλ€. μ΄λ₯Ό μ¬μ©νμ¬ PWAμ μ±λ₯, μ κ·Όμ± λ° λͺ¨λ² μ¬λ‘λ₯Ό κ°μ¬ν©λλ€.
- μΉ μ± λ§€λνμ€νΈ μμ±κΈ°: PWAκ° μ¬μ©μ κΈ°κΈ°μ μ€μΉλ λ μ΄λ»κ² λμν΄μΌ νλμ§λ₯Ό μ μνλ μΉ μ± λ§€λνμ€νΈ νμΌμ λ§λλ λ° λμμ μ€λλ€.
- λΈλΌμ°μ κ°λ°μ λꡬ: λΈλΌμ°μ μ κ°λ°μ λꡬλ₯Ό μ¬μ©νμ¬ μλΉμ€ μ컀, μΊμ λ° λ€νΈμν¬ μμ²μ κ²μ¬νκ³ λλ²κΉ ν©λλ€.
- MDN μΉ λ¬Έμ: μλΉμ€ μ컀, μΊμ±, μΉ μ± λ§€λνμ€νΈλ₯Ό ν¬ν¨ν μΉ κΈ°μ μ λν ν¬κ΄μ μΈ λ¬Έμμ λλ€.
- Google κ°λ°μ λ¬Έμ: PWA λ° μλΉμ€ μ컀μ λν Googleμ λ¬Έμλ₯Ό νμν©λλ€.
κ²°λ‘
μλΉμ€ μ컀λ μ±κ³΅μ μΈ PWAμ μ΄μμΌλ‘, μ±λ₯, μ λ’°μ± λ° μ¬μ©μ μ°Έμ¬λ₯Ό ν₯μμν€λ κΈ°λ₯μ κ°λ₯νκ² ν©λλ€. μ΄ κ°μ΄λμ μ€λͺ λ κ³ κΈ μ λ΅μ λ§μ€ν°ν¨μΌλ‘μ¨ λ€μν μμ₯μμ λ°μ΄λ κ²½νμ μ 곡νλ κΈλ‘λ² μ ν리μΌμ΄μ μ ꡬμΆν μ μμ΅λλ€. μΊμ± μ λ΅κ³Ό μ€νλΌμΈ μ°μ μμΉλΆν° νΈμ μλ¦Όκ³Ό λ°±κ·ΈλΌμ΄λ λκΈ°νμ μ΄λ₯΄κΈ°κΉμ§ κ°λ₯μ±μ 무νν©λλ€. μ΄λ¬ν κΈ°μ μ μμ©νκ³ , μ±λ₯ λ° κΈλ‘λ² κ³ λ € μ¬νμ λ§κ² PWAλ₯Ό μ΅μ ννλ©°, μ¬μ©μμκ² μ§μ μΌλ‘ λλΌμ΄ μΉ κ²½νμ μ 곡νμμμ€. μ΅μμ μ¬μ©μ κ²½νμ μ 곡νκΈ° μν΄ μ§μμ μΌλ‘ ν μ€νΈνκ³ λ°λ³΅νλ κ²μ μμ§ λ§μμμ€.