راهنمای کامل PWA در وردپرس

آیا می‌خواهید بدون اینکه کاربران مجبور باشند چیزی از اپ‌استور دانلود کنند، سایت وردپرسی شما مثل یک اپلیکیشن موبایل رفتار کند؟ این دقیقاً همان کاری است که یک ‌PWA انجام می‌دهد. در این مقاله با مفهوم PWA، مزایا و معایب آن، بهترین افزونه‌های رایگان PWA در وردپرس و همچنین روش فعال‌سازی دستی آن با کد آشنا می‌شوید.

PWA چیست؟

برنامه وب پیش‌رونده یا Progressive Web App (به اختصار PWA)، یک تکنولوژی وب مدرن است که تجربه‌ای شبیه به اپلیکیشن بومی موبایل را از طریق مرورگر وب فراهم می‌کند. یک PWA از سه رکن اصلی تشکیل شده است:

• مانیفِست: Web App Manifest، یک فایل JSON است که اطلاعات اپ مثل نام، آیکون و رنگ را تعریف می‌کند.
• وُرکر: Service Worker، یک قطعه کد جاوااسکریپت است که در پس‌زمینه اجرا می‌شود و کش کردن و عملکرد آفلاین را مدیریت می‌کند.
• گواهی SSL: پروتکل HTTPS سایت، بستر امن برای عملکرد درست Service Worker را فراهم می‌کند.

به زبان ساده، PWA به کاربران این امکان را می‌دهد که سایت شما را روی صفحه اصلی گوشی خود نصب کنند، حتی در حالت آفلاین از آن استفاده کنند و اعلان‌های پوش (push notifications) دریافت کنند؛ دقیقاً مثل یک اپلیکیشن واقعی، اما بدون نیاز به اپ‌استور!

چرا PWA در وردپرس؟

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

مزایای PWA در وردپرس

• سرعت بارگذاری بالاتر: Service Worker محتوا را کش می‌کند و صفحات در بارگذاری مجدد خیلی سریع‌تر نمایش داده می‌شوند.
• کارایی آفلاین: کاربران حتی بدون اینترنت می‌توانند صفحات از قبل بازدیدشده را ببینند.
• نصب روی Home Screen: کاربران می‌توانند سایت را مثل یک اپ روی صفحه گوشی خود نصب کنند؛ بدون نیاز به اپ‌استور.
• بهبود SEO و Core Web Vitals: گوگل سایت‌های سریع و موبایل‌فرندلی را بالاتر رتبه‌بندی می‌کند. PWA مستقیماً بر معیارهای LCP و FID تأثیر مثبت می‌گذارد.
• پوش نوتیفیکیشن: ارسال اعلان مستقیم به کاربران حتی زمانی که مرورگر بسته است.
• هزینه پایین‌تر نسبت به اپ بومی: نیازی به توسعه اپ جداگانه برای iOS و اندروید نیست.
• نرخ تبدیل بهتر: تجربه کاربری روان‌تر منجر به ماندگاری بیشتر و فروش بیشتر می‌شود.

معایب و محدودیت‌های PWA

• پشتیبانی محدود در iOS: سافاری بر روی آیفون پشتیبانی کامل‌تری از PWA نسبت به قبل دارد، اما هنوز محدودیت‌هایی مثل پوش نوتیفیکیشن در برخی نسخه‌ها وجود دارد.
• دسترسی محدود به سخت‌افزار: PWA نمی‌تواند مثل یک اپ بومی به همه قابلیت‌های سخت‌افزاری (مثل بلوتوث یا NFC) دسترسی داشته باشد.
• حجم کش: ذخیره‌سازی زیاد می‌تواند فضای حافظه دستگاه کاربر را اشغال کند.
• نیاز به HTTPS: سایت شما حتماً باید گواهی SSL داشته باشد تا Service Worker کار کند.
• عدم حضور در اپ‌استورها: کاربرانی که فقط از اپ‌استور یا گوگل‌پلی، اپ دانلود می‌کنند، PWA را از طریق این کانال‌ها پیدا نمی‌کنند.

بهترین افزونه رایگان PWA در وردپرس

برای وردپرس چندین افزونه PWA رایگان وجود دارد. در اینجا سه گزینه برتر را بررسی می‌کنیم:

۱) افزونه SuperPWA (پیشنهادی)

افزونه SuperPWA پرطرفدارترین و بهترین افزونه رایگان PWA برای وردپرس است. با بیش از ۴۰,۰۰۰ نصب فعال و امتیاز ۴/۶، این افزونه تجربه‌ای ساده و قابل اعتماد ارائه می‌دهد:

• راه‌اندازی در کمتر از ۱ دقیقه
• تولید خودکار manifest.json و Service Worker
• حذف تمیز: هیچ اثری در دیتابیس باقی نمی‌گذارد
• سازگاری با تمام قالب‌ها و افزونه‌ها
• پشتیبانی از UTM Tracking برای تحلیل ترافیک PWA

۲) افزونه PWA for WP

