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

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

Thomas Steiner

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

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

tel:+1-816-555-1212
mailto:[email protected]
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 باز شود.