אפליקציות PWA מתקדמות

יש יכולות של PWA שמוכרות לכולם, כמו Notifications API שמאפשר לאפליקציית אינטרנט לקבל ולפרסם התראות בפלטפורמה. אבל יש גם מספר תכונות חדשות ועתידיות שיושקו באינטרנט כדי לשפר את האפליקציות שלכם. פרויקט היכולות של האינטרנט ב-Chromium, שנקרא גם פרויקט פוגו 🐡, הוא מאמץ להטמעת תקני אינטרנט חדשים ועוצמתיים, תוך שמירה על מה שהופך את האינטרנט לייחודי: אבטחה שמתמקדת במשתמש, שימוש נוח ותאימות בין פלטפורמות.

גישור על הפער בין האפליקציות

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

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

נשלח

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

IN ORIGIN TRIAL

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

במהלך תקופת הניסיון למפתחים

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

תאריך התחלה:

הפיתוח התחיל, אבל כרגע אין API שניתן לשימוש.

בבדיקה

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

שיפור ה-PWA

כשמפתחים PWA, כדאי להטמיע את ממשקי ה-API הבאים ואת השיטות המומלצות כדי לשפר משמעותית את התחושה של אפליקציית האינטרנט. בהתאם לתרחיש השימוש הכללי, יכול להיות שאפליקציה תרוויח משימוש בממשק API אחד או יותר כדי לשפר את חוויית המשתמש הכוללת. ממשקי API שמסומנים בסמל 🔮 נמצאים בתקופת ניסיון של מקור, ממשקי API שמסומנים בסמל 🚩 נמצאים בתקופת ניסיון למפתחים, ממשקי API שמסומנים בסמל 📱 יציבים כרגע בנייד וההטמעות שלהם במחשב התחילו, וכל ממשק API אחר שמוזכר יציב (אבל יכול להיות שהוא לא זמין בכל הפלטפורמות). הרשימה כוללת רק ממשקי API שזמינים בגרסאות היציבות, בגרסאות הבטא (מסומנות ב-β) או בגרסאות Canary (מסומנות ב-α) הנוכחיות של Chrome. הרשימה מתעדכנת באופן קבוע כדי לשקף את ממשקי ה-API שמופצים.

התקנת האפליקציה

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

  • מניפסט של אפליקציית אינטרנט – מספק מידע על אפליקציית האינטרנט לדפדפן ולמערכת ההפעלה, למשל שם, לוגו, כתובת ה-URL שבה האפליקציה מתחילה ואיך להציג את אפליקציית האינטרנט.
  • ‫Service Workers and Cache Storage API – מאפשר לאפליקציית האינטרנט ליצור שרת proxy ולשלוט באופן הטיפול במטמון הדפדפן. כדי שאפליקציית אינטרנט תהיה ניתנת להתקנה, היא צריכה לכלול קובץ שירות (service worker) שמגיב לאירוע fetch בדפדפן ויכול להגיב לבקשת fetch לכתובת ה-URL להתחלה שצוינה במניפסט של אפליקציית האינטרנט עם תוכן כשהמשתמש במצב אופליין.
  • הפעלה בהתחברות 🚩β – מאפשרת להגדיר את ה-PWA כך שיופעל אוטומטית כשהמשתמש מתחבר.
  • קיצורי דרך לסמל האפליקציה – קיצורי דרך לכתובות URL ספציפיות באפליקציית האינטרנט (לדוגמה, התחלת צ'אט, העלאת תמונה וכו'), מתפריט ההקשר של סמל האפליקציה המותקנת (כלומר, לחיצה ארוכה במכשירים ניידים, קליק ימני במחשבים), בפלטפורמות נתמכות.
  • ‫getInstalledRelatedApps – מאפשר לאפליקציית האינטרנט לבדוק אם אפליקציית ה-PWA, אפליקציית Android או אפליקציית Windows (UWP) כבר הותקנו.

ניתן להתאמה ונגיש

אם אתם רוצים שהמשתמשים יוכלו להשתמש באפליקציית האינטרנט שלכם במכשירים שונים ועם צרכים פיזיים או מנטליים שונים, כדאי להטמיע את הפתרונות הבאים:

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

מונטיזציה והפצה

  • ‫Web Payments – ממשק גמיש וסטנדרטי לתשלומים באינטרנט, שנועד לפעול בכל דפדפן או מכשיר, עם כל ספק שירותי תשלום או אמצעי תשלום.
  • ‫Digital Goods API 🔮 – ממשק גמיש וסטנדרטי לשליחת שאילתות ולניהול רכישות מתוך אפליקציות אינטרנט, כולל תמיכה בסוגי רכישות נפוצים כמו רכישות חד-פעמיות, רכישות חוזרות (כמו אבנים יקרות או מטבע במשחק) ומינויים. התכונה פועלת בשילוב עם Web Payments.
  • פעילות אינטרנט מהימנה – יצירת אפליקציית Android ל-PWA כדי שאפשר יהיה להציע אותה להורדה בחנויות תואמות, למשל Google Play.

