PWA چطور تجربه موبایل فروشگاه را متحول می‌کند؟ | progressive web app ecommerce

در فروشگاه‌های آنلاین، PWA (Progressive Web App) لایه‌ای است که تجربه اپ‌مانند را بدون نیاز به نصب از استور فراهم می‌کند و پایه تجربه موبایل حرفه‌ای محسوب می‌شود. بدون manifest صحیح، بدون آیکون‌های استاندارد، بدون Install Prompt و بدون تست دقیق، فروشگاه PWA نمی‌تواند از مزیت‌های خود استفاده کند و کاربران تجربه‌ای ناقص خواهند داشت. تفاوت PWA و اپ Native، انتخاب استراتژی نصب و ادغام با Service Worker، تصمیم‌های معماری را به تصمیم‌های تجربه خرید گره می‌زند. Manifest، Service Worker، Install Prompt و Offline Experience، چهار لایه ضروری در PWA فروشگاهی هستند. در این راهنما از ساختار پایه تا استقرار تولیدی PWA در فروشگاه آنلاین را با نگاه مهندسی و کد عملی پوشش می‌دهیم.

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

PWA چیست و چه تفاوتی با اپ Native دارد؟

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

Manifest: تعریف هویت اپ.
Service Worker: کش و آفلاین.
HTTPS: الزام امنیتی.

راهنمای Service Worker پیشرفته و بهینه‌سازی موبایل فروشگاه نقطه شروع مناسبی هستند.

مقایسه PWA و اپ Native

معیار	PWA	اپ Native
نصب	از مرورگر	از App Store
حجم	زیر 5MB	50-200MB
به‌روزرسانی	خودکار	دستی
دسترسی به سخت‌افزار	محدود	کامل
Push Notification	بله (Android، iOS 16.4+)	بله
هزینه توسعه	کم	بالا

چرا PWA برای فروشگاه مناسب است

- دسترسی سریع از صفحه اصلی
- تجربه تمام‌صفحه بدون نوار مرورگر
- Offline Fallback
- Push Notification
- حجم کم و نصب سریع
- به‌روزرسانی خودکار

manifest.json حرفه‌ای

Manifest فایل JSON است که هویت اپ را تعریف می‌کند.

{
  "name": "فروشگاه WordPressKar",
  "short_name": "WPkar",
  "description": "فروشگاه آنلاین با تجربه اپ‌مانند",
  "start_url": "/?utm_source=pwa",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#ffffff",
  "theme_color": "#0073aa",
  "lang": "fa",
  "dir": "rtl",
  "icons": [
    { "src": "/icons/icon-72.png",  "sizes": "72x72",   "type": "image/png" },
    { "src": "/icons/icon-96.png",  "sizes": "96x96",   "type": "image/png" },
    { "src": "/icons/icon-128.png", "sizes": "128x128", "type": "image/png" },
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ],
  "shortcuts": [
    { "name": "سبد خرید",  "url": "/cart/",     "icons": [ { "src": "/icons/cart-96.png", "sizes": "96x96" } ] },
    { "name": "محصولات جدید", "url": "/shop/?orderby=date" }
  ],
  "screenshots": [
    { "src": "/screenshots/home.png", "sizes": "1080x1920", "type": "image/png" }
  ]
}

افزودن Manifest به HTML

<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0073aa" />

الزامات آیکون‌ها

- حداقل دو آیکون: 192x192 و 512x512
- فرمت PNG
- Purpose: any maskable
- طراحی ساده و قابل تشخیص در سایز کوچک

Shortcuts

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

Install Prompt و تجربه نصب

Install Prompt به کاربر امکان نصب اپ را از مرورگر می‌دهد. رفتار این Prompt در مرورگرهای مختلف متفاوت است.

رویداد beforeinstallprompt

let deferredPrompt;
window.addEventListener( "beforeinstallprompt", function( e ) {
  e.preventDefault();
  deferredPrompt = e;
  // نمایش دکمه نصب
  document.querySelector( "#install-btn" ).style.display = "block";
} );

