מעשי עם פורטלים: ניווט חלק באינטרנט

איך ה-APIs של הפורטלים יכול לשפר את חוויית הניווט שלכם?

יוסוקה אוצונומיה

כדי לספק חוויית משתמש טובה, חשוב שהדפים שלכם ייטענו במהירות. אבל אחד התחומים שאנחנו מתעלמים ממנו לעיתים קרובות הוא מעברים בין דפים. זה מה שהמשתמשים שלנו רואים כשהם עוברים בין דפים.

הצעה חדשה ל-API של פלטפורמת אינטרנט שנקראת Portals נועדה לעזור לכם בכך על ידי ייעול החוויה בזמן שהמשתמשים עוברים ברחבי האתר שלכם.

הצגת פורטלים בפעולה:

הטמעות וניווט בקלות בעזרת פורטלים. נוצר על ידי אדם ארגייל

מה אפשר לעשות בפורטלים

פעולות של דף יחיד (SPA) מאפשרות מעברים יפים, אבל הבנייה של אפליקציות כאלה כרוכה במחיר גבוה יותר. הרבה יותר קל ליצור אפליקציות מרובות דפים (MPA), אבל בסוף יהיו לכם מסכים ריקים בין הדפים.

פורטלים מציעים את הטוב ביותר משני העולמות: המורכבות הנמוכה של MPA עם מעברים חלקים של SPA. חשוב עליהן כמו <iframe> בכך שהן מאפשרות הטמעה, אבל בניגוד ל-<iframe>, הן כוללות גם תכונות שמאפשרות לנווט לתוכן שלהם.

לראות מה קורה: קודם כדאי לצפות במה שהצגנו בכנס המפתחים של Chrome ב-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-portals-demo.glitch.me. כדאי לגשת אליה עם Chrome מגרסה 85 ואילך ולהפעיל את סימון הניסוי!

1. מזינים כתובת URL שרוצים להציג בתצוגה מקדימה.
2. לאחר מכן הדף יוטמע כרכיב <portal>.
3. לוחצים על התצוגה המקדימה.
4. התצוגה המקדימה תופעל אחרי אנימציה.

לעיון במפרט

אנחנו דנים באופן פעיל במפרט של הפורטלים בקבוצת קהילת Web Incubation (WICG). כדי להתעדכן במהירות, כדאי להציץ בחלק מהתרחישים המרכזיים. אלה שלוש התכונות החשובות שכדאי להכיר:

• הרכיב <portal>: רכיב ה-HTML עצמו. ה-API פשוט מאוד. הוא מכיל את המאפיין src, את הפונקציה activate וממשק להעברת הודעות (postMessage). activate משתמש בארגומנט אופציונלי כדי להעביר נתונים ל-<portal> לאחר ההפעלה.
• הממשק portalHost: הוספת אובייקט portalHost לאובייקט window. כך אפשר לבדוק אם הדף מוטמע כרכיב <portal>. השירות גם מספק ממשק להעברת הודעות (postMessage) בחזרה למארח.
• הממשק PortalActivateEvent: אירוע שמופעל כאשר <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>. לכן, אם יש לכם כמה אתרים שמתייחסים זה לזה, תוכלו גם להשתמש בפורטלים כדי ליצור ניווט חלק בין שני אתרים שונים. התרחיש הזה לדוגמה ממקורות שונים הוא ייחודי מאוד לפורטלים, ויכול אפילו לשפר את חוויית המשתמש של אפליקציות SPA.

משוב יתקבל בברכה

פורטלים מוכנים לעריכת ניסויים בגרסאות Chrome 85 ואילך. משוב מהקהילה חיוני לעיצוב של ממשקי API חדשים. אנחנו מזמינים אתכם לנסות אותו ולספר לנו מה דעתכם. אם יש לכם בקשות או משובים להוספת תכונות, אפשר לעבור אל מאגר WICG GitHub.