자바스크립트 Polyfill을 사용하여 웹 애플리케이션의 오프라인 동작을 개선하는 방법은 무엇인가요?

07 Nov 2023

polyfill

Service Worker 등록하기

서비스 워커 스크립트 파일을 생성합니다. ```javascript // sw.js

self.addEventListener(‘install’, function(event) { event.waitUntil( caches.open(‘my-app-cache’).then(function(cache) { return cache.addAll([ ‘/’, ‘/index.html’, ‘/styles.css’, ‘/main.js’ ]); }) ); });

self.addEventListener(‘fetch’, function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); });

self.addEventListener(‘activate’, function(event) { var cacheWhitelist = [‘my-app-cache’]; event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); });

2. HTML 파일에 서비스 워커를 등록하는 코드를 추가합니다.
```html
<script>
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', function() {
     navigator.serviceWorker.register('/sw.js').then(function(registration) {
       console.log('ServiceWorker registration successful');
     }).catch(function(err) {
       console.log('ServiceWorker registration failed:', err);
     });
   });
 }
</script>

Polyfill 적용하기

오프라인 동작에 필요한 Polyfill 라이브러리를 설치합니다.

npm install --save-dev service-worker-webpack-plugin

웹팩 설정 파일에 다음 코드를 추가합니다. ```javascript const { ServiceWorkerWebpackPlugin } = require(‘service-worker-webpack-plugin’);

module.exports = { // … plugins: [ // … new ServiceWorkerWebpackPlugin({ entry: path.join(__dirname, ‘src/service-worker.js’) }) ] };

3. service-worker.js 파일을 생성하여 Polyfill 코드를 추가합니다.
```javascript
importScripts('https://cdn.polyfill.io/v2/polyfill.min.js');

// Polyfill 코드 추가

이제 웹앱은 오프라인 상태에서도 동작할 수 있게 준비되었습니다. Service Worker를 통해 캐싱하여 오프라인 요청을 처리하고 필요한 Polyfill을 적용하여 기능을 보완할 수 있습니다.

참고 자료: