서비스 워커(Service Worker)는 웹 애플리케이션과 네트워크 사이에서 동작하는 중간 코드로, 웹 push 알림, 백그라운드 동기화 등의 기능을 제공합니다. 이번 포스트에서는 Flask 웹 애플리케이션에 서비스 워커를 구현하는 방법에 대해 알아보겠습니다.

서비스 워커란?

서비스 워커는 클라이언트와의 통신을 중간에서 가로채 웹 애플리케이션을 오프라인에서도 동작할 수 있도록 지원하는 기술입니다. 즉, 서비스 워커를 이용하면 네트워크 연결이 없는 상황에서도 웹 앱이 캐시된 리소스를 사용하여 동작할 수 있습니다.

Flask에서 서비스 워커 구현하기

서비스 워커를 Flask 애플리케이션에 구현하려면 다음 단계를 따르면 됩니다.

1. 서비스 워커 파일 작성

먼저, 서비스 워커를 구현할 JavaScript 파일을 작성해야 합니다.

// service-worker.js

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => {
      return cache.addAll([
        '/static/js/main.js',
        '/static/css/style.css',
        '/static/images/logo.png'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

위 코드는 설치 이벤트를 가로채서 서비스 워커를 설치하고 필요한 리소스를 캐시에 저장하며, fetch 이벤트를 가로채서 캐시된 리소스를 반환하는 기능을 구현합니다.

2. Flask 애플리케이션에 서비스 워커 등록

Flask 애플리케이션에서 서비스 워커를 등록하기 위해 다음 코드를 추가합니다.

# app.py

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "Hello, World!"

@app.route('/service-worker.js', methods=['GET'])
def service_worker():
    return app.send_static_file('service-worker.js')

if __name__ == '__main__':
    app.run()

위 코드는 /service-worker.js 경로에서 서비스 워커 파일을 제공하는 라우트를 추가합니다.

3. 정적 파일 디렉토리 설정

마지막으로, Flask 애플리케이션의 정적 파일 디렉토리를 설정해야 합니다. Flask는 기본적으로 static 디렉토리를 사용하므로, 해당 디렉토리에 앞서 작성한 서비스 워커 파일을 추가합니다.

- app.py
- static
  - js
    - main.js
  - css
    - style.css
  - images
    - logo.png
  - service-worker.js

결과 확인

Flask 애플리케이션을 실행하고 브라우저에서 접속하여 개발자 도구를 열어 Application 탭에서 서비스 워커를 확인할 수 있습니다. 또한, 서비스 워커가 올바로 동작하고 있는지 확인하기 위해 오프라인 상태에서도 애플리케이션을 사용해 보세요.

이로써 Flask 웹 애플리케이션에 서비스 워커를 구현하는 방법에 대해서 알아보았습니다. 서비스 워커를 사용하면 웹 앱이 오프라인에서도 동작 가능하고, 푸시 알림 등의 다양한 기능을 제공할 수 있습니다.