افزونه PWA for WP امکانات پیشرفته‌تری مثل صفحه آفلاین سفارشی، کش‌کردن محتوا و ادغام با AMP ارائه می‌دهد. با بیش از ۲۰,۰۰۰ نصب فعال، محبوبیت بالایی دارد. برخی ویژگی‌های پیشرفته افزونه نیاز به نسخه Pro آن دارد.

۳) افزونه PWA

افزونه PWA توسط بعضی از اعضای تیم هسته وردپرس توسعه یافته و بیشتر برای توسعه‌دهندگانی مناسب است که می‌خواهند Service Worker را به صورت ماژولار در قالب یا افزونه خود ادغام کنند. API انعطاف‌پذیری دارد اما برای کاربران معمولی پیچیده‌تر است.

فعال‌سازی PWA در وردپرس با افزونه

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

در تنظیمات افزونه، باید موارد زیر را تکمیل کنید:

• Application Name: نام سایت شما
• Application Short Name: نام کوتاه برای آیکون اپ (حداکثر ۱۲ کاراکتر)
• Application Icon: آپلود آیکون با ابعاد ۵۱۲×۵۱۲ پیکسل
• Splash Screen Icon: آیکون صفحه اسپلش (۱۹۲×۱۹۲ پیکسل)
• Background Color: رنگ پس‌زمینه صفحه اسپلش
• Theme Color: رنگ تم برای نوار مرورگر
• Start Page: صفحه‌ای که پس از اجرای PWA باز می‌شود

بعد از ذخیره تنظیمات، به بخش Status بروید و مطمئن شوید همه موارد تیک سبز دارند.

تمام! وبسایت وردپرسی شما اکنون یک PWA است. برای تست، سایت را در مرورگر گوشی خود باز کنید. باید یک بنر «افزودن به صفحه اصلی» یا Add to Home Screen نمایش داده شود.

فعال‌سازی دستی PWA در وردپرس

اگر می‌خواهید بدون نیاز به هیچ افزونه‌ای، کنترل کاملی روی PWA سایت خود داشته باشید، این روش راه‌گشای شماست. این روش برای توسعه‌دهندگانی که با فایل‌های وردپرس آشنایی دارند مناسب است.

پیش‌نیازها

• سایت شما حتماً باید روی HTTPS باشد (گواهی SSL فعال).
• باید به FTP یا فایل منیجر هاست دسترسی داشته باشید.
• باید به فایل functions.php قالب خود دسترسی داشته باشید.

گام ۱) ساخت فایل مانیفِست

در روت سایت (پوشه‌ای که wp-config.php در آن قرار دارد)، یک فایل به نام manifest.json بسازید و کد زیر را در آن قرار دهید:

{
  "name": "نام کامل سایت شما",
  "short_name": "نام کوتاه",
  "description": "توضیح کوتاه از سایت شما",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0073aa",
  "icons": [
    {
      "src": "/pwa-icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/pwa-icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

گام ۲) آماده‌سازی آیکون‌ها

یک پوشه به نام pwa-icons در روت سایت بسازید و دو تصویر با مشخصات زیر در آن قرار دهید:

• icon-192.png — ابعاد دقیق ۱۹۲×۱۹۲ پیکسل
• icon-512.png — ابعاد دقیق ۵۱۲×۵۱۲ پیکسل

توصیه می‌شود آیکون‌ها Maskable باشند؛ یعنی لبه‌های آیکون پدینگ داشته باشند تا در دستگاه‌های مختلف قطع نشوند. ابزار آنلاین maskable.app برای این کار رایگان است.

گام ۳) ساخت فایل وُرکر

در روت سایت، یک فایل به نام sw.js بسازید:

"use strict";

const CACHE_NAME = "my-wp-pwa-v1";
const OFFLINE_URL = "/offline/";

const PRE_CACHE_URLS = ["/", "/offline/"];

// install Service Worker and pre-cache important resources
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(PRE_CACHE_URLS);
    }),
  );
  self.skipWaiting();
});

// delete old caches when activating new Service Worker
self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheName !== CACHE_NAME) {
            return caches.delete(cacheName);
          }
        }),
      );
    }),
  );
  self.clients.claim();
});

// network first strategy for all GET requests, except admin, REST API and login pages
self.addEventListener("fetch", (event) => {
  // just handle GET requests, skip POST, PUT, DELETE etc.
  if (event.request.method !== "GET") return;

  // determine if the request is for admin, REST API or login pages
  const url = new URL(event.request.url);
  if (url.pathname.startsWith("/wp-admin") || url.pathname.startsWith("/wp-json") || url.pathname.startsWith("/wp-login")) {
    return;
  }

  event.respondWith(
    fetch(event.request)
      .then((response) => {
        // save a copy of the response in cache if it's valid
        if (response.status === 200) {
          const responseClone = response.clone();
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, responseClone);
          });
        }
        return response;
      })
      .catch(() => {
        // return cached response if network fails, or show offline page if not in cache
        return caches.match(event.request).then((cached) => {
          if (cached) return cached;
          // show offline page for navigation requests
          return caches.match(OFFLINE_URL);
        });
      }),
  );
});

گام ۴) ساخت صفحه آفلاین

