최근 웹 기술이 발전함에 따라 더 많은 개발자가 다음과 같은 분야에 관심을 돌리고 있습니다. 프로그레시브 웹 앱(PWA). PWA는 웹사이트가 오프라인에서 작동하도록 하여 네트워크 연결이 제한되거나 사용할 수 없는 경우에도 사용자에게 원활한 경험을 제공합니다. 이 블로그 게시물에서는 PWA의 정의, 오프라인 기능을 구현하는 방법, 필수 파일을 구성하는 방법에 대해 살펴봅니다, manifest.json 그리고 sw.js를 클릭해 웹사이트를 오프라인에서 작동하도록 설정하세요.
PWA란 무엇인가요?
A 프로그레시브 웹 앱(PWA) 는 웹과 네이티브 앱의 장점을 결합한 애플리케이션 유형입니다. PWA는 빠르고 안정적이며 오프라인에서도 사용할 수 있는 사용자 경험을 제공합니다. PWA의 뛰어난 기능 중 하나는 오프라인에서 작동할 수 있다는 점입니다. 서비스 작업자.
- 프로그레시브: 브라우저 선택에 관계없이 모든 사용자에게 적용되며 브라우저의 기능에 따라 점진적으로 개선됩니다.
- 반응형: 다양한 장치와 화면 크기에 맞게 조정됩니다.
- 오프라인 지원: 오프라인 또는 연결 상태가 좋지 않은 환경에서도 작동하여 사용자 경험을 향상시킵니다.
- 앱과 같은 경험: 홈 화면에 추가하고 푸시 알림을 보내는 기능을 포함하여 기본 앱과 유사한 환경을 제공합니다.
- 항상 최신 정보: 수동 업데이트 없이 자동으로 콘텐츠를 최신 상태로 유지합니다.
PWA에서 오프라인 기능 구현하기
PWA의 오프라인 기능은 주로 다음을 사용하여 구현됩니다. 서비스 작업자. 서비스 워커는 백그라운드에서 실행되어 네트워크 요청을 가로채고 네트워크를 사용할 수 없을 때 캐시된 리소스를 제공하는 JavaScript 파일입니다. 이를 구현하려면 두 가지 필수 파일이 필요합니다:
manifest.json: 앱의 이름, 아이콘, 시작 URL 및 기타 설정을 정의하는 메타데이터 파일입니다.sw.js: 캐싱 및 네트워크 요청을 처리하는 서비스 워커 파일입니다.
각 파일을 자세히 살펴보고 예를 들어 보겠습니다.
manifest.json 파일: 앱 메타데이터 정의
그리고 manifest.json 파일에는 이름, 아이콘, 시작 URL, 표시 모드 등 앱에 대한 설정이 포함되어 있습니다. 이 파일은 웹 애플리케이션을 오프라인에서 설치 및 액세스할 수 있도록 만드는 데 매우 중요합니다.
예시: manifest.json
{
"name": "오프라인 지원 PWA",
"short_name": "PWA",
"설명": "오프라인 기능이 있는 프로그레시브 웹 앱",
"start_url": "/index.html",
"display": "스탠드얼론",
"background_color": "#ffffff",
"theme_color": "#0000ff",
"아이콘": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}이 예제에서는
start_url: 사용자가 홈 화면에서 앱을 실행할 때 열릴 URL을 정의합니다.디스플레이: 로 설정독립형를 사용하여 브라우저 UI 없이도 네이티브 앱처럼 보이고 느껴지도록 만들 수 있습니다.아이콘: 앱이 홈 화면에 추가될 때 사용할 아이콘을 지정합니다.
그리고 manifest.json 파일을 HTML에 다음과 같이 링크해야 합니다:
<link rel="manifest" href="/manifest.json">sw.js 파일: 서비스 워커로 오프라인 기능 구현하기
서비스 워커는 웹 애플리케이션이 오프라인에서 작동할 수 있도록 하는 핵심 구성 요소입니다. 네트워크 요청을 가로채고 캐시된 리소스를 제공하여 네트워크가 다운된 상태에서도 원활한 환경을 보장합니다.
예시: sw.js
다음은 오프라인 기능을 구현하는 기본 서비스 워커의 예입니다:
const CACHE_NAME = 'offline-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/styles.css',
'/script.js',
'/icons/icon-192x192.png',
'/icons/icon-512x512.png'
];
// 서비스 워커에 대한 설치 이벤트
self.addEventListener('install', (event) => {})
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('열린 캐시');
return cache.addAll(urlsToCache); // 필수 리소스 캐싱
})
);
});
// 서비스 워커에 대한 이벤트 활성화
self.addEventListener('activate', (event) => {})
console.log('서비스 워커가 활성화되었습니다');
// 여기에 오래된 캐시를 삭제하는 로직을 추가할 수 있습니다.
});
// 네트워크 요청을 가로채기 위해 이벤트를 가져옵니다.
self.addEventListener('fetch', (event) => {})
event.respondWith(
caches.match(event.request)
.then((response) => {
if (response) {
반환 응답; // 캐시된 리소스 반환
}
return fetch(event.request) // 네트워크에서 가져오기
.catch(() => caches.match('/offline.html')); // 네트워크 실패 시 오프라인 페이지 제공
})
);
});이 예제에서는
- 설치 이벤트(
설치): 서비스 워커는 지정된 리소스를 다음 위치에 캐시합니다.urlsToCache처음 설치할 때 - 이벤트 활성화(
활성화): 서비스 워커가 활성화되면 실행됩니다. 이 이벤트는 오래된 캐시를 정리하는 데 사용할 수 있습니다. - 이벤트 가져오기(
fetch): 네트워크 요청을 가로채서 가능한 경우 캐시된 응답을 반환하고, 그렇지 않으면 네트워크에서 리소스를 가져옵니다. 네트워크를 사용할 수 없는 경우 오프라인 페이지를 제공합니다(예/offline.html).
HTML 파일에 서비스 워커를 등록하려면 다음 스크립트를 추가하세요:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then((registration) => {
console.log('Service Worker registered with scope:', registration.scope);
}, (error) => {
console.error('Service Worker registration failed:', error);
});
});
}
</script>이 스크립트는 브라우저가 서비스 워커를 지원하는지 확인하고 페이지 로드 시 서비스 워커를 등록합니다.
결론
PWA는 오프라인 환경이나 네트워크 연결이 불안정한 경우에도 안정적인 웹 환경을 제공하는 데 특히 유용합니다. 앱의 설정을 정의하여 manifest.json 파일에서 캐싱 전략을 구현하고 sw.js를 사용하면 오프라인에서 작동하고 사용자에게 앱과 같은 빠른 경험을 제공하는 웹사이트를 만들 수 있습니다.
이제 웹 프로젝트에 PWA를 적용하여 사용자가 인터넷 연결 없이도 언제 어디서나 사용할 수 있는 액세스 가능하고 강력한 웹 애플리케이션을 제공하세요.
워드프레스에서
라는 플러그인도 있습니다. 슈퍼 PWA. 이 플러그인을 사용하면 최소한의 노력으로 워드프레스 웹사이트를 프로그레시브 웹 앱(PWA)으로 쉽게 변환할 수 있습니다. Super PWA는 오프라인 지원, 앱과 유사한 인터페이스, 사용자가 홈 화면에 웹사이트를 추가할 수 있는 기능 등 필수적인 PWA 기능을 구현하는 데 도움이 됩니다.
Super PWA는 자동으로 manifest.json 를 설정하고 sw.js (서비스 작업자) 파일을 제공하여 워드프레스 사이트를 완전한 기능의 PWA로 전환하는 과정을 간소화합니다. 또한 앱의 이름, 아이콘, 테마 색상 등을 정의할 수 있는 사용자 정의 옵션도 제공합니다. 따라서 복잡한 코딩을 하지 않고도 PWA의 이점을 활용하고자 하는 워드프레스 사용자에게 탁월한 선택입니다.