גישה ללוח העריכה

  • ‫Async Clipboard – קריאה וכתיבה של טקסט ותמונות ללוח של המשתמש, והאזנה לאירועי העתקה והדבקה מהמשתמש.

התראות

אם אפליקציית האינטרנט שלכם צריכה לשלוח התראות למשתמשים, למשל אפליקציית צ'אט או קידוד ברקע, כדאי להטמיע את ממשקי ה-API הבאים:

  • התראות מאפליקציות אינטרנט – אחרי שמשתמש מאשר קבלת התראות, אפליקציית האינטרנט יכולה לשלוח לו התראות.
  • ‫Badging API – מאפשר לאפליקציית האינטרנט המותקנת להגדיר תג לכל האפליקציה בסמל האפליקציה, עם אפשרות להוסיף מספר.
  • טריגרים של התראות 🔮 – שליחת התראות למשתמשים כשמתקיים תנאי טריגר, למשל על סמך זמן או מיקום (כמו התראות על אירועים ביומן)

שיתוף כוונות וטיפול בפרוטוקולים

  • רישום פרוטוקול כתובת URL 🚩α – מאפשר לאפליקציות אינטרנט לרשום את עצמן כ-handlers של פרוטוקולים או סכימות של כתובות URL בהתאמה אישית באמצעות מניפסט ההתקנה שלהן.
  • ‫Web Share – שימוש בממשק המשתמש המובנה של שיתוף המערכת במכשירים נתמכים כדי לשתף כתובות URL, טקסט וקבצים עם אפליקציות מותקנות אחרות במכשיר. לא צריך להתקין את האפליקציה.
  • Web Share Target – מאפשר למשתמשים לשתף טקסט וקבצים לאפליקציית PWA מותקנת מאפליקציות אחרות, באמצעות ממשק משתמש מובנה לשיתוף במערכת במכשירים נתמכים.

פתיחה ושמירה של קבצים

  • ‫File Handling API 🚩 – מאפשר לאפליקציית אינטרנט מותקנת להירשם במערכת ההפעלה כדי לטפל (לקרוא, להזרים או לערוך) בקבצים עם סוגי MIME או סיומות קבצים נתונים. כך, למשל, האפליקציה יכולה להופיע כאפשרות ברשימה 'פתיחה באמצעות אפליקציה…' בתפריט ההקשר.
  • ‫File System Access API – גישה חזקה למערכת הקבצים של המשתמש בכל הפעלה, שמאפשרת את האינטראקציות הבאות (בהתאם לצורך של האפליקציה)
    • קריאת קבצים ממערכת הקבצים המקומית – הצגת כלי לבחירת קבצים והרשאת משתמש לבחור קובץ אחד או, לחלופין, כמה קבצים לפתיחה, כולל הגבלת סוגי הקבצים המותרים לפי סוג MIME וסיומת.
    • שמירת שינויים בקובץ פתוח – שמירת שינויים בקובץ שנפתח באמצעות FSA ישירות, בלי לבקש מהמשתמש לבחור איפה לשמור את הקובץ או להוריד עותק.
    • יצירת קובץ חדש במערכת הקבצים המקומית – מאפשרת למשתמש ליצור קובץ חדש במערכת הקבצים המקומית, עם אפשרות להגדיר סיומת קובץ כברירת מחדל, ולאחר מכן לאפשר לאפליקציה שלכם גישה לשמירת הקובץ.
    • קבצים שנפתחו לאחרונה – אפשר לאחסן ב-IndexedDB קובצי handler שנוצרו באמצעות FSA, וכך להציג רשימה של קבצים שהיו בשימוש לאחרונה בין סשנים של משתמשים (אבל הרשאות העריכה עדיין לא נשמרות בין סשנים)
    • קריאה, כתיבה ושינוי של ספרייה – מאפשר למשתמש לבחור ספרייה במערכת הקבצים המקומית, שהאפליקציה יכולה לקרוא את התוכן שלה, ליצור, לקרוא ולמחוק קבצים ותתי-ספריות בתוכה, ולקבוע את נתיב הקובץ היחסי בתוכה.
  • ‫Compression Streams – דחיסה או שחרור דחיסה באמצעות אלגוריתמי הדחיסה gzip ו-deflate.

ניהול החלונות

  • ‫Fullscreen API – מאפשר למשתמש להציג רכיב באפליקציית האינטרנט, למשל סרטון, במסך מלא
  • ‫Cross-Screen Window Placement API 🔮 – מאפשר לאפליקציית האינטרנט שלכם לקבל מידע על צגים מחוברים ולמקם חלונות ביחס לצגים האלה, וכך ליצור אפליקציות אינטרנט עם כמה חלונות וכמה צגים.
  • מצב תצוגה של אפליקציה עם כרטיסיות 🚩 – מאפשר להציג את אפליקציית האינטרנט המותקנת בכרטיסייה אחת או יותר, ולא רק בחלון אחד.

