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

איך הממשק המוצע של Portals API יכול לשפר את חוויית הניווט.

Yusuke Utsunomiya

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

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

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

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

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

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

צפייה היא מתוך מחשבה על: כדאי לראות קודם מה הצגנו בכנס המפתחים של Chrome לשנת 2018:

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

לפני פורטלים, יכולנו לעבד דף אחר באמצעות <iframe>. יכולנו גם להוסיף אנימציות כדי להזיז את המסגרת בדף. עם זאת, <iframe> לא יאפשר לך לנווט לתוכן שלו. פורטלים סוגרים את הפער הזה וכך מאפשרים שימוש בתרחישים מעניינים לשימוש.

להתנסות בפורטלים

מפעיל דרך about://flags

כדאי לנסות את הפורטלים ב-Chrome 85 ואילך על ידי הפעלת דגל ניסיוני:

• הפעלת הדגל 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, שפועל בדיוק כמו ההדגמה שלמעלה, הקטע הבא יעניין.

// 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. צריך להקפיד לפתוח אותו בגרסה 85 ואילך של Chrome ולהפעיל את דגל הניסוי!

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

למפרט

אנחנו דנים באופן פעיל המפרט של Portals בקבוצת הקהילה של הובלת באינטרנט (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
    });
  }
});

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

תרחישים לדוגמה ותוכניות

אנחנו מקווים שאהבתם את הסיור הקצר הזה בפורטלים. אנחנו כבר ממש סקרניים לראות מה תוכל להמציא. לדוגמה, יכול להיות שתרצו להתחיל להשתמש בפורטלים לניווטים פשוטים, למשל: רינדור מראש של הדף של המוצר הנמכר ביותר מדף של פרטי קטגוריית מוצרים.

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

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

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