PWA ها به عنوان مدیریت کننده URL

برای یک تجربه یکپارچه‌تر، اجازه دهید PWA های نصب شده، URL ها را مدیریت کنند.

توماس اشتاینر

PWAها به عنوان کنترل‌کننده‌های URL چیستند؟

تصور کنید که با استفاده از یک برنامه پیام‌رسان فوری مانند Messages در macOS با دوست خود چت می‌کنید و در مورد موسیقی صحبت می‌کنید. همچنین تصور کنید که هر دوی شما PWA مربوط به music.example.com را روی دستگاه‌های خود نصب کرده‌اید. اگر می‌خواهید آهنگ مورد علاقه خود را برای دوستتان به اشتراک بگذارید، می‌توانید یک لینک عمیق مانند https://music.example.com/rick-astley/never-gonna-give-you-up برای او ارسال کنید. از آنجایی که این لینک بسیار طولانی است، توسعه‌دهندگان music.example.com ممکن است تصمیم گرفته باشند یک لینک کوتاه اضافی به هر آهنگ اضافه کنند، مانند، مثلاً https://🎵.example.com/ra/nggyu .

PWA به عنوان کنترل‌کننده‌های URL به برنامه‌هایی مانند music.example.com اجازه می‌دهد تا خود را به عنوان کنترل‌کننده‌های URL برای URLهایی که با الگوهایی مانند https://music.example.com ، https://*.music.example.com یا https://🎵.example.com مطابقت دارند، ثبت کنند، به طوری که لینک‌های خارج از PWA، به عنوان مثال، از یک برنامه پیام‌رسان فوری یا یک سرویس گیرنده ایمیل، به جای باز شدن در یک تب مرورگر، در PWA نصب شده باز شوند.

PWA به عنوان کنترل‌کننده‌های URL شامل دو افزونه است:

  1. عضو مانیفست برنامه وب "url_handlers" .
  2. قالب فایل web-app-origin-association برای اعتبارسنجی پیوندهای URL درون و برون محدوده.

موارد استفاده پیشنهادی برای PWAها به عنوان کنترل‌کننده‌های URL

نمونه‌هایی از سایت‌هایی که ممکن است از این API استفاده کنند عبارتند از:

  • سایت‌های پخش موسیقی یا ویدیو، بنابراین لینک‌های آهنگ یا لیست پخش در محیط پخش برنامه باز می‌شوند.
  • خوانندگان اخبار یا RSS که سایت‌های دنبال‌شده یا مشترک‌شده در آن‌ها در حالت خواننده برنامه باز می‌شوند.

نحوه استفاده از PWAها به عنوان URL Handlers

فعال کردن با about://flags

برای آزمایش PWAها به عنوان کنترل‌کننده‌های URL به صورت محلی، بدون توکن آزمایشی origin، پرچم #enable-desktop-pwas-url-handling را در about://flags فعال کنید.

عضو مانیفست برنامه وب "url_handlers"