document.querySelector( "#install-btn" ).addEventListener( "click", async function() {
  if ( ! deferredPrompt ) return;
  deferredPrompt.prompt();
  const choiceResult = await deferredPrompt.userChoice;
  if ( choiceResult.outcome === "accepted" ) {
    console.log( "کاربر نصب را پذیرفت" );
  }
  deferredPrompt = null;
} );

الزامات نصب PWA

- HTTPS
- Manifest معتبر با name، icons، start_url
- Service Worker با fetch handler
- حداقل یک بار بازدید کاربر

الگوی UX نصب

1. نمایش بنر نصب پس از 30 ثانیه تعامل
2. امکان بستن بنر (localStorage)
3. نمایش در صفحات خاص (صفحه اصلی، محصول)
4. عدم نمایش در Checkout و صفحات حساس

detecting iOS

iOS از beforeinstallprompt پشتیبانی نمی‌کند. باید راهنمای دستی نمایش داده شود:

- Safari > Share > Add to Home Screen

Service Worker در PWA فروشگاهی

Service Worker لایه کش و آفلاین PWA است.

استراتژی کش برای فروشگاه

منبع	استراتژی
CSS، JS، فونت	Cache-First
تصاویر محصول	Stale-While-Revalidate
API محصولات	Network-First
صفحه اصلی	Network-First با Offline Fallback
سبد خرید، Checkout	Network-Only

پیاده‌سازی

const CACHE_NAME = "wpk-pwa-v1";
const OFFLINE_URL = "/offline/";

self.addEventListener( "install", function( event ) {
  event.waitUntil(
    caches.open( CACHE_NAME ).then( function( cache ) {
      return cache.addAll( [
        "/",
        "/offline/",
        "/assets/css/main.css",
        "/assets/js/main.js",
      ] );
    } )
  );
  self.skipWaiting();
} );

self.addEventListener( "fetch", function( event ) {
  const url = new URL( event.request.url );

  if ( url.pathname.includes( "/cart" ) || url.pathname.includes( "/checkout" ) ) {
    return; // Network-only
  }

  if ( event.request.mode === "navigate" ) {
    event.respondWith(
      fetch( event.request ).catch( function() {
        return caches.match( OFFLINE_URL );
      } )
    );
    return;
  }

  event.respondWith(
    caches.match( event.request ).then( function( cached ) {
      return cached || fetch( event.request );
    } )
  );
} );

راهنمای Service Worker پیشرفته نقطه شروع مناسبی است.

Offline Experience در فروشگاه

تجربه آفلاین در فروشگاه، تفاوت بین PWA معمولی و PWA حرفه‌ای است.

الگوهای Offline در فروشگاه

1. Offline Page: صفحه ساده برای ناوبری
2. Cached Products: کش محصولات پربازدید
3. Offline Cart: مدیریت سبد در حالت آفلاین
4. Background Sync: ارسال سفارش در بازگشت اتصال

صفحه Offline فروشگاه

<div class="offline-notice">
  <h1>شما آفلاین هستید</h1>
  <p>می‌توانید محصولات کش‌شده را ببینید. سفارش‌های جدید بعداً ارسال می‌شوند.</p>
  <a href="/" class="btn">مشاهده صفحه اصلی</a>
</div>

کش محصولات پربازدید

self.addEventListener( "message", function( event ) {
  if ( event.data.type === "CACHE_PRODUCTS" ) {
    event.waitUntil(
      caches.open( CACHE_NAME ).then( function( cache ) {
        return cache.addAll( event.data.urls );
      } )
    );
  }
} );

Push Notification برای فروشگاه

Push Notification یکی از قوی‌ترین ابزارهای بازگشت مشتری است.

الگوهای Push در فروشگاه

- اعلان سفارش جدید
- یادآوری سبد رهاشده
- تخفیف محدود زمانی
- محصول جدید در دسته مورد علاقه
- یادآوری نظرسنجی پس از خرید

پیاده‌سازی

