التكامل مع نظام التشغيل

تتمتع تطبيقات الويب بمدى وصول كبير. وتعمل على منصات متعددة. من السهل مشاركتها عبر الروابط. لكنها كانت تفتقر تقليديًا إلى التكامل مع نظام التشغيل. منذ وقت قريب لم تكن قابلة للتثبيت حتى. ولحسن الحظّ، لقد تغيّر ذلك، ويمكننا الآن الاستفادة من هذا الدمج لإضافة ميزات مفيدة إلى تطبيقات الويب التقدّمية (PWA). لنستكشف بعض هذه الخيارات.

العمل على نظام الملفات

يبدو سير عمل المستخدم العادي باستخدام الملفات كما يلي:

• اختَر ملفًا أو مجلدًا من الجهاز وافتحه مباشرةً.
• أجرِ التغييرات على هذه الملفات أو المجلدات، وأعِد حفظ التغييرات مباشرةً.
• إنشاء ملفات ومجلدات جديدة

قبل File System Access API، لم يكن بإمكان تطبيقات الويب إجراء ذلك. كان فتح الملفات يتطلب تحميل ملف، وحفظ التغييرات يتطلب من المستخدمين تنزيلها، ولم يكن الويب متاحًا على الإطلاق لإنشاء ملفات ومجلدات جديدة في نظام ملفات المستخدم.

فتح ملف

لفتح ملف، نستخدم الطريقة window.showOpenFilePicker(). تجدر الإشارة إلى أنّ هذه الطريقة تتطلّب إيماءة المستخدم، مثل النقر على زر. إليك بقية خطوات الإعداد لفتح ملف:

1. التقِط مؤشر الملف من واجهة برمجة تطبيقات اختيار الملفات في الوصول إلى نظام الملفات. ستحصل على معلومات أساسية عن الملف.
2. باستخدام طريقة getFile() الخاصة بالاسم المعرِّف، ستحصل على نوع خاص من Blob يُسمى File يتضمن خصائص إضافية للقراءة فقط (مثل الاسم وتاريخ آخر تعديل) حول الملف. بما أنّ البيانات غير مهمة، يمكن استدعاء طرق Blob إليها، مثل text()، للحصول على محتواها.

// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

جارٍ حفظ التغييرات

لحفظ التغييرات في ملف، تحتاج أيضًا إلى إيماءة مستخدم؛ بعد ذلك:

1. استخدِم مؤشر الملف لإنشاء FileSystemWritableFileStream.
2. أجرِ التغييرات اللازمة على ساحة المشاركات. لن يؤدي هذا إلى تحديث الملف الحالي؛ بدلاً من ذلك، عادةً ما يتم إنشاء ملف مؤقت.
3. وأخيرًا، عند الانتهاء من إجراء التغييرات، يتم إغلاق ساحة المشاركات، ما يؤدي إلى نقل التغييرات من مؤقتة إلى دائمة.

لنرى هذا في التعليمة البرمجية:

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

معالجة الملفات

تتيح لك File System Access API فتح الملفات من داخل تطبيقك، ولكن ماذا عن العكس؟ يريد المستخدمون ضبط تطبيقهم المفضّل كتطبيق تلقائي لفتح الملفات باستخدامه. file handling API هي واجهة برمجة تطبيقات تجريبية تتيح لتطبيقات الويب التقدّمية (PWA) المثبَّتة: يمكنك التسجيل كمعالِج لملفات على جهاز المستخدم، مع تحديد نوع MIME وامتداد الملف اللذين يتيحهما تطبيق الويب التقدّمي (PWA) في بيان تطبيق الويب. يمكنك تحديد رموز ملفات مخصّصة للإضافات المتوافقة.

بعد التسجيل، سيظهر تطبيق الويب التقدّمي (PWA) المثبَّت كخيار من نظام ملفات المستخدم، ما يتيح له فتح الملف مباشرةً عليه. في ما يلي مثال على إعداد البيان لتطبيق ويب تقدّمي (PWA) لقراءة الملفات النصية:

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

معالجة عنوان URL

من خلال معالجة عناوين URL، يمكن لتطبيق الويب التقدّمي (PWA) التقاط الروابط التي تشكل جزءًا من نطاقه من نظام التشغيل وعرضها ضمن نافذة تطبيق ويب تقدّمي (PWA)، بدلاً من علامة تبويب المتصفّح التلقائي. على سبيل المثال، إذا تلقيت رسالة مرتبطة بتطبيق الويب التقدّمي (PWA) أو نقرت على رابط لصفحة في التطبيق (عنوان URL يشير إلى جزء معيّن من المحتوى) في تطبيق الويب التقدّمي (PWA)، سيتم فتح المحتوى في نافذة مستقلة.

يتوفّر هذا السلوك تلقائيًا على Android عند استخدام WebAPK، مثلاً عندما يثبّت المستخدمون تطبيق الويب التقدّمي (PWA) باستخدام Chrome. من المستحيل الحصول على عناوين URL من تطبيقات الويب التقدّمية (PWA) المثبَّتة على نظامَي iOS وiPadOS من متصفّح Safari.