برای مرتبط کردن یک PWA نصب شده با الگوهای URL، این الگوها باید در مانیفست برنامه وب مشخص شوند. این کار از طریق عضو "url_handlers" انجام می‌شود. این عضو آرایه‌ای از اشیاء را با ویژگی origin می‌پذیرد که یک string الزامی است و الگویی برای تطبیق ریشه‌ها محسوب می‌شود. این الگوها مجاز به داشتن پیشوند wildcard ( * ) هستند تا بتوانند چندین زیر دامنه (مانند https://*.example.com ) را شامل شوند. URLهایی که با این ریشه‌ها مطابقت دارند، می‌توانند توسط این برنامه وب مدیریت شوند. این طرح همیشه به صورت https:// فرض می‌شود، اما باید به صراحت ذکر شود.

گزیده زیر از مانیفست یک برنامه وب نشان می‌دهد که چگونه مثال PWA موسیقی از پاراگراف مقدماتی می‌تواند این را تنظیم کند. ورودی دوم با علامت اختصاری ( "https://*.music.example.com" ) تضمین می‌کند که برنامه برای https://www.music.example.com یا مثال‌های بالقوه دیگر مانند https://marketing-activity.music.example.com نیز فعال می‌شود.

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

فایل web-app-origin-association

از آنجایی که PWA در یک منبع متفاوت ( music.example.com ) نسبت به برخی از URLهایی که باید مدیریت کند (مثلاً https://🎵.example.com ) قرار دارد، برنامه باید مالکیت این منابع دیگر را تأیید کند. این اتفاق در یک فایل web-app-origin-association که در منابع دیگر میزبانی می‌شود، رخ می‌دهد.

این فایل باید حاوی JSON معتبر باشد. ساختار سطح بالا یک شیء است که عضوی به نام "web_apps" دارد. این عضو آرایه‌ای از اشیاء است و هر شیء نشان‌دهنده یک ورودی برای یک برنامه وب منحصر به فرد است. هر شیء شامل موارد زیر است:

میدان توضیحات نوع پیش‌فرض
"manifest" (الزامی) رشته آدرس اینترنتی (URL) مانیفست برنامه وب مربوط به PWA مرتبط string ناموجود
"details" (اختیاری) شیء‌ای که شامل آرایه‌هایی از الگوهای URL شامل و خارج از شمول است object ناموجود

هر شیء "details" شامل موارد زیر است:

میدان توضیحات نوع پیش‌فرض
"paths" (اختیاری) آرایه‌ای از رشته‌های مسیر مجاز string[] []
"exclude_paths" (اختیاری) آرایه‌ای از رشته‌های مسیر غیرمجاز string[] []

یک نمونه فایل web-app-origin-association برای PWA موسیقی مثال بالا در زیر آورده شده است. این فایل در origin 🎵.example.com میزبانی می‌شود و با PWA music.example.com که توسط URL مانیفست برنامه وب آن مشخص می‌شود، ارتباط برقرار می‌کند.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

چه زمانی یک URL مطابقت دارد؟

یک PWA در صورتی با یک URL برای مدیریت مطابقت دارد که هر دو شرط زیر برقرار باشد:

  • این URL با یکی از رشته‌های مبدا در "url_handlers" مطابقت دارد.
  • مرورگر می‌تواند با استفاده از فایل web-app-origin-association مربوطه، تأیید کند که هر مبدأ با اجازه دادن به این برنامه برای مدیریت چنین URLای موافقت می‌کند.

در مورد کشف فایل web-app-origin-association

برای اینکه مرورگر بتواند فایل web-app-origin-association را پیدا کند، توسعه‌دهندگان باید فایل web-app-origin-association را در پوشه /.well-known/ در ریشه برنامه قرار دهند. برای این کار، نام فایل باید دقیقاً web-app-origin-association باشد.

نسخه آزمایشی

برای آزمایش PWAها به عنوان کنترل‌کننده‌های URL، حتماً پرچم مرورگر را همانطور که مشخص شده است تنظیم کنید و سپس PWA را در https://mandymsft.github.io/pwa/ نصب کنید. با نگاه کردن به مانیفست برنامه وب آن، می‌توانید ببینید که URLهایی با الگوهای URL زیر را مدیریت می‌کند: https://mandymsft.github.io و https://luhuangmsft.github.io . از آنجایی که دومی در مبدأ متفاوتی ( luhuangmsft.github.io ) نسبت به PWA قرار دارد، PWA موجود در mandymsft.github.io باید مالکیت خود را اثبات کند، که این کار با استفاده از فایل web-app-origin-association که در https://luhuangmsft.github.io/.well-known/web-app-origin-association قرار دارد، انجام می‌شود.

برای آزمایش اینکه آیا واقعاً کار می‌کند، با استفاده از یک برنامه پیام‌رسان فوری مورد نظر خود یا ایمیلی که در یک سرویس ایمیل غیر مبتنی بر وب مانند Mail در macOS مشاهده می‌کنید، یک پیام آزمایشی برای خودتان ارسال کنید. ایمیل یا پیام متنی باید حاوی یکی از لینک‌های https://mandymsft.github.io یا https://luhuangmsft.github.io باشد. هر دو باید در PWA نصب شده باز شوند.

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

امنیت و مجوزها

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

کنترل کاربر

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

شفافیت

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

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

تداوم مجوز

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

بازخورد

تیم کرومیوم می‌خواهد از تجربیات شما در مورد PWAها به عنوان کنترل‌کننده‌های URL مطلع شود.

در مورد طراحی API به ما بگویید

آیا چیزی در مورد API وجود دارد که آنطور که انتظار داشتید کار نمی‌کند؟ یا متدها یا ویژگی‌هایی وجود ندارند که برای پیاده‌سازی ایده خود به آنها نیاز دارید؟ در مورد مدل امنیتی سؤال یا نظری دارید؟ یک مشکل مربوط به مشخصات را در مخزن مربوطه GitHub ثبت کنید، یا نظرات خود را به یک مشکل موجود اضافه کنید.

گزارش مشکل در پیاده‌سازی

آیا در پیاده‌سازی کرومیوم اشکالی پیدا کردید؟ یا پیاده‌سازی با مشخصات متفاوت است؟ یک اشکال را در new.crbug.com ثبت کنید. حتماً تا حد امکان جزئیات، دستورالعمل‌های تکثیر را ذکر کنید و UI>Browser>WebAppInstalls در کادر Components وارد کنید.

نمایش پشتیبانی از API

آیا قصد دارید از PWAها به عنوان URL Handlers استفاده کنید؟ حمایت عمومی شما به تیم Chromium کمک می‌کند تا ویژگی‌ها را در اولویت قرار دهد و به سایر فروشندگان مرورگر نشان می‌دهد که پشتیبانی از آنها چقدر حیاتی است.

با استفاده از هشتگ #URLHandlers یک توییت به @ChromiumDev ارسال کنید و به ما بگویید که کجا و چگونه از آن استفاده می‌کنید.

لینک‌های مفید

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

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