self.addEventListener( "push", function( event ) {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification( data.title, {
      body: data.body,
      icon: "/icons/icon-192.png",
      badge: "/icons/badge-72.png",
      data: { url: data.url },
      actions: [
        { action: "view", title: "مشاهده" },
        { action: "dismiss", title: "بستن" },
      ],
    } )
  );
} );

self.addEventListener( "notificationclick", function( event ) {
  event.notification.close();
  if ( event.action === "dismiss" ) return;
  event.waitUntil(
    clients.matchAll( { type: "window" } ).then( function( clientList ) {
      for ( const client of clientList ) {
        if ( client.url === event.notification.data.url && "focus" in client ) {
          return client.focus();
        }
      }
      if ( clients.openWindow ) {
        return clients.openWindow( event.notification.data.url );
      }
    } )
  );
} );

ارسال Push از WordPress

<?php
function wpk_send_push_to_customer( $customer_id, $payload ) {
    $subscription = get_user_meta( $customer_id, "wpk_push_subscription", true );
    if ( ! $subscription ) {
        return false;
    }
    $response = wp_remote_post( $subscription["endpoint"], array(
        "headers" => array(
            "TTL"           => "86400",
            "Content-Type"  => "application/json",
            "Authorization" => "vapid t=" . wpk_generate_vapid_token( $subscription["endpoint"] ),
        ),
        "body"    => wp_json_encode( $payload ),
        "timeout" => 15,
    ) );
    return ! is_wp_error( $response );
}

پیاده‌سازی PWA در WooCommerce

پیاده‌سازی PWA در WooCommerce از سه مسیر انجام می‌شود.

گزینه اول: افزونه PWA

افزونه‌های محبوب:
- SuperPWA
- PWA for WP
- WP PWA
- Progressive WordPress (PWA)

گزینه دوم: پیاده‌سازی دستی

<?php
add_action( "wp_head", function() {
    echo '<link rel="manifest" href="' . esc_url( get_theme_file_uri( "manifest.json" ) ) . '" />';
    echo '<meta name="theme-color" content="#0073aa" />';
} );

add_action( "wp_footer", function() {
    if ( is_admin() ) return;
    ?>
    <script>
    if ( "serviceWorker" in navigator ) {
        navigator.serviceWorker.register( "<?php echo esc_url( home_url( "/sw.js" ) ); ?>" );
    }
    </script>
    <?php
} );

گزینه سوم: Headless WooCommerce + Next.js PWA

معماری:
- WooCommerce به‌عنوان Backend
- Next.js PWA به‌عنوان Frontend
- Service Worker با next-pwa
- Manifest با next-pwa

مزیت: کنترل کامل روی تجربه
عیب: پیچیدگی بیشتر

راهنمای فروشگاه Headless با WooCommerce و Next.js و WooCommerce REST API نقطه شروع مناسبی هستند.

عملکرد و Core Web Vitals در PWA

PWA بر Core Web Vitals اثر مستقیم دارد.

بهبود Core Web Vitals با PWA

LCP:
- Preload منابع حیاتی
- کش کردن تصویر Hero
- استفاده از WebP/AVIF

INP:
- Defer JavaScript
- کش کردن JS غیرحیاتی
- کاهش Third-Party Scripts

CLS:
- تعیین ابعاد تصاویر
- Preload فونت‌ها
- رزرو فضای عناصر

پایش Core Web Vitals در PWA

import { onLCP, onINP, onCLS } from "web-vitals";

onLCP( ( { value } ) => {
  gtag( "event", "LCP", { value: Math.round( value ), non_interaction: true } );
} );

onINP( ( { value } ) => {
  gtag( "event", "INP", { value: Math.round( value ), non_interaction: true } );
} );

onCLS( ( { value } ) => {
  gtag( "event", "CLS", { value: Math.round( value * 1000 ), non_interaction: true } );
} );

راهنمای Web Vitals Monitoring و پایش سرعت و RUM و پایش واقعی کاربر نقطه شروع مناسبی هستند.

PWA و سئو

PWA به‌طور مستقیم فاکتور رتبه‌بندی نیست، اما از طریق Core Web Vitals و تجربه کاربری بر سئو اثر می‌گذارد.

