التدريب العملي على البوابات: التنقل السلس على الويب

تعرَّف على كيفية تحسين واجهة برمجة تطبيقات المدخلات المقترحة تجربة المستخدم في التنقل.

يوسوكي أوتسونومييا

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

يهدف اقتراح جديد لواجهة برمجة تطبيقات لمنصة الويب يُسمى Portals إلى المساعدة في هذا الشأن من خلال تبسيط التجربة أثناء تنقّل المستخدمين عبر موقعك الإلكتروني.

الاطّلاع على طريقة عمل البوابات:

تضمين وانتقال سلس باستخدام البوابات. من إنشاء آدم أرجيل

الميزات التي تتيحها البوابات

تقدم تطبيقات الصفحة الواحدة (SPA) انتقالات رائعة ولكن إنشائها على حساب أكثر تعقيدًا. من السهل إنشاء التطبيقات متعددة الصفحات (MPA)، ولكن ينتهي بك الأمر إلى ظهور شاشات فارغة بين الصفحات.

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

الإيمان برأينا: يُرجى الاطّلاع أولاً على ما عرضناه في مؤتمر Chrome Dev Summit لعام 2018:

في عمليات التنقل الكلاسيكية، يتعين على المستخدمين الانتظار بشاشة فارغة حتى ينتهي المتصفح من عرض الوجهة. باستخدام البوابات، يمكن للمستخدمين تجربة الصور المتحركة، بينما يعرض <portal> المحتوى مسبقًا ويوفر تجربة تنقّل سلسة.

قبل البوابات، كان بإمكاننا عرض صفحة أخرى باستخدام <iframe>. كان بإمكاننا أيضًا إضافة رسوم متحركة لتحريك الإطار حول الصفحة. ولكن لن يسمح لك <iframe> بالانتقال إلى المحتوى. وتعمل البوابات على سد هذه الفجوة، مما يتيح حالات استخدام شيقة.

جرّب البوابات

التفعيل عبر about://flags

يمكنك تجربة البوابات في الإصدار 85 من Chrome والإصدارات الأحدث من خلال قلب علامة تجريبية:

• يمكنك تفعيل العلامة about://flags/#enable-portals لعمليات التنقّل ذات المصدر نفسه.
• لاختبار عمليات التنقّل المشتركة المصدر، عليك تفعيل العلامة about://flags/#enable-portals-cross-origin أيضًا.

خلال هذه المرحلة المبكرة من تجربة "بوابات"، ننصحك أيضًا باستخدام دليل بيانات مستخدم منفصل تمامًا لاختباراتك من خلال إعداد علامة سطر الأوامر --user-data-dir. بعد تفعيل البوابات، تأكَّد من خلال "أدوات مطوري البرامج" من حصولك على HTMLPortalElement اللامع الجديد.

تنفيذ البوابات

لنطّلِع على مثال تنفيذي أساسي.

// Create a portal with the wikipedia page, and embed it
// (like an iframe). You can also use the <portal> tag instead.
portal = document.createElement('portal');
portal.src = 'https://en.wikipedia.org/wiki/World_Wide_Web';
portal.style = '...';
document.body.appendChild(portal);

// When the user touches the preview (embedded portal):
// do fancy animation, e.g. expand …
// and finish by doing the actual transition.
// For the sake of simplicity, this snippet will navigate
// on the `onload` event of the Portals element.
portal.addEventListener('load', (evt) => {
   portal.activate();
});

الأمر بهذه البساطة. جرِّب هذا الرمز في وحدة تحكّم أدوات مطوّري البرامج، ومن المفترض أن يتم فتح صفحة ويكيبيديا.

إذا كنت ترغب في إنشاء شيء ما كما عرضناه في مؤتمر Chrome Dev Summit تمامًا مثل العرض التوضيحي أعلاه، فإن المقتطف التالي سيكون محل اهتمامك.

// Adding some styles with transitions
const style = document.createElement('style');
style.innerHTML = `
  portal {
    position:fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    box-shadow: 0 0 20px 10px #999;
    transform: scale(0.4);
    transform-origin: bottom left;
    bottom: 20px;
    left: 20px;
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
  }
  .portal-transition {
    transition: transform 0.4s;
  }
  @media (prefers-reduced-motion: reduce) {
    .portal-transition {
      transition: transform 0.001s;
    }
  }
  .portal-reveal {
    transform: scale(1.0) translateX(-20px) translateY(20px);
  }
  @keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
`;
const portal = document.createElement('portal');
// Let's navigate into the WICG Portals spec page
portal.src = 'https://wicg.github.io/portals/';
// Add a class that defines the transition. Consider using
// `prefers-reduced-motion` media query to control the animation.
// https://developers.google.com/web/updates/2019/03/prefers-reduced-motion
portal.classList.add('portal-transition');
portal.addEventListener('click', (evt) => {
  // Animate the portal once user interacts
  portal.classList.add('portal-reveal');
});
portal.addEventListener('transitionend', (evt) => {
  if (evt.propertyName == 'transform') {
    // Activate the portal once the transition has completed
    portal.activate();
  }
});
document.body.append(style, portal);

