לגרום ל-Progressive Web App לא להרגיש כמו אתר, אלא כמו אפליקציה "אמיתית"
כשמשחקים ב-Progressive Web App buzzword, מומלץ להגדיר ב-PWA רק אתרים. תיעוד PWA של Microsoft מאשר, אנחנו אומרים את זה באתר הזה, ואפילו המועמדים של PWA פרנסס ברימן ואלכס ראסל כותבים זאת. כן, אפליקציות PWA הן רק אתרים, אבל הן גם הרבה יותר מכך. אם עושים את זה נכון, PWA לא תרגיש כמו אתר, אלא כמו אפליקציה "אמיתית". איך מרגישים כמו אפליקציה אמיתית?
כדי לענות על השאלה הזו, ניקח לדוגמה את אפליקציית פודקאסטים של Apple. היא זמינה ב-macOS במחשבים ובמכשירי iOS (ו-iPadOS, בהתאמה) בנייד. אפליקציית Podcasts היא אפליקציה של מדיה, אבל הרעיונות העיקריים שאני מדגים בעזרתה חלים גם על קטגוריות אחרות של אפליקציות.
מאפשר הפעלה במצב אופליין
אם תיקח צעד אחד לאחור ותחשוב על היישומים הספציפיים לפלטפורמה שיש לך בטלפון הנייד או במחשב, דבר אחד יבלוט בבירור: אף פעם לא תקבל דבר. באפליקציית פודקאסטים, גם אם אני במצב אופליין, תמיד יש משהו. כאשר אין חיבור לרשת, האפליקציה עדיין נפתחת באופן טבעי. בקטע מצעדי הלהיטים לא מוצג שום תוכן, אלא חוזר על ההודעה לא ניתן להתחבר עכשיו שמותאמת ללחצן ניסיון חוזר. אולי זו לא החוויה הכי נעימה, אבל הבנתי משהו.
אפליקציית Podcasts פועלת לפי מודל מעטפת האפליקציה שנקרא. כל התוכן הסטטי שנדרש כדי להציג את האפליקציה העיקרית נשמר במטמון באופן מקומי, כולל תמונות דקורטיביות כמו סמלי התפריט בצד ימין וסמלי ממשק המשתמש של הנגן המרכזי. תוכן דינמי, כמו נתוני המצעדים המובילים, נטען רק על פי דרישה, עם תוכן חלופי שנשמר במטמון באופן מקומי במקרה שהטעינה תיכשל. במאמר מודל מעטפת האפליקציה מוסבר איך להחיל את המודל הארכיטקטוני הזה על אפליקציית האינטרנט שלכם.
תוכן זמין במצב אופליין וניתן להפעיל מדיה
במצב אופליין, דרך חלונית ההזזה בצד שמאל, עדיין אפשר לנווט לקטע Download וליהנות מפרקי פודקאסטים שהורדתם, שמוכנים להפעלה ומוצגים עם כל המטא-נתונים כמו פריטי גרפיקה ותיאורים.
אפשר להציג מהמטמון תוכן מדיה שכבר הורדתם, למשל באמצעות המתכון של הצגת אודיו ווידאו שנשמרו במטמון מהספרייה Workbox. תכנים אחרים תמיד אפשר לאחסן במטמון או ב-IndexedDB. כדאי לקרוא את המאמר אחסון באינטרנט כדי לקבל את כל הפרטים ולדעת מתי להשתמש באיזו טכנולוגיית אחסון. אם יש לך נתונים שצריכים להיות מאוחסנים באופן קבוע בלי להסתכן במחיקה באופן סופי, כשכמות הזיכרון הזמינה תהיה נמוכה, אפשר להשתמש ב-Persistent Storage API.
הורדה יזומה ברקע
כשיתחדש החיבור לאינטרנט, אוכל כמובן לחפש תוכן באמצעות שאילתה כמו http 203, וכשאחליט להירשם לתוצאת החיפוש, הפודקאסט HTTP 203 יוריד באופן מיידי את הפרק האחרון של הסדרה, בלי לשאול שאלות.
הורדת פרק של פודקאסט היא פעולה שעשויה להימשך זמן רב יותר. Background אחזר API מאפשר לך להעניק גישה להורדות לדפדפן, שמטפל בהן ברקע. ב-Android, הדפדפן יכול אפילו להאציל את ההורדות האלה למערכת ההפעלה, כך שלא צריך שהוא יפעל באופן רציף. בסיום ההורדה, קובץ השירות (service worker) של האפליקציה יתעורר ותוכלו להחליט מה לעשות עם התגובה.
שיתוף באפליקציות אחרות ואינטראקציה איתן
אפליקציית Podcasts משתלבת באופן טבעי עם אפליקציות אחרות. לדוגמה, כשאני לוחץ לחיצה ימנית על פרק שאהבתי, אפשר לשתף אותו עם אפליקציות אחרות במכשיר, כמו אפליקציית Messages. הוא גם משתלב באופן טבעי עם לוח המערכת של המערכת. אפשר ללחוץ לחיצה ימנית על פרק כלשהו ולהעתיק אליו קישור.
Web Share API ו-Web Share Target API מאפשרים לאפליקציה לשתף ולקבל הודעות טקסט, קבצים וקישורים לאפליקציות אחרות במכשיר, וממנו. לאפליקציית אינטרנט עדיין אין אפשרות להוסיף אפשרויות תפריט לתפריט הלחיצה הימנית של מערכת ההפעלה, אבל יש הרבה דרכים אחרות ליצור קישור לאפליקציות אחרות או מאפליקציות אחרות במכשיר. בעזרת Async Clipboard API, אפשר לקרוא ולכתוב באופן פרוגרמטי נתוני טקסט ותמונה (תמונות PNG) בלוח המערכת. ב-Android, אפשר להשתמש ב-Contact Picker API כדי לבחור רשומות ממנהל אנשי הקשר במכשיר. אם אתם מציעים גם אפליקציה ספציפית לפלטפורמה וגם PWA, תוכלו להשתמש ב-GetInstalled related Apps API כדי לבדוק אם האפליקציה הספציפית לפלטפורמה מותקנת. במקרה כזה, אין צורך לעודד את המשתמש להתקין את ה-PWA או לקבל התראות באינטרנט.
מתבצע רענון של אפליקציה ברקע
בהגדרות של אפליקציית Podcasts, אפשר להגדיר שהאפליקציה תוריד פרקים חדשים באופן אוטומטי. אני לא צריכה אפילו לחשוב על זה, תוכן מעודכן תמיד יהיה שם. קסם.
ה-Periodic Background Sync API מאפשר לאפליקציה לרענן את התוכן שלה ברקע באופן קבוע בלי צורך לפעול. המשמעות היא שתוכן חדש זמין באופן יזום, כך שהמשתמשים יוכלו להתחיל להתעמק בו מיד כשהם יחליטו.
המצב מסונכרן בענן
במקביל, המינויים שלי מסונכרנים בכל המכשירים שבבעלותי. בעולם ללא הפרעות, אין לי צורך לדאוג לגבי סנכרון ידני של המינויים שלי לפודקאסטים. כמו כן, אני לא צריך לחשוש שהזיכרון של המכשיר הנייד שלי ינוצל על ידי פרקים שכבר האזנתי להם במחשב. מצב ההפעלה נשאר מסונכרן, ופרקים שהאזנתם להם נמחקים באופן אוטומטי.
סנכרון נתוני מצב אפליקציה הוא משימה שניתן להעניק לה גישה ל-Background Sync API. פעולת הסנכרון עצמה לא חייבת להתרחש באופן מיידי, רק בסוף, ואולי גם אחרי שהמשתמש סגר את האפליקציה שוב.
אמצעי בקרה למפתחות מדיה של חומרה
כשיש לי צורך באפליקציה אחרת, למשל, כשקוראים דף חדשות בדפדפן Chrome, עדיין יש לי אפשרות לשלוט באפליקציה Podcasts באמצעות מקשי המדיה במחשב הנייד. אין צורך לעבור לאפליקציה רק כדי לדלג קדימה או אחורה.
מפתחות מדיה נתמכים על ידי Media Session API. כך, משתמשים יכולים להשתמש במקשי המדיה הפיזיים במקלדות ובאוזניות הפיזיות, או אפילו לשלוט באפליקציית האינטרנט ממקשי המדיה של התוכנה בשעונים החכמים. דרך נוספת לבצע פעולות חיפוש היא לשלוח דפוס רטט כשהמשתמש מבקש לדלג על חלק משמעותי מהתוכן, למשל העברת קרדיטים של הפתיחה או גבולות של פרק.
ריבוי משימות וקיצור דרך לאפליקציה
כמובן שאני תמיד יכול לבצע כמה משימות בו-זמנית בחזרה לאפליקציית Podcasts מכל מקום. לאפליקציה יש סמל שניתן להבחין בבירור בו, שניתן גם להניח על שולחן העבודה או באפליקציות הנפוצות כדי שפודקאסטים יוכלו לפעול מיד כשבא לי.
אפשר להתקין Progressive Web Apps גם במחשבים וגם בניידים במסך הבית, בתפריט ההתחלה או באביזר העגינה של האפליקציות. ההתקנה יכולה להתרחש על סמך הנחיה יזומה, או בשליטה מלאה של מפתח האפליקציה. המאמר מה נדרש כדי להיות מותקן? כולל את כל מה שצריך לדעת. כשעובדים עם כמה משימות במקביל, אפליקציות PWA נראות בנפרד מהדפדפן.
פעולות מהירות בתפריט ההקשר
הפעולות הנפוצות ביותר באפליקציה, חיפוש תוכן חדש וחיפוש פרקים חדשים, זמינות ישירות מתפריט ההקשר של האפליקציה ב-Dock. דרך התפריט אפשרויות, אני גם יכול להחליט לפתוח את האפליקציה בזמן ההתחברות.
כשמציינים קיצורי דרך לסמל האפליקציה בקובץ המניפסט של אפליקציית האינטרנט של PWA, אפשר לרשום מסלולים מהירים למשימות נפוצות שהמשתמשים יכולים להגיע אליהן ישירות מסמל האפליקציה. במערכות הפעלה כמו macOS, המשתמשים יכולים גם ללחוץ לחיצה ימנית על סמל האפליקציה ולהגדיר שהאפליקציה תופעל בזמן ההתחברות. אנחנו עובדים במרץ על הצעה להפעלה בהתחברות.
לשמש כאפליקציית ברירת המחדל
אפשר לשלב אפליקציות אחרות ל-iOS וגם אתרים או אימיילים באמצעות שימוש בסכמת כתובת ה-URL של podcasts://, כדי להשתלב עם האפליקציה Podcasts. אם לוחצים על קישור כמו podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 בדפדפן, מגיעים ישירות לאפליקציית Podcasts ומחליטים אם להירשם לפודקאסט או להאזין לו.
עדיין אי אפשר לטפל בסכימות של כתובות URL בהתאמה אישית מלאה, אבל מתנהלת כרגע עבודה משותפת על הצעה לטיפול בפרוטוקולי כתובות URL של אפליקציות PWA. בשלב הזה, registerProtocolHandler() עם קידומת סכימה web+ הוא החלופה הטובה ביותר.
שילוב מערכת קבצים מקומית
יכול להיות שלא תחשבו על זה מיד, אבל אפליקציית Podcasts משתלבת באופן טבעי עם מערכת הקבצים המקומית. כשאני מוריד פרק של פודקאסט, במחשב הנייד הוא מאוחסן ב-~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache. בשונה, נניח ~/Documents, ספרייה זו כמובן לא מיועדת למשתמשים רגילים, אבל היא נמצאת שם.
בקטע תוכן אופליין יש התייחסות למנגנוני אחסון אחרים, מלבד קבצים.
File System Access API מאפשר למפתחים לקבל גישה למערכת הקבצים המקומית של המכשיר. אפשר להשתמש בו באופן ישיר או דרך ספריית התמיכה browser-fs-access שמספקת חלופה באופן שקוף לדפדפנים שלא תומכים ב-API. מטעמי אבטחה, לספריות המערכת אין גישה לאינטרנט.
מראה ותחושה של הפלטפורמה
באפליקציה ל-iOS כמו Podcasts, יש דבר עדין יותר בבירור: לא ניתן לבחור באף אחת מתוויות הטקסט, וכל הטקסט משתלב עם גופן המערכת של המחשב. הבחירה שלי גם בעיצוב צבעי המערכת (מצב כהה) נלקחת בחשבון.
אפשר להשתמש במאפיין ה-CSS user-select
עם הערך none,
כדי להגן על רכיבים בממשק המשתמש מפני בחירה בטעות.
עם זאת, חשוב להקפיד לא לנצל לרעה את הנכס הזה כדי לבטל את הבחירה בתוכן האפליקציה.
צריך להשתמש בו רק עבור אלמנטים של ממשק משתמש, כמו טקסטים של לחצנים וכו'.
הערך system-ui
של מאפיין ה-CSS font-family מאפשר
לציין את גופן ברירת המחדל של ממשק המשתמש של המערכת שבו ייעשה שימוש באפליקציה.
לבסוף, האפליקציה יכולה לציית להעדפת ערכת הצבעים של המשתמש על ידי ציות לבחירה שלו (prefers-color-scheme), עם מתג מצב כהה
כדי לבטל אותה.
עוד אפשרות שכדאי להחליט היא מה הדפדפן צריך לעשות כשהוא מגיע לגבולות של אזור הגלילה. לדוגמה, כדי להטמיע משיכה לרענון בהתאמה אישית.
הדבר אפשרי באמצעות נכס ה-CSS overscroll-behavior.
סרגל כותרת מותאם אישית
כשמביטים בחלון האפליקציה 'פודקאסטים', רואים שאין בו סרגל כותרת משולב קלאסי וסרגל כלים, כמו למשל חלון הדפדפן Safari, אלא חוויה מותאמת אישית שנראית כמו סרגל צד שמעוגן לחלון הנגן הראשי.
ההתאמה האישית של סרגל הכותרת לא אפשרית כרגע, אבל אנחנו עובדים עליה כרגע.
עם זאת, אפשר (ומומלץ) לציין את ה-display ואת
theme-color המאפיינים של המניפסט של אפליקציית האינטרנט, כדי לקבוע את העיצוב והסגנון של חלון האפליקציה ולהחליט אילו פקדי דפדפן שמוגדרים כברירת מחדל – ובמידת הצורך אף אחד מהם לא יוצגו.
אנימציות קצרות
האנימציות בתוך האפליקציה פועלות במהירות ובצורה חלקה בפודקאסטים. לדוגמה, כשפותחים את חלונית ההזזה הערות לגבי פרקים משמאל, היא מחליקה פנימה באלגנטיות. כשאני מסיר פרק אחד מההורדות שלי, הפרקים הנותרים צפים למעלה וצורכים את שטח המסך שהתפנה בגלל הפרק שנמחק.
אנימציות של ביצועים טובים באינטרנט בהחלט אפשריות אם לוקחות בחשבון מספר שיטות מומלצות המתוארות במאמר אנימציות וביצועים. אפשר לשפר באופן משמעותי אנימציות של גלילה כפי שניתן לראות בתוכן עם עימוד או בקרוסלות מדיה באמצעות התכונה CSS Scroll Snap. כדי ליהנות משליטה מלאה, אפשר להשתמש ב-Web Animations API.
תוכן עלה מחוץ לאפליקציה
אפליקציית Podcasts ב-iOS עשויה להציג תוכן במיקומים אחרים מלבד האפליקציה עצמה, למשל, בתצוגת הווידג'טים של המערכת או בצורת הצעה של Siri. כשמשתמשים בקריאות לפעולה יזומות שמבוססות על שימוש, צריך רק להקיש עליהן כדי להגדיל משמעותית את שיעור ההתעניינות החוזרת באפליקציה כמו פודקאסטים.
ה-Content Index API מאפשר לאפליקציה להגיד לדפדפן איזה תוכן של ה-PWA זמין במצב אופליין. כך הדפדפן יכול להציג את התוכן הזה מחוץ לאפליקציה הראשית. סימון תוכן מעניין באפליקציה כמתאים להפעלת אודיו ניתנת להקראה ושימוש בתגי עיצוב מובנים באופן כללי יעזרו למנועי חיפוש ולעוזרים וירטואליים כמו Google Assistant להציג את ההצעות שלך באור אידיאלי.
ווידג'ט לבקרת מדיה במסך הנעילה
כשמוצג פרק של פודקאסט, אפליקציית Podcasts מציגה במסך הנעילה ווידג'ט פקדים יפהפה שכולל מטא-נתונים כמו הגרפיקה של הפרק, שם הפרק ושם הפודקאסט.
MediaSession API מאפשר לך לציין מטא-נתונים כמו גרפיקה, כותרות של טראקים וכו', שיוצגו במסך הנעילה, בשעונים חכמים או בווידג'טים אחרים של מדיה בדפדפן.
התראות
ההתראות הפכו להיות מעצבנות באינטרנט (למרות שהבקשות להצגת התראות הרבה יותר שקטות עכשיו). אבל אם משתמשים בהן בצורה נכונה, הן יכולות להניב ערך רב. לדוגמה, אפליקציית הפודקאסטים ל-iOS יכולה לשלוח לי התראות על פרקים חדשים של פודקאסטים שנרשמתי אליהם או להמליץ על פודקאסטים חדשים, וגם לקבל התראות על תכונות חדשות באפליקציה.
Push API מאפשר לאפליקציה לקבל התראות, וכך להודיע למשתמשים על אירועים חשובים שקשורים ל-PWA. אפשר להשתמש ב-Notification Triggers API כדי לקבל התראות שאמורות לפעול במועד ידוע בעתיד ושלא נדרש להן חיבור לרשת.
תג של סמל האפליקציה
בכל פעם שיש פרקים חדשים זמינים לאחד מהפודקאסטים שנרשמתי אליהם, מופיע תג של סמל האפליקציה בסמל של מסך הבית של פודקאסטים, ומעודד אותי לחזור להשתמש באפליקציה באופן לא פולשני.
אפשר להגדיר תגי סמל של אפליקציה באמצעות Badging API. אפשרות זו שימושית במיוחד אם ב-PWA יש מושג של פריטים 'לא נקראו', או שצריך אמצעי למשוך את תשומת הלב של המשתמשים בחזרה לאפליקציה בלי להפריע לכך.
הפעלת המדיה מקבלת עדיפות על פני הגדרות של מצב חיסכון באנרגיה
כשמדיה של הפודקאסט פועלת, יכול להיות שהמסך יכבה אבל המערכת לא תעבור למצב המתנה. אפליקציות יכולות גם למנוע מצב שינה, למשל כדי להציג מילות שירים או כתוביות.
Screen Wake Lock API מאפשר למנוע את כיבוי המסך. הפעלת מדיה באינטרנט מונעת באופן אוטומטי מהמערכת לעבור למצב המתנה.
גילוי אפליקציה דרך חנות אפליקציות
אפליקציית Podcasts היא חלק מהממשק של macOS למחשב, אבל ב-iOS צריך להתקין אותה מ-App Store.
חיפוש מהיר של podcast, podcasts או apple podcasts יעלה מיד את האפליקציה ב-App Store.
אפליקציית Apple לא מתירה לפרסם אפליקציות PWA ב-App Store, אבל ב-Android תוכלו לשלוח את ה-PWA
ארוזה בפעילות מהימנה באינטרנט.
הסקריפט bubblewrap הופך את הפעולה הזו לפעולה פשוטה.
הסקריפט הזה גם מפעיל באופן פנימי את תכונת הייצוא של אפליקציות ל-Android ב-PWABuilder,
שאפשר להשתמש בה בלי לגעת בשורת הפקודה.
סיכום התכונות
בטבלה הבאה מוצגת סקירה כללית קומפקטית של כל התכונות ורשימה של משאבים שימושיים למימוש באינטרנט.
סיכום
אפליקציות PWA התקדמו מאוד מאז שהושקו ב-2015. בהקשר של Project Fugu 🐡, הצוות של Chromium פועל במרץ כדי לסגור את הפערים האחרונים שנותרו. אם תפעלו רק לפי חלק מהעצות במאמר זה, תוכלו להתקרב לתחושה הדומה לזו של האפליקציה ולגרום למשתמשים לשכוח שהם מתעסקים עם "רק אתר", כי האמת שלרובם לא משנה איך האפליקציה בנויה (ולמה כדאי להם?), כל עוד היא נשמעת כמו אפליקציה אמיתית.
אישורים
המאמר הזה נבדק על ידי קייס באסקי, ג'ו מדלי, ג'ושואה בל, דיון אלמר, אדה אושיניי, פטה לפיג', סאם ת'ורוגוד, ריילי וג'פרי