بالنسبة إلى المتصفّحات المتوافقة مع أجهزة الكمبيوتر المكتبي، وضع منتدى متصفِّح الويب مواصفات جديدة. هذه المواصفات تجريبية حاليًا. ستتم إضافة عضو جديد في ملف البيان: url_handlers. تتوقع هذه السمة مجموعة من المصادر التي يريد تطبيق الويب التقدّمي (PWA) الحصول عليها. سيتم منح مصدر تطبيق الويب التقدّمي (PWA) تلقائيًا، ويجب أن يقبل كل مصدر آخر أن تتم المعالجة من خلال ملف باسم web-app-origin-association. على سبيل المثال، إذا تمت استضافة بيان تطبيق الويب التقدّمي (PWA) على web.dev وأردت إضافة أصل app.web.dev، سيظهر على النحو التالي:

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

في هذه الحالة، سيتحقّق المتصفّح مما إذا كان الملف متوفّرًا على app.web.dev/.well-known/web-app-origin-association، وستتم الموافقة على معالجة عنوان URL من عنوان URL لنطاق تطبيق الويب التقدّمي (PWA). على المطوّر إنشاء هذا الملف. في المثال التالي، يبدو الملف كما يلي:

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

معالجة بروتوكول عنوان URL

تعمل معالجة عناوين URL مع عناوين URL العادية لبروتوكول https، ولكن من الممكن استخدام مخططات معرّف موارد منتظم (URI) مخصّصة، مثل pwa://. وفي العديد من أنظمة التشغيل، تكتسب التطبيقات المثبَّتة هذه القدرة من خلال التطبيقات التي تسجِّل مخططاتها.

بالنسبة إلى تطبيقات الويب التقدّمية (PWA)، يتم تفعيل هذه الميزة باستخدام واجهة برمجة تطبيقات معالج بروتوكول عنوان URL المتوفّرة فقط على أجهزة الكمبيوتر المكتبي. يمكنك السماح بالبروتوكولات المخصّصة للأجهزة الجوّالة فقط من خلال توزيع تطبيق الويب التقدّمي (PWA) في متاجر التطبيقات.

للتسجيل، يمكنك استخدام طريقة registerProtocolHandler() أو استخدام عضو protocol_handlers في ملف البيان مع المخطط المطلوب وعنوان URL الذي تريد تحميله في سياق تطبيق الويب التقدّمي (PWA)، مثل:

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

يمكنك توجيه عنوان URL from-protocol إلى المعالج الصحيح والحصول على سلسلة طلب البحث value في تطبيق الويب التقدّمي (PWA). %s هو عنصر نائب لعنوان URL الذي تم تخطّيه وأدى إلى تشغيل العملية، لذلك إذا كان لديك رابط في مكان ما مثل <a href="web+pwa://testing">، سيفتح تطبيق الويب التقدّمي /from-protocol?value=testing.

الاتصال بتطبيقات أخرى

يمكنك استخدام مخططات معرّفات الموارد المنتظمة (URI) للاتصال بأي تطبيق آخر مثبَّت (تطبيق الويب التقدّمي (PWA) أو لا) في حسابات المستخدمين الأجهزة على كل نظام أساسي. ما عليك سوى إنشاء رابط أو استخدام navigator.href والإشارة إلى نظام معرّف الموارد المنتظم (URI) الذي تريده، مع تمرير الوسيطات باستخدام نموذج يتضمن حروف إلغاء عنوان URL.

يمكنك استخدام المخططات العادية المعروفة، مثل tel: للمكالمات الهاتفية أو mailto: لإرسال الرسائل الإلكترونية أو sms: للمراسلة النصية. أو يمكنك الاطّلاع على معلومات عن التطبيقات الأخرى مخططات عناوين URL، على سبيل المثال من الرسائل والخرائط والتنقل والاجتماعات على الإنترنت والشبكات الاجتماعية ومتاجر التطبيقات المعروفة.

المشاركة على الويب

باستخدام Web Share API، يمكن لتطبيق الويب التقدّمي (PWA) إرسال المحتوى إلى التطبيقات المثبّتة الأخرى على الجهاز من خلال القناة المشتركة.

لا تتوفّر واجهة برمجة التطبيقات إلا على أنظمة التشغيل المزوّدة بآلية share، بما في ذلك Android وiOS وiPadOS وWindows وChromeOS. يمكنك مشاركة كائن يحتوي على:

• نص (خصائص title وtext)
• عنوان URL (موقع واحد (url))
• الملفات (موقع واحد (files))

للتحقّق مما إذا كان بإمكان الجهاز الحالي مشاركة المحتوى، للحصول على بيانات بسيطة مثل النصوص، عليك التأكّد من استخدام طريقة navigator.share() لمشاركة الملفات التي تتحقّق من توفُّر طريقة navigator.canShare() فيها.

يمكنك طلب إجراء المشاركة من خلال الاتصال بالرقم navigator.share(objectToShare). تعرض هذه المكالمة وعدًا تتم معالجته مع undefined أو يتم رفضه باستثناء.

