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

Dibyajyoti Pal

Dan Murphy

Marijn Kruisselbrink

منتشر شده: ۳ ژوئن ۲۰۲۶

برنامه‌های وب پیش‌رونده (PWA) با ارائه تجربیاتی شبیه به اپلیکیشن، وب را متحول کرده‌اند. با این حال، یکی از بزرگترین نقاط قوت آنها، یک چالش مداوم نیز بوده است: هویت اپلیکیشن به شدت با منشأ وب مرتبط است.

برای تغییر برند یا ساختار معماری خود (برای مثال، انتقال از www.example.com/social به social.example.com )، با یک دوراهی دردناک روبرو می‌شدید. هیچ راهی برای "جابجایی" یک PWA نصب شده وجود نداشت. کاربران مجبور بودند برنامه قدیمی را به صورت دستی حذف نصب کرده و دکمه نصب برنامه جدید را پیدا کنند.

تیم PWA از معرفی PWA Origin Migration در کروم ۱۵۰ هیجان‌زده است. این ویژگی جدید پلتفرم به شما امکان می‌دهد PWAهای نصب‌شده را به‌طور یکپارچه و با حداقل وقفه برای کاربر به یک PWA Origin جدید در همان سایت منتقل کنید، در حالی که همچنان کاربر را به اندازه کافی مطلع نگه می‌دارید.

مهاجرت از مبدا چه چیزی را ممکن می‌سازد؟

شما می‌توانید معماری سایت خود را بدون آسیب رساندن به تجربه کاربری تغییر دهید:

• آزادی معماری فنی: زیردامنه یا مسیر برنامه خود را تغییر دهید.
• رفع مشکل تقسیم وضعیت برنامه‌ها : مشکلی که باعث می‌شد تغییر start_url بدون شناسه پایدار، به‌طور تصادفی باعث نصب برنامه‌های تکراری شود، برطرف شد.

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

نحوه مهاجرت یک PWA

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

1. فعال کردن handshake:
   • migrate_from به برنامه جدید اضافه کنید.
   • فیلد allow_migration را به فایل /.well-known/web-app-origin-association در مبدا قدیمی اضافه کنید.
2. انتخاب رفتار: suggest (یا خالی) از ایجاد وقفه در کار کاربر جلوگیری می‌کند، که احتمالاً در طول راه‌اندازی اولیه مفید است. اگر کاربر نتواند به استفاده از URL های قدیمی ادامه دهد، کاربر را force مسدود کرده و نیاز به مهاجرت دارد.
3. برنامه قدیمی را به‌روز نگه دارید: اگر سایت قدیمی به سایت جدید ریدایرکت می‌شود، از ویژگی install_url در بلوک migrate_from استفاده کنید تا مطمئن شوید مرورگر همچنان می‌تواند مانیفست قدیمی را برای به‌روزرسانی‌های احتمالی پیدا کند.
4. پیاده‌سازی id در فایل مانیفست مقصد: کروم از مانیفست برنامه مقصد می‌خواهد که یک فیلد id را در آن بگنجاند. این کار تضمین می‌کند که برنامه دچار اشتباه رایج ایجاد برنامه‌های چندبخشی با تغییر start_url بدون داشتن مجموعه id نشود.

دست دادن دو طرفه: چگونه کار می‌کند

برای تضمین امنیت و جلوگیری از تصاحب خصمانه، این مهاجرت نیاز به یک تبادل امن (secure handshake) بین مبدا قدیمی و جدید دارد. این تبادل تضمین می‌کند که هر دو سایت توسط یک نهاد کنترل می‌شوند.

مرحله ۱: برنامه جدید، برنامه قبلی را اعلام می‌کند (الزامی)

یک فیلد migrate_from به مانیفست برنامه وب برنامه جدید اضافه کنید.

// Manifest at https://fileman.google.com/manifest.json
{
  "name": "File Manager",
  "id": "/files/",
  "start_url": "/files/index.html",
  ....
  "migrate_from": [
    "https://drive.google.com/"
  ]
}