در پیشخوان وردپرس، یک برگه جدید با نامک offline بسازید. متنی مانند «شما در حال حاضر آفلاین هستید. لطفاً اینترنت خود را بررسی کنید.» در آن قرار دهید و آن را مطابق با سلیقه و طراحی خود، منتشر کنید.

گام ۵) ثبت مانیفست و ورکر در وردپرس

فایل functions.php قالب خود را باز کنید و کد زیر را به آن اضافه کنید. توصیه می‌شود به جای تغییر در قالب اصلی، این کار را با قالب فرزند (Child Theme) انجام دهید.

<?php
function my_pwa_add_manifest() {
  echo '<link rel="manifest" href="' . esc_url(home_url('/manifest.json')) . '">' . "\n";
  echo '<meta name="theme-color" content="#0073aa">' . "\n";
  echo '<meta name="mobile-web-app-capable" content="yes">' . "\n";
  echo '<meta name="apple-mobile-web-app-capable" content="yes">' . "\n";
  echo '<meta name="apple-mobile-web-app-status-bar-style" content="default">' . "\n";
  echo '<meta name="apple-mobile-web-app-title" content="' . esc_attr(get_bloginfo('name')) . '">' . "\n";
  echo '<link rel="apple-touch-icon" href="' . esc_url(home_url('/pwa-icons/icon-192.png')) . '">' . "\n";
}
add_action('wp_head', 'my_pwa_add_manifest');

function my_pwa_register_sw() {
  // not allowed to load on admin pages
  if (is_admin()) return;
?>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js', {
            scope: '/'
          })
          .then(function(registration) {
            console.log('PWA: Service Worker registered.', registration.scope);
          })
          .catch(function(error) {
            console.log('PWA: Error Registering Service Worker:', error);
          });
      });
    }
  </script>
<?php
}
add_action('wp_footer', 'my_pwa_register_sw');

گام ۶) تنظیم دسترسی

اگر وب‌سرور میزبان شما از آپاچی استفاده می‌کند، فایل htaccess. روت سایت را باز کنید و قبل از بلاک شروع وردپرس، این خطوط را اضافه کنید:

# PWA Block
<FilesMatch "manifest\.json$">
    Header set Content-Type "application/manifest+json"
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

<FilesMatch "sw\.js$">
    Header set Service-Worker-Allowed "/"
    Header set Cache-Control "no-cache"
</FilesMatch>

اگر از وب‌سرور Nginx استفاده می‌کنید، موارد زیر را به کانفیگ سرور اضافه کنید:

location = /manifest.json {
    add_header Content-Type application/manifest+json;
    add_header Access-Control-Allow-Origin *;
}

location = /sw.js {
    add_header Service-Worker-Allowed /;
    add_header Cache-Control no-cache;
}

گام ۷) تست و بررسی PWA

پس از انجام همه مراحل، PWA را با روش‌های زیر تست کنید:

1. مرورگر کروم را باز کنید و به سایت مدنظر بروید.
2. کلید F12 را بزنید تا DevTools مرورگر باز شود.
3. به تب Application بروید.
4. در منوی سمت چپ، روی Manifest کلیک کنید. باید اطلاعات فایل manifest.json نمایش داده شود.
5. روی Service Workers کلیک کنید. باید وضعیت activated and running نشان دهد.
6. در تب Lighthouse، یک آدیت PWA اجرا کنید و نمره را ببینید.

نکات مهم و رفع مشکلات رایج

• Service Worker کار نمی‌کند: مطمئن شوید سایت شما HTTPS دارد. بدون گواهی SSL معتبر، Service Worker اصلاً ثبت نخواهد شد.
• manifest.json پیدا نمی‌شود: مطمئن شوید فایل در روت سایت (همان پوشه wp-config.php) قرار دارد، نه داخل پوشه قالب.
• آیکون‌ها نمایش داده نمی‌شوند: در DevTools مرورگر به Application > Manifest بروید. اخطارهای دقیق خطا را نشان می‌دهد.
• تغییرات SW اعمال نمی‌شود: هر بار که sw.js را تغییر می‌دهید، مقدار CACHE_NAME را تغییر دهید (مثلاً v1 به v2) تا کاربران کش قدیمی را دور بزنند.
• کاربران لاگین‌شده مشکل دارند: در کد sw.js، مسیرهای wp-admin و wp-login را از کش حذف کرده‌اید. این کافی است. اما اگر مشکل ادامه داشت، کوکی‌های احراز هویت را از استراتژی کش خارج کنید.

سؤالات متداول

فعال‌سازی PWA یکی از بهترین سرمایه‌گذاری‌هایی است که می‌توانید برای وبسایت وردپرسی خود انجام دهید. از بهبود سرعت و SEO گرفته تا تجربه کاربری بهتر و کاهش هزینه توسعه اپلیکیشن.

اگر می‌خواهید سریع شروع کنید، افزونه SuperPWA را نصب کنید و در کمتر از ۵ دقیقه سایت خود را PWA کنید. اگر توسعه‌دهنده وردپرس هستید و کنترل کامل می‌خواهید، روش دستی را با استفاده از کدهای ارائه شده در این مقاله پیاده‌سازی کنید.