پسوندهای دامنه برنامه وب

از کروم ۱۲۲ می‌توانید در نسخه آزمایشی origin برای عضو manifest برنامه scope_extensions مشترک شوید که به سایت‌هایی که چندین زیردامنه و دامنه سطح بالا را کنترل می‌کنند، اجازه می‌دهد تا به عنوان یک برنامه وب واحد ارائه شوند. این سند توضیح می‌دهد که چرا تیم کروم این ویژگی را معرفی می‌کند و چه زمانی ممکن است بخواهید از آن استفاده کنید.

دمیان رنزولی
Demián Renzulli
X GitHub
توماس اشتاینر

نمای کلی

برخی از برنامه‌های وب دارای چندین ریشه هستند، به عنوان مثال، example.com به عنوان برنامه اصلی، و سپس space_1.example.com ، …، space_n.example.com ، که گاهی اوقات با special-example.com ترکیب می‌شوند، به عنوان زیر-تجربه‌ها، همه زیر سقف برنامه اصلی قرار دارند. این نوع معماری سایت پیامدهایی در زمینه برنامه‌های وب پیش‌رونده دارد. محدودیت‌ها شامل عدم امکان اشتراک‌گذاری سرویس ورکرها، هر نوع دستگاه، فضای ذخیره‌سازی محلی و مجوزها در ریشه‌ها است. همچنین، پیمایش بین ریشه‌ای در یک PWA مستقل، یک رابط کاربری پنجره‌ای (نوار "خارج از محدوده") را نشان می‌دهد که نشان می‌دهد کاربر از تجربه PWA خارج شده است. می‌توانید نحوه حل برخی از این مشکلات را در مقالات برنامه‌های وب پیش‌رونده در سایت‌های چند ریشه‌ای و ساخت چندین برنامه وب پیش‌رونده در همان دامنه بیاموزید.

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

اهداف

هدف اصلی API افزونه‌های دامنه (Scope Extensions API) این است که به سایت‌هایی که چندین زیردامنه و دامنه سطح بالا را کنترل می‌کنند، اجازه دهد تا در مورد رابط کاربری برنامه وب و ثبت لینک، مانند یک برنامه وب پیوسته رفتار کنند. به عنوان مثال، اجازه دادن به سایت example.com که شامل example.com.co.uk و support.example.com است، تا حد امکان مانند یک برنامه وب واحد رفتار کند.

نموداری که یک PWA اصلی و زیرتجربه‌های مرتبط با آن را نشان می‌دهد.

افزونه‌های دامنه (Scope Extensions) به PWAهای چندمنبعی اجازه می‌دهند تا در مورد رابط کاربری برنامه وب، مانند یک برنامه وب پیوسته رفتار کنند.

در عمل، این به دو هدف خاص دیگر منجر می‌شود:

  • ناوبری بین مبداها: به کاربران اجازه دهید بدون ایجاد اختلال در تجربه کاربری، با فراخوانی رابط کاربری پنجره که به کاربر اطلاع می‌دهد در حال ترک PWA است، در مبداهای مرتبط پیمایش کنند.
  • ثبت لینک‌های بین‌منبعی: به برنامه‌های وب اجازه می‌دهد تا پیمایش‌های کاربر به سایت‌هایی که به آنها وابسته هستند را ثبت کنند.

ناوبری درون محدوده‌ای بین مبداها

به طور پیش‌فرض، وقتی کاربران در یک PWA مستقل بین ریشه‌ها حرکت می‌کنند، یک رابط کاربری پنجره‌ای به آنها نشان داده می‌شود که نشان می‌دهد آنها در حال حرکت به خارج از تجربه PWA هستند. در کروم، این رابط کاربری شامل یک نوار "خارج از محدوده" است که حاوی URL مبدا جدید است. این برای تجربه کاربر مخرب است، زیرا کاربران انتظار دارند که به حرکت در همان زمینه برنامه ادامه دهند، اما ممکن است احساس کنند که از آن خارج شده‌اند.

نوار خارج از محدوده در بالای یک PWA مستقل.

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

با استفاده از Scope Extensions، رابط کاربری پنجره هنگام پیمایش کاربران به هر یک از ریشه‌های مرتبط نمایش داده نمی‌شود، بنابراین PWA به عنوان یک تجربه یکپارچه ارائه می‌شود.

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

اعلان Omnibar برای یک PWA نصب شده.

بخشی از نوار آدرس کروم برای یک تب در ChromeOS که نشان‌دهنده‌ی قابلیت مدیریت لینک توسط یک PWA و گزینه‌ای برای به خاطر سپردن این تصمیم است.