هدف المشاركة على الويب

تسمح واجهة برمجة التطبيقات Web Share Target API بأن يكون تطبيق الويب التقدّمي (PWA) هدفًا لعملية مشاركة من تطبيق آخر على هذا الجهاز، سواء كان تطبيق ويب تقدّمي (PWA) أم لا. يتلقّى تطبيق الويب التقدّمي (PWA) البيانات التي يشاركها تطبيق آخر.

تتوفّر هذه الميزة حاليًا على أجهزة Android مع WebAPK وChromeOS، ولا تعمل إلا بعد تثبيت المستخدم لتطبيق الويب التقدّمي (PWA). ويسجِّل المتصفّح هدف المشاركة داخل نظام التشغيل عند تثبيت التطبيق.

يمكنك إعداد هدف مشاركة الويب في البيان مع العضو share_target المحدّد في مواصفات مسودة Web Share Target. تمّ ضبط share_target على كائن له بعض الخصائص:

action

عنوان URL الذي سيتم تحميله في نافذة تطبيق الويب التقدّمي (PWA) المتوقّع أن تتلقّى البيانات التي تمت مشاركتها

method

سيتم استخدام طريقة الفعل HTTP للإجراء، مثل GET أو POST أو PUT.

enctype

(اختياري) نوع الترميز للمعلَمات هو application/x-www-form-urlencoded بشكل تلقائي، ولكن يمكن ضبطه أيضًا على multipart/form-data لطرق مثل POST.

params

كائن سيربط البيانات (من المفاتيح: title وtext وurl وfiles من "مشاركة الويب") إلى الوسيطات التي سيمررها المتصفح في عنوان URL (على method: 'GET') أو في نص الطلب باستخدام الترميز المحدد.

على سبيل المثال، يمكنك في تطبيق الويب التقدّمي (PWA) تحديد أنّك تريد تلقّي البيانات المشتركة (العنوان وعنوان URL فقط) في تطبيق الويب التقدّمي من خلال إضافة ما يلي في البيان:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

من العيّنة السابقة، إذا كان أي تطبيق في النظام يشارك عنوان URL مع عنوان، واختار المستخدم تطبيق الويب التقدّمي (PWA) من مربّع الحوار، سينشئ المتصفّح شريط تنقّل جديدًا إلى /receive-share/?shared_title=AAA&shared_url=BBB في المصدر، حيث يكون AAA هو العنوان المشترَك، ويكون BBB هو عنوان URL المشترَك. يمكنك استخدام JavaScript لقراءة تلك البيانات من سلسلة window.location عن طريق تحليلها باستخدام الدالة الإنشائية URL.

وسيستخدم المتصفِّح اسم تطبيق الويب التقدّمي (PWA) ورمزه من ملف البيان لإضافة إدخال المشاركة الخاص بنظام التشغيل. لا يمكنك اختيار مجموعة مختلفة لهذا الغرض.

للحصول على أمثلة أكثر تفصيلاً وكيفية تلقّي الملفات، يمكنك الاطّلاع على المقالة استلام البيانات التي تمت مشاركتها باستخدام Web Share Target API.

منتقي جهات الاتصال

باستخدام Contact Picker API، يمكنك أن تطلب من الجهاز عرض مربّع حوار أصلي يتضمّن جميع جهات اتصال المستخدم ليتمكّن من اختيار مربّع حوار أو أكثر. ويمكن لتطبيق الويب التقدّمي (PWA) بعد ذلك تلقّي البيانات التي تريدها من جهات الاتصال هذه.

تتوفر واجهة برمجة تطبيقات "أداة اختيار جهات الاتصال" بشكل أساسي على الأجهزة الجوّالة، ويتم تنفيذ جميع الإجراءات من خلال واجهة navigator.contacts على الأنظمة الأساسية المتوافقة.

يمكنك طلب المواقع المتاحة لطلب البحث باستخدام navigator.contacts.getProperties()، وطلب اختيار جهة اتصال واحدة أو أكثر مع قائمة بالخصائص المطلوبة.

تشمل بعض نماذج السمات name وemail وaddress وtel. عندما تطلب من المستخدم اختيار جهة اتصال واحدة أو أكثر، يمكنك الاتصال بـ navigator.contacts.select(properties)، مع تمرير مجموعة الخصائص التي تريد الحصول عليها في المقابل.

سيسرد النموذج التالي جهات الاتصال التي تم استلامها بواسطة أداة الاختيار.

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

الموارد

• واجهة برمجة التطبيقات File System Access API: تبسيط الوصول إلى الملفات المحلية
• السماح لتطبيقات الويب المثبَّتة بأن تكون معالِجات الملفات
• التعامل مع الملفات في تطبيقات الويب التقدّمية
• الدمج مع واجهة مستخدم المشاركة في نظام التشغيل مع واجهة برمجة التطبيقات Web Share API
• مشاركة المحتوى مع تطبيقات أخرى
• تلقّي البيانات التي تمت مشاركتها باستخدام Web Share Target API
• أداة اختيار جهات الاتصال على الويب