אפליקציות מסוג 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.
חומרה וחיישנים
- מיקום גיאוגרפי מקבל את מיקום המשתמש דרך ספקים שונים, כמו לוויין או Wi-Fi, באמצעות ה-API למיקום גיאוגרפי.
- מצלמה ומיקרופון מקבלים שידורי מדיה ממצלמות וממיקרופונים באמצעות הממשק של מכשירי מדיה.
- חיישנים אוספים מידע בזמן אמת ממד התאוצה, מהג'ירוסקופ, מהמגנטומטר וממקורות אחרים באמצעות Sensors API או ממשקים ישנים יותר, כמו DeviceMotionEvent ו-DeviceOrientationEvent. ב-Safari, צריך להשתמש בבקשה לתיבת דו-שיח להרשאה לא רגילה כדי להשתמש בהן.
- נגיעה ומצביע מאפשרים גישה למידע על כל הנגיעות והקליקים מבוססי-הסמן שמבצעים באמצעות האצבע, העכבר, משטח המגע או העט, הודות לאירועי מצביע ואירועי מגע.
- Gamepads לקריאת מידע שמגיע מ-גיימפאד וג'ויסטיק רגילים שמחוברים למכשיר באמצעות Gamepad API.
- אימות ביומטרי (למשל זיהוי פנים או טביעת אצבע) באמצעות אימות אינטרנט או WebAuthn.
אינטגרציה של מערכת הפעלה
- סינתזת דיבור וזיהוי קולי משתמשים בקולות המותקנים בפלטפורמה כדי לדבר אל המשתמש ולזהות את מה שהמשתמש אומר, הודות ל-Web Speech API.
- לשתף תוכן מאפליקציית ה-PWA לאפליקציות ולמקומות אחרים במכשיר בעזרת Web Share API, כפי שאפשר לראות בפרק השילוב של מערכת ההפעלה.
- לגשת ללוח כדי לשמור ולאחזר תוכן מהלוח בפורמטים שונים, הודות ל-Clipboard API, כפי שהראיתי בפרק השילוב של מערכת ההפעלה.
- נהל את פרטי הכניסה והסיסמאות של משתמשים באמצעות Credential Management API.
- הפעלת סרטונים במצב תמונה בתוך תמונה במערכת ההפעלה באמצעות API של תמונה בתוך תמונה.
- עבד תוכן במסך מלא הודות ל-Fullscreen API, כפי שהראיתי בפרק ב-Windows.
יכולות ירוקות בהיר
בהמשך מופיעה רשימה של היכולות החשובות ביותר שאפשר להשתמש בהן ב-PWA, יחד עם אזהרה לגבי האפשרות שהן לא יהיו זמינות בכל דפדפן.
העקרונות הבסיסיים
- WebGL 2.0, הגרסה החדשה של מפרט WebGL שמתאימה ל-OpenGL 3.0.
- רכיבי Codec, גישה ברמה נמוכה לפריימים הנפרדים של הווידאו בסטרימינג ולקטעי אודיו. שימושי לאפליקציות אינטרנט שמחייבות שליטה מלאה על אופן עיבוד המדיה באמצעות Web Codecs API.
חומרה וחיישנים
- פקדי מצלמה מתקדמים שמאפשרים גישה לפקדי הזזה, הטיה ושינוי מרחק התצוגה, בנוסף לממשקי ה-API של המדיה.
- Bluetooth LE כדי לתקשר עם מכשירי Bluetooth עם צריכת אנרגיה נמוכה בקרבת המשתמש באמצעות Web Bluetooth API. למידע נוסף, ניתן לעיין במאמר בנושא תקשורת עם מכשירי Bluetooth באמצעות JavaScript.
- תקשורת מטווח קצר להעברת נתונים דרך NFC באמצעות הודעות בפורמט NFC קליל של חילופי נתונים (NDEF), כמו תג או כרטיס NFC באמצעות WebNFC API. ניתן גם לקרוא את המאמר אינטראקציה עם מכשירי NFC ב-Chrome ל-Android לקבלת פרטים נוספים.
ציוד היקפי טורי לגישה ברמה נמוכה למכשירים שמחוברים למכשיר באמצעות יציאה טורית, USB או חיבור טורי באמצעות Bluetooth באמצעות ה-Web Serial WPI. בקישור הבא מוסבר איך קוראים יציאה טורית וכותבים בה.
גישה של התקן USB לתקשורת עם מכשירים שמחוברים באמצעות WebUSB API ב-USB. למידע נוסף, ראה גישה להתקני USB באינטרנט.
מכשירים עם ממשק אנושי מאפשרים ל-PWA לקיים אינטראקציה עם כל סוג של מכשיר שהוכן לאינטראקציה אנושית שלא מקובל, באמצעות WebHID API. כדאי לעיין במדריך הזה בנושא חיבור למכשירי HID לא נפוצים.
- תאורת סביבה קוראת את רמת האור הנוכחית או את עוצמת התאורה הנוכחית של אור הסביבה סביב המכשיר, בנוסף ל-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.
אינטגרציה של מערכת הפעלה
- קריאה וכתיבה של קבצים במכשיר בעזרת File System Access API, כפי שראיתם בפרק שילוב של מערכת ההפעלה.
- קבלת תוכן מאפליקציות אחרות בזכות Web Share Target (יעד שיתוף האינטרנט), כמו שהראיתי בפרק שילוב של מערכת הפעלה.
- קבלת נתונים של אנשי קשר באמצעות Contact Picker API, כפי שמתואר בפרק שילוב מערכת הפעלה.
- לסנכרן ברקע גם כשלא משתמשים ב-PWA, הודות ל-Background Synchronization API.
- תזמון משימות כש-PWA לא בשימוש, הודות ל-Web periodic Background Synchronization API.
- שליחת התראות באמצעות Web Push ו-Web Notifications API.
- בעזרת Background Fetch API, תוכלו להעביר קבצים ברקע בזמן שהמשתמש לא משתמש ב-PWA.
- משלבים את הפעלת המדיה עם מערכת ההפעלה באמצעות Media Session API.
- לנהל תשלומים ב-PWA, בעזרת Payment Request API. Apple מציעה גם ספריית Apple Pay JS בנוסף ל-Payment Request API.
- סטטוס הרשת של שאילתה, למשל סוג החיבור (4G, Wi-Fi) וסימון 'שמירת נתונים' באמצעות Network Information API.
- מצלמים את המסך של המשתמש לצורך הקלטת מסך או לצורך שיתוף מסך באמצעות Screen Capture API.
- זיהוי צורות באמצעות גלאים עם האצת חומרה במכשיר, כולל ברקודים (זיהוי פנים אנושי ו-OCR של טקסט עדיין בפיתוח) באמצעות shape Detection API (זיהוי צורה).
- שאילתות על הזיכרון של המכשיר באמצעות ממשק הזיכרון של המכשיר.
- סיסמאות חד-פעמיות ב-SMS מאפשרות לך לקבל באופן אוטומטי קוד ב-SMS שנשלח מהשרת שלך באמצעות WebOTP API. Safari מטמיע קבוצת משנה של פתרון על סמך הרכיב
<input>. אפשר לקרוא מידע נוסף על הנושא בבלוג של WebKit. - ניהול המקלדת הווירטואלית שמופיעה במסכים של מכשירים ניידים באמצעות Virtual Keyboard API.