استعِدّ لانتهاء ملفات تعريف الارتباط التابعة لجهات خارجية في Chrome. اختبِر موقعك الإلكتروني اليوم بحثًا عن أي أعطال.

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

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

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

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

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

فتح ملف

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

احصل على مؤشر الملفات من واجهة برمجة تطبيقات أداة اختيار الملفات للوصول إلى نظام الملفات. يمنحك هذا معلومات أساسية عن الملف.
وباستخدام طريقة 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();

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

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

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

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

// 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 فتح الملفات من داخل تطبيقك، ولكن ماذا عن العكس؟ يريد المستخدمون ضبط التطبيق المفضّل لديهم كتطبيق تلقائي لفتح الملفات باستخدامه. واجهة برمجة تطبيقات معالجة الملفات هي واجهة برمجة تطبيقات تجريبية تسمح لتطبيقات PWA المثبَّتة: التسجيل كمعالج ملفات على جهاز المستخدم، مع تحديد نوع MIME وامتداد الملف الذي يتيحه تطبيق الويب التقدّمي (PWA) في بيان تطبيق الويب. يمكنك تحديد رموز ملفات مخصَّصة للإضافات المتوافقة.

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

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

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

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

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

بالنسبة إلى المتصفّحات المتوافقة مع أجهزة الكمبيوتر المكتبي، أنشأ منتدى متصفّح الويب مواصفات جديدة. هذه المواصفة تجريبية حاليًا، وتضيف عضوًا جديدًا لملف البيان: url_handlers. تتوقّع هذه السمة مصفوفة من الأصول التي يريد تطبيق الويب التقدّمي الحصول عليها. سيتم منح مصدر تطبيق الويب التقدّمي الخاص بك تلقائيًا، ويجب أن يقبل كل مصدر آخر هذه المعالجة التي تتم من خلال ملف باسم 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) على متاجر التطبيقات.

تنبيه: بالنسبة إلى تطبيقات الويب التقدّمية (PWA) التي تستخدم واجهة برمجة التطبيقات لمعالِج بروتوكول عنوان URL، يجب أن يكون اسم البروتوكول أحد المخطّطات المدرَجة في القائمة الآمنة، أو يجب أن يستخدم البادئة web+. لذلك، في المثال الذي نقدّمه، يجب أن يشير الرابط إلى web+pwa:// لفتح تطبيق الويب التقدّمي (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 للتطبيقات الأخرى، على سبيل المثال من تطبيقات المراسلة والخرائط والتنقّل المعروفة والاجتماعات على الإنترنت والشبكات الاجتماعية ومتاجر التطبيقات.

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

التوافق مع المتصفح

89
93
12.1

المصدر

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

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

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

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

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

متصفّح Chrome على نظام التشغيل Android ومتصفّح Safari على نظام التشغيل iOS يفتحون "ورقة المشاركة" بفضل Web Share.

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

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

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

لقد أعددت هدف مشاركة الويب في ملف البيان من خلال العضو 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') أو في نص الطلب باستخدام الترميز المحدّد.

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

على سبيل المثال، يمكنك تحديد ما تريد أن يتلقّى تطبيق الويب التقدّمي (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 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.
   }
}

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

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

فتح ملف

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

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

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

التعامل مع بروتوكول عناوين URL

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

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

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

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

المراجِع