مرحله ۲: مبدا قدیمی، مهاجرت را تایید می‌کند (الزامی)

برای جلوگیری از اینکه یک سایت جدید به طور یکجانبه یک برنامه قدیمی را بدزدد، مبدا قدیمی باید صریحاً مهاجرت را تأیید کند. این کار را با یک فایل پیکربندی .well-known انجام می‌دهد.

// File at https://drive.google.com/.well-known/web-app-origin-association
{
  "https://fileman.google.com/files/": {
    "allow_migration": true
  }
}

مرحله ۳: سیگنال‌دهی پیشگیرانه (اختیاری)

برای اینکه به‌روزرسانی بدون انتظار برای بازدید کاربر از سایت جدید انجام شود، فایل مانیفست برنامه قدیمی را به‌روزرسانی کنید تا به سایت جدید اشاره کند.

// Manifest at https://drive.google.com/manifest.json
{
  "name": "Drive",
  "start_url": "/",
  "migrate_to": {
    "id": "https://fileman.google.com/files/",
    "install_url": "https://fileman.google.com/drive/installwebapp?usp=migrate"
  }
}

مرحله ۴: مدیریت ریدایرکت‌ها (اختیاری)

به عنوان جایگزینی برای استفاده از فیلد migrate_to ، می‌توانید با هدایت URLهای برنامه قدیمی به برنامه جدید، مهاجرت را اعلام کنید و با تکیه بر scope_extensions کاری کنید که بنر خارج از محدوده در برنامه قدیمی نمایش داده نشود . این بدان معناست که مانیفست برنامه قدیمی هرگز دیده نخواهد شد و بنابراین هرگز نمی‌توان آن را به‌روزرسانی کرد. برای اینکه به برنامه قدیمی اجازه دهید قبل از وقوع مهاجرت برنامه، به‌روزرسانی خود را ادامه دهد، install_url درون migrate_from تنظیم کنید تا مرورگر را از URLای که باید دریافت کند و مانیفست قدیمی هنوز بدون تغییر مسیر به آن متصل است، مطلع کند.

// Manifest at https://fileman.google.com/manifest.json
{
  "name": "File Manager",
  "id": "/files/",
  "start_url": "/files/index.html",
  ....
  "migrate_from": [
    {
      "id": "https://drive.google.com/",
      "install_url": "https://drive.google.com/drive/installwebapp?usp=migrate"
    }
  ]
}

همین! UX مشابه همان چیزی است که برای به‌روزرسانی برنامه استفاده می‌شود، جایی که کاربر در گوشه سمت راست بالای پنجره برنامه مطلع می‌شود:

با کلیک روی «بررسی به‌روزرسانی برنامه»، UX زیر (بسته به آنچه در مانیفست تغییر کرده است) نمایش داده می‌شود:

کنترل تجربه کاربری

شما می‌توانید با استفاده از پرچم behavior flag)، میزان تهاجمی بودن مهاجرت را انتخاب کنید:

1. پیشنهاد (پیش‌فرض): کاربر یک اعلان غیرفعال دریافت می‌کند (مثلاً در منوی برنامه). او می‌تواند با اجرای پنجره گفتگو، به‌روزرسانی، حذف نصب برنامه یا نادیده گرفتن انتقال را انتخاب کند.
2. اجبار: در اجرای بعدی برنامه، کاربر با یک پنجره‌ی مسدودسازی مواجه می‌شود. او باید یا برنامه را به نسخه‌ی جدید به‌روزرسانی کند یا آن را حذف نصب کند (لطفاً به تصویر زیر مراجعه کنید).

مثال زیر نحوه تنظیم این انتخاب را نشان می‌دهد،

"migrate_from": [
  { 
    "id": "https://example.com/social/",
    "behavior": "force" // or suggest
  }
]

نتیجه‌گیری

ویژگی PWA Migration به توسعه‌دهندگان این امکان را می‌دهد که بدون جا گذاشتن کاربران، به ساخت معماری‌های وب مدرن و انعطاف‌پذیر ادامه دهند.