اگر کاربری روی لینکی که خارج از محدوده PWA است (از جمله لینک‌های مربوط به زیردامنه‌ها یا دامنه‌های سطح بالا) کلیک کند، به عنوان لینکی که متعلق به آن است شناخته نمی‌شود. به عنوان مثال، لینک‌ها در یک تب مرورگر باز می‌شوند بدون اینکه هیچ نشانه‌ای به کاربر نشان داده شود که برنامه‌ای وجود دارد که قادر به مدیریت لینک است. API افزونه‌های دامنه امکان گسترش محدوده PWA را فراهم می‌کند تا ریشه‌های مرتبط به عنوان لینک‌های درون محدوده در نظر گرفته شوند.

پیاده‌سازی

پیاده‌سازی گسترش دامنه نیازمند ایجاد رابطه بین مبدأ اصلی و مبدأهای مرتبط است.

فهرست ریشه‌های مرتبط را اعلام کنید

یک عضو مانیفست برنامه وب scope_extensions را به مبدأ اصلی PWA اضافه کنید تا برنامه وب بتواند دامنه خود را به سایر مبدأها گسترش دهد.

مانیفست برنامه وب (https://example.com) 

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

تأیید انجمن‌ها

هر یک از ریشه‌های ذکر شده، ارتباط با برنامه وب را با استفاده از یک فایل پیکربندی /.well-known/web-app-origin-association تأیید می‌کند. این فایل باید web-app-origin-association نامگذاری شود و دقیقاً در همین مکان ارائه شود، زیرا یک URL شناخته شده است.

‎/.well-known/web-app-origin-association (مبدا مرتبط) 

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

نسخه آزمایشی

نسخه آزمایشی شامل دو سایت است:

برای انجام آزمایش‌های زیر، باید پرچم about://flags/#enable-desktop-pwas-scope-extensions فعال کنید (از Chrome v115 به بعد موجود است).

ناوبری بین مبدایی را آزمایش کنید

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

پنجره اصلی PWA با لینک‌های درون محدوده و گسترده.

نسخه آزمایشی PWA با لینک‌هایی به origin در محدوده توسعه‌یافته و origin بدون محدوده توسعه‌یافته.

ناوبری پیش‌فرض بین مبدا (در محدوده گسترده نیست)

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

پنجره اصلی PWA با نوار خروج از محدوده پس از کلیک روی لینک خروج از محدوده.

نوار «خارج از محدوده» که به طور پیش‌فرض برای ناوبری بین‌منبعی برای یک PWA در حالت مستقل نشان داده می‌شود.

ناوبری بین مبدائی با افزونه‌های دامنه (در دامنه گسترده)

  1. به صفحه اصلی PWA برگردید.
  2. روی پیوند به مبدأ که در محدوده گسترده نیست کلیک کنید.
  3. به طور پیش‌فرض، باید نوار «خارج از محدوده» نمایش داده شود، اما به دلیل ارتباط Scope Extensions، این‌طور نیست.

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

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

  1. PWA اصلی را در یک دستگاه ChromeOS باز و نصب کنید.
  2. روی لینک زیر کلیک کنید: منبع مرتبط .
  3. لینک در یک تب جدید مرورگر باز می‌شود و پیامی برای باز کردن آن در PWA نصب‌شده نمایش داده می‌شود.

اعلان Omnibar برای یک PWA نصب شده با دامنه گسترده.

کلیک روی لینکی به مبدا مرتبط با یک PWA، لینک را در یک تب جدید باز می‌کند و آیکون «باز کردن در برنامه» را نشان می‌دهد که به کاربر اجازه می‌دهد ثبت خودکار لینک را انتخاب کند.

محاکمه مبدا

اگر می‌خواهید این API را در برنامه خود در محل و با کاربران واقعی آزمایش کنید، می‌توانید این کار را با یک نسخه آزمایشی Origin انجام دهید. نسخه‌های آزمایشی Origin به شما این امکان را می‌دهند که با دریافت یک توکن آزمایشی که به دامنه شما مرتبط است، ویژگی‌های آزمایشی را با کاربران خود امتحان کنید. سپس می‌توانید برنامه خود را مستقر کنید و انتظار داشته باشید که در مرورگری که از ویژگی مورد آزمایش شما پشتیبانی می‌کند، کار کند (در این مورد، این توکن در Chrome از نسخه ۱۲۱ تا ۱۲۶ در دسترس است). برای دریافت توکن خود برای اجرای یک نسخه آزمایشی Origin، فرم درخواست را پر کنید.

بازخورد

تیم کروم به دنبال بازخورد در مورد مفید بودن این API است. برای کمک به تیم در تکامل این API، با ارائه بازخورد در مورد مفید بودن آن و موارد استفاده جدیدی که در نسخه فعلی پوشش داده نشده است، یک Issue در GitHub باز کنید.

منابع اضافی

تقدیرنامه‌ها

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