ثبت کنترل کننده پروتکل URL برای PWA ها

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

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

پیشینه طرح‌ها (معروف به پروتکل‌ها)

شناسه منبع یکنواخت (URI) یک توالی فشرده از کاراکترها است که یک منبع انتزاعی یا فیزیکی را مشخص می کند. هر URI با یک نام طرح شروع می شود که به مشخصاتی برای تخصیص شناسه ها در آن طرح اشاره دارد. به این ترتیب، نحو URI یک سیستم نامگذاری فدرال و توسعه پذیر است که در آن مشخصات هر طرح ممکن است نحو و معنای شناسه هایی را که از آن طرح استفاده می کنند محدودتر کند. طرح ها به عنوان پروتکل نیز شناخته می شوند. در زیر می توانید چند نمونه از طرح ها را مشاهده کنید.

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/

عبارت Uniform Resource Locator (URL) به زیرمجموعه ای از URI ها اطلاق می شود که علاوه بر شناسایی یک منبع، وسیله ای برای مکان یابی منبع با توصیف مکانیسم دسترسی اولیه آن (مثلاً مکان شبکه آن) فراهم می کند.

پس زمینه متد registerProtocolHandler() .

روش Navigator فقط با محتوای امن registerProtocolHandler() به سایت ها اجازه می دهد توانایی خود را برای باز کردن یا مدیریت طرح های URL خاص ثبت کنند. بنابراین، سایت‌ها باید روشی را مانند این فراخوانی کنند: navigator.registerProtocolHandler(scheme, url) . دو پارامتر به صورت زیر تعریف می شوند:

  • scheme : رشته ای حاوی پروتکلی است که سایت می خواهد مدیریت کند.
  • url : رشته ای حاوی URL کنترل کننده. این URL باید شامل %s باشد، به‌عنوان یک مکان‌نما که با URL فراری جایگزین می‌شود.

این طرح یا باید یکی از طرح‌های فهرست شده امن باشد (مثلاً mailto ، bitcoin یا magnet ) یا با web+ شروع شود و پس از آن حداقل یک یا چند حرف کوچک ASCII بعد از پیشوند web+ ، به‌عنوان مثال، web+coffee باشد.

برای روشن تر شدن این موضوع، در اینجا یک مثال عینی از جریان آورده شده است:

  1. کاربر از سایتی در https://coffeeshop.example.com/ بازدید می کند که تماس زیر را برقرار می کند: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s') .
  2. در مرحله بعد، هنگام بازدید https://randomsite.example.com/ ، کاربر روی پیوندی مانند <a href="web+coffee:latte-macchiato">All about latte macchiato</a> کلیک می کند.
  3. این باعث می‌شود که مرورگر به آدرس اینترنتی زیر هدایت شود: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato . رشته جستجوی URL-decoded سپس ?type=web+coffee://latte-macchiato را می خواند.

رسیدگی به پروتکل در مورد چیست

ثبت نام کنترل کننده پروتکل URL فعلی برای مکانیسم PWA در مورد ارائه ثبت کنترل کننده پروتکل به عنوان بخشی از نصب PWA از طریق مانیفست آن است. پس از ثبت یک PWA به عنوان یک کنترل کننده پروتکل، زمانی که کاربر روی یک پیوند با یک طرح خاص مانند mailto ، bitcoin ، یا web+music از یک مرورگر یا یک برنامه خاص پلت فرم کلیک می کند، PWA ثبت شده باز می شود و URL را دریافت می کند. توجه به این نکته مهم است که ثبت نام مبتنی بر مانیفست پیشنهادی و registerProtocolHandler() سنتی نقش‌های بسیار مشابهی را در عمل ایفا می‌کنند، در حالی که هنوز امکان تجربه‌های کاربر مکمل را فراهم می‌کنند:

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

موارد استفاده کنید

  • در یک PWA پردازش کلمه، کاربر در یک سند با پیوندی به یک ارائه مانند web+presentations://deck2378465 مواجه می‌شود. هنگامی که کاربر روی پیوند کلیک می کند، PWA ارائه به طور خودکار در محدوده درست باز می شود و عرشه اسلاید را نشان می دهد.
  • در یک برنامه چت مخصوص پلت فرم، کاربر در یک پیام چت پیوندی به URL magnet دریافت می کند. با کلیک بر روی پیوند، یک تورنت PWA نصب شده راه اندازی شده و شروع به دانلود می کند.
  • کاربر یک PWA پخش موسیقی را نصب کرده است. وقتی دوستی پیوندی به آهنگی مانند web+music://songid=1234&time=0:13 به اشتراک می گذارد و کاربر روی آن کلیک می کند، PWA پخش موسیقی به طور خودکار در یک پنجره مستقل راه اندازی می شود.

نحوه استفاده از ثبت نام کنترل کننده پروتکل URL برای PWA ها