اثرهای مثبت PWA بر سئو

- بهبود LCP و INP
- کاهش نرخ پرش
- افزایش زمان ماندگاری
- افزایش نرخ تبدیل
- بهبود Mobile-First Indexing

نکات سئو در PWA

- URL یکتا برای هر صفحه
- Canonical صحیح
- عدم استفاده از Fragment Routing
- امکان Crawl توسط Googlebot
- Sitemap شامل همه صفحات

تست سئو PWA

- Google Mobile-Friendly Test
- Search Console > Mobile Usability
- Lighthouse SEO Audit
- Fetch as Google در DevTools

تست و پایش PWA

تست PWA در سه سطح انجام می‌شود: سطح Manifest، سطح Service Worker و سطح تجربه کاربر.

Lighthouse PWA Audit

DevTools > Lighthouse > Progressive Web App
- Fast and reliable
- Installable
- PWA optimized

تست نصب

1. در Chrome Android، دکمه نصب باید ظاهر شود
2. پس از نصب، آیکون در صفحه اصلی ظاهر شود
3. اپ در حالت standalone باز شود
4. رنگ theme-color اعمال شود

تست Offline

1. DevTools > Application > Service Workers
2. تیک Offline
3. Reload
4. صفحه Offline یا کش‌شده نمایش داده شود

ابزارهای تست PWA

- Lighthouse
- PWA Builder (Microsoft)
- Web.dev Measure
- Chrome DevTools > Application

اشتباهات رایج در تست

اشتباه اول، نبود تست نصب روی iOS. اشتباه دوم، نبود تست Offline. اشتباه سوم، نبود تست Push. اشتباه چهارم، نبود تست با نسخه‌های مختلف مرورگر. اشتباه پنجم، نبود تست با کش فعال.

پرسش‌های پرتکرار درباره PWA

PWA چیست و چه تفاوتی با اپ Native دارد؟

PWA یک وب‌سایت با تجربه اپ‌مانند است که از مرورگر نصب می‌شود. اپ Native از App Store نصب می‌شود.

آیا PWA روی iOS پشتیبانی می‌شود؟

بله، از iOS 11.3 برای نصب پایه و از iOS 16.4 برای Push Notification.

چگونه Install Prompt را فعال کنم؟

با Manifest معتبر، Service Worker و HTTPS. راهنمای Service Worker پیشرفته را ببینید.

آیا PWA بر سئو اثر دارد؟

به‌طور غیرمستقیم، از طریق بهبود Core Web Vitals و تجربه کاربری.

چگونه PWA را در WooCommerce پیاده کنم؟

با افزونه PWA یا پیاده‌سازی دستی. راهنمای فروشگاه Headless WooCommerce را ببینید.

آیا PWA جایگزین اپ Native می‌شود؟

خیر، مکمل است. برای اکثر فروشگاه‌ها، PWA کافی است.

چگونه تجربه Offline را در فروشگاه بهتر کنم؟

با کش کردن محصولات پربازدید و Background Sync. راهنمای Service Worker پیشرفته را ببینید.

نتیجه و مسیر ادامه

PWA تجربه موبایل فروشگاه را از یک وب‌سایت ساده به یک اپ کاربردی تبدیل می‌کند. کلید موفقیت، Manifest حرفه‌ای، Service Worker کارآمد، Install Prompt مناسب و تست دقیق است. اگر این لایه‌ها با دقت طراحی شوند، نرخ تبدیل موبایل به‌طور محسوس بهبود می‌یابد.

پیشنهاد می‌کنم مسیر یادگیری را با Incremental Static Regeneration و به‌روزرسانی ادامه دهید و سپس Service Worker پیشرفته را به‌عنوان لایه پایه مطالعه کنید. همچنین مفهوم Progressive web app را در ویکی‌پدیا مرور کنید.

اگر روی پروژه واقعی خود PWA پیاده کرده‌اید، برایم جالب است بدانید کدام بخش — Manifest یا Install Prompt — بیشترین تأثیر را داشته است. تجربه خودتان را در دیدگاه‌ها بنویسید.