שילוב עמוק יותר עם מערכת ההפעלה

  • ‫Local Fonts API 🔮 – מאפשר לאפליקציית האינטרנט שלכם לפרט גופנים שהותקנו באופן מקומי ולבקש גישה ברמה נמוכה (מכוונת בייטים) למאגר SFNT שכולל את נתוני הגופן המלאים, וכך לאפשר לאפליקציה שלכם לבצע עיבוד מותאם אישית של גופנים שהותקנו באופן מקומי.
  • ‫Wake Lock – מאפשר לאפליקציית האינטרנט למנוע את מצב השינה של המסך, כך שאפליקציית האינטרנט יכולה לבצע משימות ארוכות טווח בלי חשש להפרעה (למשל, קידוד מחדש של קובץ או הצגת מתכון בזמן הבישול)
  • ‫Idle Detection 🔮 – מאפשר לאפליקציית האינטרנט לזהות מתי המשתמש לא משתמש באופן פעיל במכשיר שלו.

תמיכה מורחבת במצב אופליין

אם רוצים שהאפליקציה האינטרנטית תפעל טוב יותר גם במצב אופליין, כדאי להטמיע את ממשקי ה-API הבאים:

  • סנכרון ברקע – כשאתם במצב אופליין, הבקשות שדורשות חיבור מתווספות לתור, ואז הנתונים של אפליקציית האינטרנט מסונכרנים ברקע כשהרשת זמינה, במקום שהבקשות לא יעובדו בכלל במצב אופליין. לדוגמה, לאפשר לשלוח הודעות או לסנכרן שינויים מצטברים במסמך כשמתחברים שוב לאינטרנט.
  • סנכרון תקופתי ברקע – מאפשר לאפליקציית האינטרנט המותקנת שבה אתם משתמשים לעיתים קרובות להפעיל את ה-service worker שלה מדי פעם, על סמך פרק זמן מינימלי שעבר, ולבצע פעולות כמו עדכון של מטמון, כדי שהתוכן יהיה עדכני כשהמשתמש יפתח את האפליקציה.
  • ‫Content Indexing API – מאפשר לאפליקציית האינטרנט שלכם להודיע לדפדפן איזה תוכן זמין אופליין, כדי שהדפדפן יוכל להציג אותו למשתמשים.
  • אחזור ברקע – מאפשר לבצע אחזורים ברקע לזמן ארוך, כמו הורדת סרטים או העלאת סרטונים ותמונות, בלי שהסיכון ש-Service Worker יופסק יהיה גבוה.

סטרימינג, קידוד ופענוח של מדיה

אם אפליקציית האינטרנט שלכם מפעילה קובצי מדיה, כמו קובצי וידאו או אודיו, כדאי לשקול הטמעה של ממשקי ה-API הבאים:

  • שידור דינמי שניתן להתאמה – מאפשר מעבר בין קצבי העברת נתונים (bit rate) של שידורי וידאו בהתאם לביצועי הרשת
  • תמונה בתוך תמונה – מאפשרת למשתמש להוציא סרטון מאפליקציית האינטרנט לחלון שמוצג תמיד בחזית, שאפשר להזיז ולשנות את הגודל שלו בנפרד
  • ‫Media Session API – מאפשר למשתמש לשלוט בהפעלת מדיה באפליקציית האינטרנט באמצעות פונקציונליות של חומרה ותוכנה ברמת מערכת ההפעלה (כמו לחצני הפעלה/השהיה/עצירה במקלדות או במסכי נעילה), וגם לשלוט בהתראות מדיה ברמת מערכת ההפעלה (כמו שם, אמן, אלבום ויצירת אמנות)
  • ‫Chromecast API – מאפשר למשתמש להפעיל Cast של מדיה למכשיר Chromecast זמין, למשל להפעיל סרטון מאפליקציית האינטרנט שלכם בטלוויזיה שלו.
  • ‫Web Codecs 🔮 – גישה למקודדים ולמפענחים מובנים של מדיה בחומרה ובתוכנה, שימושיים לתרחישי שימוש בזמן אמת כמו סטרימינג בשידור חי עם השהיה נמוכה, קידוד, פענוח וטרנסקוד של קבצים.

תמיכה מורחבת בקלט

תמיכה מתקדמת בציוד היקפי

  • ‫Web USB – מאפשר לאפליקציית האינטרנט שלכם לגשת למכשירי USB לא סטנדרטיים (כלומר מקלדות ועכברים) מתוך האפליקציה
  • ‫Serial API 🔮 – נוסף API לתקשורת עם מכשירי חומרה דרך יציאה טורית פיזית או וירטואלית.

רשימת המשימות שלכם ל-PWA

רוצים להתחיל לשפר את ה-PWA באמצעות ממשקי ה-API החדשים והעוצמתיים האלה? בוחרים אחד מתרחישי השימוש שלמטה כדי לראות רשימה מומלצת של ממשקי API שאפשר להשתמש בהם, או יוצרים רשימת משימות משלכם ופועלים להשלמתה.