API برای ثبت کنترل کننده پروتکل URL دقیقاً بر روی navigator.registerProtocolHandler() مدل شده است. فقط این بار اطلاعات از طریق مانیفست برنامه وب در یک ویژگی جدید به نام "protocol_handlers" که آرایه ای از اشیاء را با دو کلید مورد نیاز "protocol" و "url" می گیرد، به صورت اعلامی منتقل می شود. قطعه کد زیر نحوه ثبت web+tea و web+coffee را نشان می دهد. مقادیر رشته‌هایی هستند که نشانی اینترنتی کنترل‌کننده را با مکان‌نمای موردنیاز %s برای URL فراری تشکیل می‌دهند.

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

چندین برنامه در حال ثبت نام برای یک پروتکل

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

همان برنامه در حال ثبت برای چندین پروتکل

همانطور که در نمونه کد بالا می بینید، همان برنامه می تواند خود را برای چندین پروتکل ثبت کند.

به روز رسانی برنامه و ثبت نام کنترل کننده

ثبت نام های Handler با آخرین نسخه مانیفست ارائه شده توسط برنامه هماهنگ می شود. دو مورد وجود دارد:

  • به‌روزرسانی‌ای که کنترل‌کننده‌های جدیدی را اضافه می‌کند، ثبت نام کنترل‌کننده را آغاز می‌کند (جدا از نصب برنامه).
  • به‌روزرسانی‌ای که کنترل‌کننده‌ها را حذف می‌کند، باعث لغو ثبت نام کنترل‌کننده می‌شود (جدا از حذف نصب برنامه).

اشکال زدایی کنترل کننده پروتکل در DevTools

از طریق بخش Application > Manifest به بخش Protocol Handlers بروید. در اینجا می توانید تمام پروتکل های موجود را مشاهده و آزمایش کنید.

برای مثال، این دمو PWA را نصب کنید. در قسمت Protocol Handlers ، "americano" را تایپ کنید و روی Test protocol کلیک کنید تا صفحه قهوه در PWA باز شود.

کنترل کننده های پروتکل در پنجره Manifest

نسخه ی نمایشی

شما می توانید یک نسخه نمایشی از ثبت نام کنترل کننده پروتکل URL برای PWA ها در Glitch ببینید.

  1. به https://protocol-handler.glitch.me/ بروید، PWA را نصب کنید و پس از نصب برنامه را دوباره بارگیری کنید. این مرورگر اکنون PWA را به عنوان کنترل کننده پروتکل web+coffee با سیستم عامل ثبت کرده است.
  2. در پنجره PWA نصب شده، روی پیوند https://protocol-handler-link.glitch.me/ کلیک کنید. با این کار یک تب مرورگر جدید با سه لینک باز می شود. روی اولی یا دومی (latte macchiato یا americano) کلیک کنید. مرورگر اکنون به شما پیامی را نشان می دهد و از شما می پرسد که آیا با این که برنامه کنترل کننده پروتکل پروتکل web+coffee است، مشکلی ندارید. در صورت موافقت، PWA باز می شود و قهوه انتخاب شده را نشان می دهد.
  3. برای مقایسه با جریان سنتی که از navigator.registerProtocolHandler() استفاده می کند، روی دکمه ثبت کنترل کننده پروتکل در PWA کلیک کنید. سپس در تب مرورگر روی لینک سوم (chai) کلیک کنید. به همین ترتیب یک اعلان را نشان می دهد، اما سپس PWA را در یک برگه باز کنید، نه در پنجره مرورگر.
  4. با پیوندی مانند <a href="web+coffee://americano">Americano</a> در یک برنامه مخصوص پلتفرم مانند Skype در Windows برای خود پیام ارسال کنید و روی آن کلیک کنید. به همین ترتیب باید PWA نصب شده را باز کند.

نسخه نمایشی کنترل کننده پروتکل URL با برگه مرورگر با پیوندها در سمت چپ و پنجره PWA مستقل در سمت راست.

ملاحظات امنیتی

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

تلاش های ناوبری غیر آغاز شده توسط کاربر

تلاش‌های ناوبری که توسط کاربر آغاز نشده‌اند، اما برنامه‌ریزی شده‌اند، ممکن است برنامه‌ها را باز نکنند. URL پروتکل سفارشی فقط در زمینه‌های مرور سطح بالا ممکن است استفاده شود، اما برای مثال، به عنوان URL یک iframe استفاده نمی‌شود.

لیست مجاز پروتکل ها

درست مانند registerProtocolHandler() لیست مجوزهایی از پروتکل ها وجود دارد که برنامه ها می توانند ثبت نام کنند تا مدیریت کنند.

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

بازخورد

تیم Chromium می‌خواهد در مورد تجربیات شما در مورد ثبت نام کنترل‌کننده پروتکل URL برای PWAها بشنود.

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

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

گزارش مشکل در اجرا

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

پشتیبانی از API را نشان دهید

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

نحوه استفاده از آن را در موضوع WICG Discourse به اشتراک بگذارید. با استفاده از هشتگ #ProtocolHandler یک توییت به ChromiumDev@ ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می‌کنید.

قدردانی ها

ثبت‌کننده پروتکل URL برای PWA توسط فابیو روچا ، دیگو گونزالس ، کانر مودی و ساموئل تانگ از تیم مایکروسافت اج پیاده‌سازی و مشخص شد. این مقاله توسط جو مدلی و فابیو روچا بررسی شده است. تصویر قهرمان توسط JJ Ying در Unsplash .