웹 개발에서 PWA (Progressive Web App)는 모바일 앱과 웹 앱의 장점을 혼합한 형태의 앱입니다. PWA는 기존의 웹 앱보다 더욱 향상된 사용자 경험을 제공하며, 사용자가 앱을 다운로드하거나 설치할 필요 없이 웹 브라우저에서 바로 실행할 수 있습니다. 이번 블로그 포스트에서는 web2py 프레임워크에서 PWA를 지원하는 방법에 대해 알아보겠습니다.

1. Manifest 설정

PWA를 지원하기 위해서는 manifest.json 파일을 생성해야 합니다. 이 파일은 앱의 아이콘, 이름, 캐시 정책 등의 정보를 포함하고 있습니다. 다음은 manifest.json 파일의 예시입니다:

{
  "name": "My PWA",
  "short_name": "PWA",
  "icons": [
    {
      "src": "/static/images/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff"
}

이 예시에서는 name과 short_name으로 앱의 이름을 지정하고, icons 배열에서는 앱의 아이콘을 설정합니다. start_url은 앱이 시작될 URL을 나타내며, display는 앱이 브라우저 탭이나 홈 화면에 표시될 방식을 결정합니다. background_color와 theme_color는 앱의 배경색과 테마 색상을 지정합니다.

2. Service Worker 등록

PWA는 서비스 워커(Service Worker)를 사용해 오프라인 작동 기능을 제공합니다. web2py에서는 static/js/sw.js와 같은 경로에 서비스 워커 JavaScript 파일을 생성하고, 다음과 같이 서비스 워커를 등록할 수 있습니다:

def service_worker():
    response.headers['Service-Worker-Allowed'] = '/'
    content = open('applications/myapp/static/js/sw.js', 'r').read()
    return response.render(content, content_type='application/javascript')

위의 예제에서 applications/myapp/static/js/sw.js는 서비스 워커 파일의 경로입니다.

3. 오프라인 페이지 처리

PWA는 오프라인 상황에서도 사용자에게 적절한 페이지를 제공해야 합니다. web2py에서는 static/offline.html와 같은 경로에 오프라인 페이지를 생성할 수 있습니다. 이 페이지는 사용자가 오프라인 상태일 때 표시될 내용을 담고 있습니다.

4. 웹 앱 매니페스트 추가

web2py에서는 default.py와 같은 컨트롤러 파일에 다음과 같이 웹 앱 매니페스트를 추가할 수 있습니다:

def index():
    response.headers['Link'] = '<static/manifest.json>;rel=manifest'
    return {}

위의 예제에서 static/manifest.json은 매니페스트 파일의 경로입니다.

5. 푸시 알림 지원

PWA는 푸시 알림 기능을 제공할 수도 있습니다. 이를 위해선 Firebase Cloud Messaging (FCM) 또는 다른 푸시 알림 서비스를 사용해야 합니다. web2py를 통해 FCM과 연동하는 방법은 다음 블로그 포스트에서 자세히 알아볼 수 있습니다.

위에서 제시한 방법을 통해 web2py 프레임워크에서 PWA를 지원할 수 있습니다. PWA는 모바일 앱과 웹 앱을 통합한 형태이기 때문에 앱의 접근성을 높이고 사용자 경험을 개선하는 데 매우 유용합니다. PWA를 통해 웹 개발의 다음 수준으로 나아갈 수 있습니다.