חדש ב-Chrome 89

Pete LePage

ההשקה של Chrome 89 מתחילה עכשיו בצורה יציבה.

דברים שעליך לדעת:

אני פיט LePage, אני עובד ומצלם מהבית, בואו נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 89!

WebHID, WebNFC ו-Web Serial

אני ממש מתלהב מ-WebHID , WebNFC ו-Web Serial. הם פותחים למשתמשים תרחישים חדשים שלא היו אפשריים לפני כן, כשהם מבצעים אינטראקציה עם חומרה מהעולם האמיתי.

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

באמצעות Web Serial וכ-60 שורות קוד, @AndreBan יצר דף שיכול לתקשר עם MicroPython REPL ב-Raspberry Pico. Espruino משמשת גם את Espruino לסביבת פיתוח משולבת (IDE) מבוססת-אינטרנט.

ב-CDS 2019, פרנסואה כתב משחק כיפי בסגנון זיכרון באמצעות Web NFC. הייתם צריכים להצמיד את הטלפון לכרטיס הנכון, בסדר הנכון.

StreamDeck עם פד תוף דאפט פאנק

נוסף על כך, @bramus השתמש ב-WebHID כדי להתחבר ל-StreamDeck, ויצר בו משטח לתופים של דאפט פאנק. אם אין לכם StreamDeck, צפו בסרטון ההדגמה שלו ב-YouTube ובדקו את הקוד ב-GitHub.

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

אפשר לקבל מידע נוסף על כמה מהמכשירים שאפשר להתחבר אליהם באתר web.dev/devices, או לעיין במדריכים לתחילת העבודה עבור WebHID , WebNFC ו-Web Serial.

שינויים בקריטריונים של יכולת התקנה של PWA

מאז ומתמיד, תמיכה אופליין היא חלק מרכזי בקריטריונים של Progressive Web App להתקנה. כמו באפליקציות מותקנות אחרות, המשתמשים מצפים שהיא תפעל בצורה אמינה. המשחק צריך להיות מהיר, והם אף פעם לא אמורים לראות את הדינוזאור במצב אופליין!

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

החל מגרסה 89 של Chrome, אם לא ניתן לקבל תגובה תקינה מ-PWA במצב אופליין, תוצג אזהרה ב-DevTools בכרטיסייה 'בעיות', וב-Lighthouse יצוין שיש בעיה. בנוסף, האכיפה תתחיל בגרסה 93 של Chrome, בהמשך השנה.

כלי פיתוח שמציגים הודעת אזהרה במסוף.
הודעת אזהרה ב-Chrome DevTools Console.
כלי פיתוח שמציגים הודעת אזהרה בכרטיסייה 'אפליקציה'.
הודעת אזהרה בכרטיסייה 'אפליקציה' > מניפסט > יכולת התקנה.

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

אפשר לקרוא עוד פרטים על השינוי ועל הסיבה לשינויים שלו במאמר שיפור זיהוי התמיכה ב-Progressive Web App במצב אופליין.

אם לא ברור לך איך להתחיל, אפשר להיכנס אל תיבת עבודה. יש בו קבוצה של ספריות שיכולות להפעיל קובץ שירות (service worker) שמוכן לייצור עבור ה-PWA. או, בדף חלופי פשוט במצב אופליין, המאמר יצירת דף חלופי אופליין כולל את כל הקוד שצריך, ואפשר להעתיק ולהדביק ישירות באתר.

יעד לשיתוף באינטרנט ויעד שיתוף באינטרנט במחשב שולחני

אם האתר שלכם מאפשר למשתמשים ליצור קבצים, לערוך אותם או לבצע בהם פעולות, עליכם להשתמש בממשקי Web Share וב-Web Share Target API. ממשקי ה-API האלה היו זמינים בנייד כבר לא מעט זמן, אבל עכשיו יש בהם תמיכה ב-ChromeOS וב-Windows.

שיתוף אינטרנט מאפשר למשתמשים לשלוח קבצים או נתונים לאפליקציות אחרות שמותקנות במכשיר שלהם, למשל שיתוף תמונה מ-Google Photos ל-Twitter.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

אם רוצים להירשם כיעד כדי שאפליקציות אחרות יוכלו לשתף איתכם קבצים או נתונים, מומלץ להשתמש ב-Web Share Target API.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

כדי להתחיל, עיינו במדריכים לתחילת העבודה: שילוב עם ממשק המשתמש של שיתוף מערכת ההפעלה עם Web Share API וקבלת נתונים משותפים באמצעות Web Share Target API.

ועוד

וכמובן, יש עוד הרבה אפשרויות.

ב-Chrome אפשר עכשיו להגדיר await ברמה העליונה במודולים של JavaScript.

סמל התקנה חדש של אפליקציות PWA בסרגל הכתובות

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


בנוסף, אם השתמשתם בפעילות מהימנה באינטרנט כדי להפוך את ה-PWA שלכם לזמינה בחנות Play ל-ChromeOS, תוכלו להירשם לגרסת המקור לניסיון של Digital Goods API.

קריאה נוספת

המאמר הזה מתייחס רק לחלק מההדגשים העיקריים. בקישורים שבהמשך תוכלו למצוא שינויים נוספים ב-Chrome 89.

להרשמה

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

אני פיט לה פייג', וברגע ש-Chrome 90 יושק, אהיה כאן כדי לספר לכם מה חדש ב-Chrome!

זיכויים

התמונה של 'הפטפוס' וארדואינו היא תמונה מאת האריסון ברודבנט ב-UnFlood.