Django 웹사이트를 PWA로 변환

Django 웹사이트를 PWA(Progressive web app)로 매우 쉽게 변환할 수 있습니다.
PWA는 휴대폰이나 PC에서 일반 기본 앱처럼 보이는 웹 앱입니다. 크로스플랫폼 어플리케이션을 만들기 위한 지름길이라고 생각합니다


우리는 django-pwa 패키지를 동일하게 사용할 것입니다.

설치

django-pwa 패키지 설치

pip install django-pwa

settings.py의 INSTALLED_APPS 목록에 pwa를 추가합니다.

# project/settings.py
INSTALLED_APPS = [
    ...
    'pwa',
    ...
]

구성

settings.py 파일에 PWA 설정 추가

# project/settings.py

PWA_APP_NAME = 'My App'
PWA_APP_DESCRIPTION = "My app description"
PWA_APP_THEME_COLOR = '#0A0302'
PWA_APP_BACKGROUND_COLOR = '#ffffff'
PWA_APP_DISPLAY = 'standalone'
PWA_APP_SCOPE = '/'
PWA_APP_ORIENTATION = 'any'
PWA_APP_START_URL = '/'
PWA_APP_STATUS_BAR_COLOR = 'default'
PWA_APP_ICONS = [
    {
        'src': '/static/images/my_app_icon.png',
        'sizes': '160x160'
    }
]
PWA_APP_ICONS_APPLE = [
    {
        'src': '/static/images/my_apple_icon.png',
        'sizes': '160x160'
    }
]
PWA_APP_SPLASH_SCREEN = [
    {
        'src': '/static/images/icons/splash-640x1136.png',
        'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
    }
]
PWA_APP_DIR = 'ltr'
PWA_APP_LANG = 'en-US'

Django 4와 호환되도록 만들기

현재django-pwa 버전 1.0.10은 Django 4와 호환되지 않습니다. 따라서 이전 버전의 Django를 사용 중이거나 이 패키지가 업데이트된 경우 이 단계를 건너뛸 수 있습니다( * 로 표시됨).

*기본 디렉토리에 새 폴더 만들기*

이름을 pwa1로 지정했습니다.

*다음 내용으로 새 파일 urls.py를 만듭니다.*

from django.urls import re_path as url

from .views import manifest, service_worker, offline

# Serve up serviceworker.js and manifest.json at the root
urlpatterns = [
    url(r'^serviceworker\.js$', service_worker, name='serviceworker'),
    url(r'^manifest\.json$', manifest, name='manifest'),
    url('^offline/$', offline, name='offline')
]

프로젝트의 urls.py 파일에 다음을 추가합니다.

...
urlpatterns=[
    ...
    path('', include('pwa.urls')),
    # if you used the above method for compatibility then use the following code instead
    #path('', include('pwa1.urls')),
    ...
    ]

정적 폴더에 다음 내용이 포함된 serviceworker.js 파일을 만듭니다.

// Base Service Worker implementation.  To use your own Service Worker, set the PWA_SERVICE_WORKER_PATH variable in settings.py

var staticCacheName = "django-pwa-v" + new Date().getTime();
var filesToCache = [
    '/offline',
    '/css/django-pwa-app.css',
    '/images/icons/icon-72x72.png',
    '/images/icons/icon-96x96.png',
    '/images/icons/icon-128x128.png',
    '/images/icons/icon-144x144.png',
    '/images/icons/icon-152x152.png',
    '/images/icons/icon-192x192.png',
    '/images/icons/icon-384x384.png',
    '/images/icons/icon-512x512.png',
    '/static/images/icons/splash-640x1136.png',
    '/static/images/icons/splash-750x1334.png',
    '/static/images/icons/splash-1242x2208.png',
    '/static/images/icons/splash-1125x2436.png',
    '/static/images/icons/splash-828x1792.png',
    '/static/images/icons/splash-1242x2688.png',
    '/static/images/icons/splash-1536x2048.png',
    '/static/images/icons/splash-1668x2224.png',
    '/static/images/icons/splash-1668x2388.png',
    '/static/images/icons/splash-2048x2732.png'
];

// Cache on install
self.addEventListener("install", event => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.addAll(filesToCache);
            })
    )
});

// Clear cache on activate
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(cacheName => (cacheName.startsWith("django-pwa-")))
                    .filter(cacheName => (cacheName !== staticCacheName))
                    .map(cacheName => caches.delete(cacheName))
            );
        })
    );
});

// Serve from Cache
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
            .catch(() => {
                return caches.match('offline');
            })
    )
});

템플릿에서 PWA 메타 로드base.html 파일에 다음 태그를 추가합니다.

{% load pwa %}

<head>
    ...
    {% progressive_web_app_meta %}
    ...
</head>

그게 다야 🎉

이제 모바일과 PC에서 지원되는 브라우저에서 사이트를 앱으로 설치하는 옵션을 볼 수 있습니다.