ومن السهل أيضًا اكتشاف الميزات لتحسين موقع الويب تدريجيًا باستخدام المداخل.

if ('HTMLPortalElement' in window) {
  // If this is a platform that have Portals...
  const portal = document.createElement('portal');
  ...
}

إذا أردت أن تعرف سريعًا ما تبدو عليه البوابات، جرِّب استخدام uskay-مدخلs-demo.glitch.me. احرص على الوصول إلى هذا الإصدار باستخدام الإصدار 85 من Chrome أو الإصدارات الأحدث منه وتفعيل العلامة التجريبية.

1. أدخِل عنوان URL الذي تريد معاينته.
2. سيتم بعد ذلك تضمين الصفحة كعنصر <portal>.
3. انقر على المعاينة.
4. سيتم تفعيل المعاينة بعد إنشاء مؤثر حركي.

الاطّلاع على المواصفات

نحن نناقش بشكل فعال مواصفات البوابات في Web Incubation Community Group (WICG). لمواكبة السرعة الكبيرة، يُرجى الاطّلاع على بعض السيناريوهات الرئيسية. في ما يلي الميزات الثلاث المهمة التي يجب معرفتها:

• عنصر <portal>: عنصر HTML نفسه واجهة برمجة التطبيقات بسيطة للغاية. ويتكون من السمة src والدالة activate وواجهة للمراسلة (postMessage). ويستخدم activate وسيطة اختيارية لتمرير البيانات إلى <portal> عند التفعيل.
• واجهة portalHost: تضيف كائن portalHost إلى عنصر window. تتيح لك هذه الخطوة التحقّق مما إذا كانت الصفحة مضمّنة كعنصر <portal>. وتوفّر هذه الخدمة أيضًا واجهة للمراسلة (postMessage) إلى المضيف.
• واجهة PortActivateEvent: حدث يتم تنشيطه عند تفعيل <portal> تتوفر دالة أنيقة تُسمى adoptPredecessor يمكنك استخدامها لاسترداد الصفحة السابقة كعنصر <portal>. يسمح لك هذا بإنشاء تنقلات سلسة وتجارب مؤلفة بين صفحتين.

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

تخصيص النمط عند تضمينه كعنصر <portal>

// Detect whether this page is hosted in a portal
if (window.portalHost) {
  // Customize the UI when being embedded as a portal
}

المراسلة بين العنصر <portal> وportalHost

// Send message to the portal element
const portal = document.querySelector('portal');
portal.postMessage({someKey: someValue}, ORIGIN);

// Receive message via window.portalHost
window.portalHost.addEventListener('message', (evt) => {
  const data = evt.data.someKey;
  // handle the event
});

تفعيل العنصر <portal> وتلقّي حدث portalactivate

// You can optionally add data to the argument of the activate function
portal.activate({data: {somekey: 'somevalue'}});

// The portal content will receive the portalactivate event
// when the activate happens
window.addEventListener('portalactivate', (evt) => {
  // Data available as evt.data
  const data = evt.data;
});

جارٍ استرداد الاسم السابق

// Listen to the portalactivate event
window.addEventListener('portalactivate', (evt) => {
  // ... and creatively use the predecessor
  const portal = evt.adoptPredecessor();
  document.querySelector('someElm').appendChild(portal);
});

مع العلم أنّه تم استخدام موقعك الإلكتروني ليكون الإصدار السابق

// The activate function returns a Promise.
// When the promise resolves, it means that the portal has been activated.
// If this document was adopted by it, then window.portalHost will exist.
portal.activate().then(() => {
  // Check if this document was adopted into a portal element.
  if (window.portalHost) {
    // You can start communicating with the portal element
    // i.e. listen to messages
    window.portalHost.addEventListener('message', (evt) => {
      // handle the event
    });
  }
});

من خلال الجمع بين جميع الميزات التي تدعمها البوابات، يمكنك بناء تجارب مستخدم رائعة حقًا. على سبيل المثال، يوضح العرض التوضيحي أدناه كيف يمكن للبوابات أن تتيح تجربة مستخدم سلسة بين موقع ويب ومحتوى تضمين تابع لجهة خارجية.

ملاحظة: هل يهمّك هذا العرض التوضيحي؟ قم بالشوكة على GitHub وأنشئ نسختك الخاصة!

حالات الاستخدام والخطط

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

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

نرحّب بالملاحظات والآراء

تكون البوابات جاهزة للتجريب في الإصدار 85 من Chrome والإصدارات الأحدث. الملاحظات الواردة من المنتدى مهمة لتصميم واجهات برمجة تطبيقات جديدة، لذا يُرجى تجربتها وإطلاعنا على رأيك. في حال كان لديك أي طلبات ميزات أو ملاحظات، يُرجى الانتقال إلى مستودع WICG GitHub.