יכולות

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

הדוח What Web Can Do Today (מה אפשר לעשות היום) כדי לדעת מה ניתן לעשות בכל פלטפורמה. לגבי יכולות או ממשקי API נפרדים, ניתן להשתמש ב-Can I use או בטבלאות התאימות של הדפדפנים ב-MDN.

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

כלומר, צריך לפתח את האפליקציה בשכבות שייתכן שלא יהיו זמינות בכל מכשיר ולבדוק את הזמינות לפני השימוש.

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

אינטרנט רב עוצמה

האינטרנט מאוד חזק בימינו. למשל:

  • אפשר לפתח אפליקציית וידאו צ'אט היפר-מקומית עם WebRTC, מיקום גיאוגרפי והודעות בדחיפה.
  • אפשר להגדיר אפליקציה כניתנת להתקנה.
  • אתם יכולים להוסיף אפקטים לווידאו באמצעות WebAssembly.
  • אפשר אפילו להפוך אותו למציאות מדומה באמצעות WebGL ו-WebXR.

שיפור ה-PWA

נפצל את ממשקי ה-API של יכולות ה-PWA לארבע קבוצות:

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

יכולות ירוקות

בהמשך מופיעה רשימה של היכולות החשובות ביותר שאפשר להשתמש בהן ב-PWA.

מידע בסיסי

  • שמירת קבצים במטמון באופן מקומי באמצעות Cache API, כפי שמתואר בפרק בנושא שמירה במטמון.
  • ביצוע משימות בשרשורים באמצעות עובדי אינטרנט, כפי שראינו בפרק ניהול המורכבות.
  • ניהול בקשות רשת עם אסטרטגיות שונות ב-Service Worker, כפי שמתואר בפרק של עובדי שירות.
  • לוח הציור דו-ממדי להצגת גרפיקה דו-ממדית במסך באמצעות Canvas API.
  • לוח הציור בעל ביצועים גבוהים בדו-ממד ותלת-ממד, או WebGL, לעיבוד גרפיקה בתלת-ממד.
  • WebAssembly, או WASM, להפעלת קוד הידור ברמה נמוכה לצורך ביצועים.
  • תקשורת בזמן אמת באמצעות WebRTC API.
  • ממשקי API של Web Performance למדידת הביצועים ולשיפור של חוויית המשתמש. מידע נוסף זמין במדריך Performance API.
  • אחסון נתונים באופן מקומי באמצעות IndexedDB וניהול האחסון כדי לשלוח שאילתות לגבי מכסות ולבקש אחסון קבוע, כפי שמתואר בפרק לגבי נתונים ממקורות אופליין.
  • אודיו ברמה נמוכה הודות ל-Web Audio API.
  • זיהוי חזית באמצעות Page Visibility API (ממשק ה-API של חשיפת דפים).
  • תקשורת ברשת באמצעות Fetch API ו-WebSocket API.

חומרה וחיישנים

  • Gamepads לקריאת מידע שמגיע מ-גיימפאד וג'ויסטיק רגילים שמחוברים למכשיר באמצעות Gamepad API.
  • אימות ביומטרי (למשל זיהוי פנים או טביעת אצבע) באמצעות אימות אינטרנט או WebAuthn.

אינטגרציה של מערכת הפעלה

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

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

העקרונות הבסיסיים

  • WebGL 2.0, הגרסה החדשה של מפרט WebGL שמתאימה ל-OpenGL 3.0.
  • רכיבי Codec, גישה ברמה נמוכה לפריימים הנפרדים של הווידאו בסטרימינג ולקטעי אודיו. שימושי לאפליקציות אינטרנט שמחייבות שליטה מלאה על אופן עיבוד המדיה באמצעות Web Codecs API.

חומרה וחיישנים

  • תאורת סביבה קוראת את רמת האור הנוכחית או את עוצמת התאורה הנוכחית של אור הסביבה סביב המכשיר, בנוסף ל-Sensors API.
  • רטט מספק למשתמש משוב פיזי כשקורה משהו, אם המכשיר תומך בו, דרך Vibration API.
  • תיעוד מדיה לוכד את הנתונים שנוצרים על ידי אובייקט MediaStream או HTMLMediaElement (כמו תג <video>) לצורך ניתוח, עיבוד או שמירה בדיסק, הודות ל-MediaRecorder API.
  • הפעלה של נעילת מצב שינה על המסך מונעת מהמכשיר לעמעם או לנעול את המסך כשצריך להשתמש ב-PWA כדי להמשיך לפעול, באמצעות Screen Wake Lock API.
  • מציאות מדומה מאפשרת לכם להשתמש באוזניות ובמכשירים אחרים ב-PWA, הודות ל-WebXR Device API.
  • אפשר להשיג מציאות רבודה ב-PWA בדרכים רבות, למשל באמצעות WebXR Device API או באפליקציית Safari Quick Look לתוכן ב-AR.
  • זיהוי משתמשים לא פעילים באמצעות Idle Detection API.
  • נעילת כיוון נועלת את הכיוון לאורך או לרוחב כש-PWA מוצגת במסך, הודות ל-Screen Orientation API או המאפיין orientation של המניפסט של אפליקציית האינטרנט לאפליקציות מותקנות.
  • הצג תוכן במקרנים ובמסכים משניים, הודות ל-presentation API.
  • נעילת מצביע כדי לקבל מידע על תנועת דלתא ממצביעים (עכברים, משטחי עקיבה ומצביעים) במקום ערכי מיקום – שימושי במשחקים מסוימים – הודות ל-Pointer Lock API.

אינטגרציה של מערכת הפעלה

משאבים