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

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

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

في ما يلي سير العمل المعتاد للمستخدم عند استخدام الملفات:

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

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

فتح ملف

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

  1. سجِّل معرّف الملف من واجهة برمجة التطبيقات لملف أداة اختيار الملفات في File System Access. يوفّر لك هذا الإجراء معلومات أساسية عن الملف.
  2. باستخدام طريقة getFile() للاسم المعرِّف، ستحصل على نوع خاص من Blob يُسمى File يتضمّن سمات إضافية للقراءة فقط (مثل الاسم وتاريخ التعديل الأخير) عن الملف. وبما أنّه عنصر Blob، يمكن استدعاء طرق 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 فتح الملفات من داخل تطبيقك، ولكن ماذا عن العكس؟ يريد المستخدمون ضبط تطبيقهم المفضّل كتطبيق تلقائي لفتح الملفات. واجهة برمجة التطبيقات لمعالجة الملفات هي واجهة برمجة تطبيقات تجريبية تتيح لتطبيقات الويب التقدّمية المثبَّتة إجراء ما يلي: التسجيل كمعالج ملفات على جهاز المستخدم، مع تحديد نوع MIME وامتداد الملف الذي يتيح تطبيق الويب التقدّمي استخدامه في بيان تطبيق الويب يمكنك تحديد رموز ملفات مخصّصة لإضافاتك المتوافقة.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مشاركة الويب

Browser Support

  • Chrome: 89.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 12.1.

Source

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

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

  • النص (سمات title وtext)
  • عنوان URL (موقع إلكتروني على url)
  • الملفات (موقع files)

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

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

متصفّح Chrome على Android ومتصفّح Safari على iOS يفتحان &quot;لوحة المشاركة&quot; بفضل ميزة &quot;مشاركة الويب&quot;

Web Share Target

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

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

يمكنك إعداد استهداف مشاركة الويب في البيان باستخدام العنصر 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 من Web Share) بالمَعلمات التي سيمرّرها المتصفّح في عنوان URL (في method: 'GET') أو في نص الطلب باستخدام ترميز مُحدّد.

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

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

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

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

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

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

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: not supported.

Source

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

تتوفّر واجهة برمجة التطبيقات Contact Picker API بشكل أساسي على الأجهزة الجوّالة، ويتم تنفيذ جميع الإجراءات من خلال واجهة 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.
   }
}

الموارد