[파이썬] Flask와 PWA (Progressive Web App) 통합

06 Sep 2023

flask

Flask PWA

Flask는 파이썬으로 작성된 경량급 웹 프레임워크로, 웹 애플리케이션을 쉽게 개발할 수 있게 해줍니다. 반면, PWA (Progressive Web App)는 모바일 앱과 웹 앱을 결합한 형태로, 크로스 플랫폼에서 동작하며 네이티브 앱과 유사한 사용자 경험을 제공합니다.

본 블로그 포스트에서는 Flask와 PWA를 통합하여 파이썬으로 PWA를 개발하는 방법에 대해 알아보겠습니다.

Flask 앱 생성하기

먼저, Flask 앱을 생성해야 합니다. 다음은 간단한 Flask 앱의 예시입니다.

from flask import Flask

app = Flask(__name__)

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

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

PWA 기능 추가하기

PWA 기능을 추가하기 위해서는 다음 세 가지 핵심 요소가 필요합니다.

웹 매니페스트 (Web Manifest): 웹 앱의 메타데이터를 정의하는 JSON 파일입니다. 앱의 아이콘, 이름 등을 포함합니다.
서비스 워커 (Service Worker): 백그라운드에서 동작하는 JavaScript 파일로, 웹 앱의 동작을 제어합니다. 네트워크 요청을 가로채고 캐싱, 오프라인 지원 등을 처리할 수 있습니다.
오프라인 페이지 처리: 서비스 워커를 사용하여 오프라인에서도 동작하는 페이지를 제공합니다.

PWA 기능을 추가하기 위해 다음과 같은 작업을 수행해야 합니다.

manifest.json 파일 생성 및 설정
서비스 워커 파일 생성 및 등록
오프라인 페이지 작성

manifest.json 파일 생성 및 설정

manifest.json 파일은 웹 앱의 메타데이터를 정의하는 JSON 파일입니다. 이 파일에는 앱의 이름, 아이콘, 배경색, 시작 URL 등을 설정할 수 있습니다.

{
  "name": "My Awesome PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4a90e2",
  "icons": [
    {
      "src": "/static/img/icon.png",
      "sizes": "48x48 96x96 144x144",
      "type": "image/png"
    }
  ]
}

manifest.json 파일은 static 디렉토리에 저장되어야 합니다.

서비스 워커 파일 생성 및 등록

서비스 워커는 백그라운드에서 동작하는 JavaScript 파일로, 웹 앱의 동작을 제어합니다. 예를 들어, 네트워크 요청을 가로채고 캐싱, 오프라인 지원 등을 처리할 수 있습니다.

// service-worker.js

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/offline',
        '/static/css/style.css',
        '/static/js/script.js',
      ]);
    })
  );
});

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

서비스 워커 파일은 루트 디렉토리에 저장되어야 합니다.

서비스 워커를 등록하기 위해 Flask 앱에서 다음과 같은 코드를 추가해야 합니다.

@app.route('/service-worker.js')
def sw():
    return app.send_static_file('service-worker.js')

오프라인 페이지 작성

오프라인에서 동작하는 페이지를 제공하기 위해 Flask 앱에서 /offline 경로에 대한 핸들러를 추가합니다.

@app.route('/offline')
def offline_page():
    return 'You are offline.'

결과 확인하기

Flask 앱을 실행한 후, 브라우저에서 http://localhost:5000로 접속하여 확인할 수 있습니다. Chrome 개발자 도구에서 “Application” 탭을 열고 “Service Workers”를 확인하면 등록된 서비스 워커와 캐싱된 자원을 확인할 수 있습니다.

이제, 네트워크 연결을 끊고 http://localhost:5000로 접속해보면 오프라인 페이지가 나타나는 것을 확인할 수 있습니다.

마무리

본 포스트에서는 Flask와 PWA를 통합하는 방법에 대해 알아보았습니다. Flask를 사용하여 PWA를 개발하면 파이썬 개발자는 익숙한 환경에서 모바일과 웹을 동시에 지원하는 혁신적인 애플리케이션을 만들 수 있습니다.

Flask와 PWA를 통합하는 과정은 더 복잡해질 수 있지만, 위의 내용을 기반으로 시작하여 더욱 발전시킬 수 있습니다.