Dev Perfects

استفاده از PWA در Django 🌐

امروز می‌خوایم درباره یه موضوع داغ صحبت کنیم: Progressive Web Apps (PWA) و چطور می‌تونیم ازش توی Django استفاده کنیم. اگه دنبال این هستی که اپلیکیشن وبی بسازی که نه تنها روی مرورگرها کار کنه، بلکه تجربه‌ای شبیه به اپلیکیشن‌های موبایل به کاربران بده، PWA گزینه عالیه.

حالا PWA چی هست؟ 🤔

خب PWAها وب‌اپلیکیشن‌هایی هستن که ویژگی‌های اپلیکیشن‌های موبایل رو دارن. این ویژگی‌ها شامل:

1⃣ عملکرد آفلاین:
کاربران می‌تونن بدون اینترنت به اپلیکیشن دسترسی داشته باشن.

2⃣ نصب روی صفحه اصلی:
می‌تونی اپلیکیشن رو مستقیماً روی صفحه اصلی گوشی نصب کنی.

3⃣ سرعت بارگذاری بالا: PWAها به دلیل cache کردن منابع، خیلی سریع بارگذاری می‌شن.

چطور PWA رو توی Django پیاده‌سازی کنیم؟ 🚀

برای ساختن PWA با Django، مراحل زیر رو دنبال کن:

1⃣ نصب Django و تنظیم پروژه

اول از همه، یه پروژه Django جدید ایجاد کن:

django-admin startproject my_pwa
cd my_pwa
python manage.py startapp my_app

2⃣ تنظیمات پروژه

حالا باید my_app رو به INSTALLED_APPS توی فایل settings.py اضافه کنی:

INSTALLED_APPS = [
    ...
    'my_app',
]

3⃣ ساخت فایل Manifest

فایل Manifest یه فایل JSON هست که اطلاعاتی درباره اپلیکیشن تو می‌ده. این فایل رو به اسم manifest.json در پوشه static بساز:

{
    "name": "My PWA",
    "short_name": "PWA",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#FFFFFF",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

4⃣ اضافه کردن Service Worker

ـService Worker یه جاوااسکریپت‌ فایلیه که به مرورگر اجازه می‌ده کارهایی رو در پس‌زمینه انجام بده، مثلاً cache کردن منابع. این فایل رو به اسم sw.js در پوشه static بساز:

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('my-pwa-cache').then((cache) => {
            return cache.addAll([
                '/',
                '/static/icon-192x192.png',
                '/static/icon-512x512.png',
                // Add other resources here
            ]);
        })
    );
});

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

5⃣ اضافه کردن به HTML

حالا باید فایل‌های manifest و service worker رو به قالب HTML خودت اضافه کنی. به عنوان مثال، در base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="{% static 'manifest.json' %}">
    <title>My PWA</title>
</head>
<body>
    <h1>خوش اومدی به PWA من</h1>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/static/sw.js').then((registration) => {
                    console.log('Service Worker registered with scope:', registration.scope);
                });
            });
        }
    </script>
</body>
</html>

جمع بندی 🎉

با انجام این مراحل، شما یک PWA با Django ساختید که می‌تونه به کاربران تجربه‌ای مشابه با اپلیکیشن‌های موبایل بده. این یعنی کاربرها می‌تونن اپلیکیشن شما رو نصب کنن و حتی وقتی اینترنت ندارن هم بهش دسترسی داشته باشن. PWAها به سرعت در حال محبوبیت هستن و می‌تونی با استفاده از Django و این تکنیک‌ها، یه اپلیکیشن عالی بسازی.

امید وارم مفید بوده باشه :)❤️

#django #pwa

🔆 CHANNEL | GROUP

6 views08:30