לאחרונה יש הרבה דיונים על Progressive Web Apps. הם עדיין מודל חדש יחסית, אבל העקרונות שלהם יכולים לשפר גם אפליקציות שנבנו באמצעות Vanilla JS, React, Polymer, Angular או כל מסגרת אחרת. בפוסט הזה אסכם כמה אפשרויות ואפליקציות לדוגמה שיעזרו לכם להתחיל לעבוד עם Progressive Web App משלכם כבר היום.
מה זה Progressive Web App?
חשוב לזכור ש-Progressive Web Apps פועלות בכל מקום, אבל הן פועלות בצורה הטובה ביותר בדפדפנים מודרניים. שיפור הדרגתי (progressive enhancement) הוא עמוד השדרה של המודל.
אהרון גוסטפסון השווה את השיפור ההדרגתי ל-M&M עם בוטנים. הבוטן הוא התוכן, ציפוי השוקולד הוא שכבת ההצגה ו-JavaScript הוא ציפוי הסוכר הקשה. הצבע של השכבה הזו יכול להשתנות, והחוויה יכולה להשתנות בהתאם ליכולות של הדפדפן שבו משתמשים.
אפשר לחשוב על הציפוי של הסוכרייה כמקום שבו יכולות לפעול הרבה תכונות של Progressive Web App. הן משלבות את היתרונות של האינטרנט עם היתרונות של האפליקציות. הן שימושיות למשתמשים כבר מהביקור הראשון בכרטיסייה בדפדפן, בלי צורך בהתקנה.
ככל שהמשתמשים משתמשים באפליקציות האלה יותר, כך הם נהנים יותר מהיתרונות שלהן – הן נטענות מהר מאוד בחיבורים איטיים לרשת (הודות ל-קובץ שירות (service worker)), שולחות התראות רלוונטיות וכוללות סמל במסך הבית של המשתמש, שמאפשר לטעון אותן כחוויות שימוש באפליקציה במסך מלא. הם יכולים גם להשתמש במודעות באנר חכמות להתקנת אפליקציות אינטרנט.
אפליקציות Progressive Web App הן
- פרוגרסיביות – פועלות אצל כל משתמש, בלי קשר לדפדפן שבו הוא משתמש, כי הן מבוססות על שיפור הדרגתי (progressive enhancement) כעיקרון ליבה.
- רספונסיביות – התאמה לכל גורם צורה, מחשב, נייד, טאבלט או כל מכשיר אחר.
- קישוריות עצמאית – משופר באמצעות קובצי שירות (service worker) כדי לפעול במצב אופליין או ברשתות באיכות נמוכה.
- כמו אפליקציה – שימוש במודל מעטפת האפליקציה כדי לספק ניווט ואינטראקציות בסגנון של אפליקציה.
- עדכניות – תמיד מעודכנת בזכות תהליך העדכון של ה-service worker.
- בטוח – מוצג באמצעות TLS כדי למנוע ריגול ולוודא שהתוכן לא שונה.
- ניתנות לגילוי – אפשר לזהות אותן כ"אפליקציות" בזכות מניפסטים של W3C והיקף הרישום של Service Worker, שמאפשרים למנועי חיפוש למצוא אותן.
- אפשרות לעורר עניין מחדש – קל לעורר עניין מחדש באמצעות תכונות כמו התראות.
- ניתן להתקנה – המשתמשים יכולים "לשמור" במסך הבית את האפליקציות שהכי שימושיות להם, בלי הטרחה של חנות אפליקציות.
- ניתן לקישור – אפשר לשתף בקלות באמצעות כתובת URL, בלי צורך בהתקנה מורכבת.
אפליקציות Progressive Web App גם לא ייחודיות ל-Chrome ל-Android. למטה אפשר לראות את אפליקציית האינטרנט המתקדמת Pokedex פועלת ב-Firefox ל-Android (בטא) עם תכונות מוקדמות של הוספה למסך הבית ושמירה במטמון של קובץ השירות (service worker) שפועלות בצורה תקינה.
אחד ההיבטים הנחמדים של האופי ה "פרוגרסיבי" של המודל הזה הוא שאפשר להוסיף תכונות בהדרגה, ככל שספקי הדפדפנים משפרים את התמיכה בהן. אפליקציות Progressive Web App כמו Pokedex פועלות כמובן מצוין גם ב-Opera ב-Android, עם כמה הבדלים בולטים בהטמעה:
כדי לקבל מידע מעמיק יותר על Progressive Web App, קראו את הפוסט בבלוג המקורי של אלכס ראסל, שבו הוא מציג אותן. פול קינלן גם התחיל תג Stack Overflow שימושי מאוד עבור Progressive Web App, שכדאי לבדוק.
עקרונות
קובץ מניפסט של אפליקציית אינטרנט
המניפסט מאפשר לאפליקציית האינטרנט להופיע במסך הבית של המשתמש בצורה דומה יותר לאפליקציה מקורית. הוא מאפשר להפעיל את האפליקציה במצב מסך מלא (בלי סרגל כתובות), מספק שליטה על כיוון המסך, ובגרסאות האחרונות של Chrome ב-Android הוא תומך בהגדרה של מסך פתיחה וצבע עיצוב לסרגל הכתובות. הוא משמש גם להגדרת קבוצה של סמלים לפי גודל וצפיפות, שמשמשים למסך הפתיחה ולסמל של מסך הבית שצוינו למעלה.
אפשר למצוא קובץ מניפסט לדוגמה ב-Web Starter Kit ובדוגמאות של Google Chrome. ברוס לוסון כתב מחולל מניפסט ומוניר לאמורי כתב גם כלי שימושי לאימות מניפסט אינטרנט שכדאי לבדוק.
בפרויקטים האישיים שלי, אני מסתמך על realfavicongenerator כדי ליצור את הסמלים בגודל הנכון גם לקובץ מניפסט של אפליקציית אינטרנט וגם לשימוש ב-iOS, במחשב וכו'. אפשר להשתמש גם במודול Node של סמלי אתרים כדי להשיג פלט דומה כחלק מתהליך ה-build.
דפדפנים שמבוססים על Chromium (כמו Chrome, Opera וכו') תומכים כיום בקובצי מניפסט של אפליקציות אינטרנט. ב-Firefox מפתחים באופן פעיל תמיכה בקבצים האלה, וב-Edge הם מופיעים כבבדיקה. ב-WebKit/Safari עדיין לא פרסמו אותות ציבוריים לגבי הכוונה שלהם להטמיע את התכונה.
לפרטים נוספים, קראו את המאמר Installable Web Apps with the Web App Manifest in Chrome for Android (אפליקציות אינטרנט שניתן להתקין עם קובץ מניפסט של אפליקציה ב-Chrome ל-Android) ב-Web Fundamentals (היסודות של בניית אתרים).
באנר "הוספה למסך הבית"
כבר זמן מה ש-Chrome ב-Android תומך בהוספת האתר שלכם למסך הבית, אבל הגרסאות האחרונות תומכות גם בהצעות שימושיות להוספת אתרים באמצעות מודעות באנר מקוריות להתקנת אפליקציות אינטרנט.
כדי שההודעות להתקנת האפליקציה יוצגו, האפליקציה צריכה:
- מניפסט תקין של אפליקציית אינטרנט
- להיות מוצג באמצעות HTTPS (אפשר לקבל אישור בחינם ב-letsencrypt)
- יש Service Worker תקין שרשום באתר
- לקבל שני ביקורים, עם לפחות 5 דקות בין הביקורים
יש כמה דוגמאות לבאנרים להתקנת אפליקציות, החל מבאנרים בסיסיים ועד לתרחישים מורכבים יותר כמו הצגת אפליקציות קשורות.
קובץ שירות (service worker) לשמירה במטמון אופליין
קובץ שירות (service worker) הוא סקריפט שפועל ברקע, בנפרד מדף האינטרנט. הוא מגיב לאירועים, כולל בקשות לאחזור מהרשת שנשלחות מדפים שהוא מציג. ל-Service Worker יש משך חיים קצר בכוונה.
הוא מתעורר כשהוא מקבל אירוע ופועל רק כל עוד הוא צריך לעבד אותו. Service worker מאפשר להשתמש ב-Cache API כדי לשמור משאבים במטמון, ואפשר להשתמש בו כדי לספק למשתמשים חוויית שימוש אופליין.
קובצי Service Worker הם כלי יעיל לשמירה במטמון במצב אופליין, אבל הם גם משפרים את הביצועים באופן משמעותי ומאפשרים טעינה מיידית בביקורים חוזרים באתר או באפליקציית האינטרנט. אתם יכולים לשמור במטמון את מעטפת האפליקציה (app shell) כדי שהיא תפעל במצב אופליין, ולאכלס את התוכן שלה באמצעות JavaScript.
ב-Google Chrome samples יש מגוון רחב של דוגמאות ל-service worker. ספר המתכונים של ג'ייק ארצ'יבלד לעבודה אופליין הוא קריאת חובה, ואני ממליץ בחום לנסות את המדריך של פול קינלן אפליקציית האינטרנט הראשונה שלכם אופליין אם אתם חדשים ב-Service Worker.
הצוות שלנו גם מתחזק מספר כלי עזר וכלי פיתוח של קובצי שירות (service worker) שאנחנו מוצאים שימושיים להפחתת התקורה בהגדרת קובץ שירות. הם מפורטים בקטע ספריות של קובצי שירות (service worker). שני הסוגים העיקריים הם:
- sw-precache: כלי לזמן פיתוח שיוצר סקריפט של Service Worker, ששימושי לשמירה מראש במטמון של מעטפת אפליקציית האינטרנט
- sw-toolbox: ספרייה המספקת אחסון במטמון בזמן ריצה עבור משאבים שאינם בשימוש תכוף
ג'ף פוסניק כתב מדריך קצר על sw-precache שנקרא Offline-first, fast, with the sw-precache module וcodelab על אותו כלי, שיכול להיות שימושי עבורכם.
הדפדפנים Chrome, Opera ו-Firefox הטמיעו תמיכה ב-Service Worker, וב-Edge יש סימנים חיוביים לגבי התעניינות בתכונה. ב-Safari הוזכר בקצרה עניין ב-WebGPU בתוכנית החומש שהציע אחד המהנדסים.
התראות לעידוד אינטראקציה חוזרת
למעשה, אתם יכולים ליצור אפליקציות אינטרנט שהמשתמשים יכולים להשתמש בהן מחוץ לכרטיסייה. המשתמשים יכולים לסגור את הדפדפן, והם לא צריכים להשתמש באופן פעיל באפליקציית האינטרנט כדי ליהנות מהחוויה. התכונה הזו דורשת גם קובץ שירות (Service Worker) וגם קובץ מניפסט של אפליקציית אינטרנט, והיא מבוססת על חלק מהתכונות שסוכמו קודם.
ממשק ה-API של Push מיושם ב-Chrome, נמצא בפיתוח ב-Firefox ונשקל ב-Edge. עדיין אין אותות ציבוריים מ-Safari לגבי הכוונה להטמיע את התכונה הזו.
התראות באינטרנט הפתוח הוא מבוא מקיף להגדרת התראות מאת מאט גאונט, וCodelab של התראות זמין גם ב-Web Fundamentals (היסודות של בניית אתרים).
מייקל ואן אוורקרק מצוות Chrome הכין גם סרטון מבוא של 6 דקות על Push, אם אתם מעדיפים לצפות בסרטונים.
הוספת תכונות מתקדמות
חשוב לזכור שחוויית המשתמש יכולה להיות שונה בהתאם לדפדפן שבו משתמשים כדי לצפות באפליקציית האינטרנט. אתם אלה ששולטים בציפוי הסוכר.
תכונות נוספות שמגיעות לפלטפורמת האינטרנט, כמו סנכרון ברקע (לסנכרון נתונים עם שרת גם כשאפליקציית האינטרנט סגורה) ו-Web Bluetooth (לתקשורת עם מכשירי Bluetooth מאפליקציית האינטרנט), יכולות גם הן להתווסף לאפליקציית ה-Progressive Web App שלכם באופן הזה.
סנכרון חד-פעמי ברקע הופעל ב-Chrome, וג'ייק ארצ'יבלד יצר סרטון על אפליקציית ויקיפדיה אופליין שלו ומאמר שמדגים את הפעולה שלה. ל-François Beaufort יש גם כמה דוגמאות ל-Web Bluetooth, אם אתם רוצים לנסות את ה-API הזה.
תמיכה ב-frameworks
אין שום דבר שמונע מכם ליישם את העקרונות שלמעלה באפליקציה קיימת או במסגרת שאתם בונים איתה. עוד כמה עקרונות שכדאי לזכור כשיוצרים Progressive Web App הם מודל הביצועים RAIL שמתמקד במשתמשים ואנימציות שמבוססות על FLIP.
אני מקווה שבמהלך 2016 נראה מספר הולך וגדל של פרויקטים של קוד סטנדרטי ופרויקטים ראשוניים שמשלבים באופן אורגני תמיכה ב-Progressive Web Apps כתכונה עיקרית. עד אז, לא קשה להוסיף את התכונות האלה לאפליקציות שלכם, ולדעתי זה שווה את המאמץ.
ארכיטקטורה
יש רמות שונות של "התחייבות" למודל של Progressive Web App, אבל גישה נפוצה אחת היא לבנות אותן סביב מעטפת האפליקציה (app shell). זו לא דרישה מחייבת, אבל יש לה כמה יתרונות.
ארכיטקטורת מעטפת האפליקציה (app shell) מעודדת שמירה במטמון של מעטפת האפליקציה (ממשק המשתמש) כדי שהיא תפעל במצב אופליין, ואכלוס התוכן שלה באמצעות JavaScript. בביקורים חוזרים, זה מאפשר לכם להציג פיקסלים משמעותיים על המסך במהירות רבה בלי הרשת, גם אם התוכן שלכם מגיע בסופו של דבר משם. השינוי הזה משפר את הביצועים באופן משמעותי.
ג'רמי קית' העיר לאחרונה שבמודל מהסוג הזה, אולי לא צריך להתייחס לעיבוד בצד השרת כאל חלופה, אלא לעיבוד בצד הלקוח כאל שיפור. זה משוב הוגן.
במודל מעטפת האפליקציה (app shell), צריך להשתמש כמה שיותר בעיבוד בצד השרת, ובעיבוד הדרגתי בצד הלקוח כשיפור, באותו אופן שבו אנחנו "משפרים" את החוויה כשיש תמיכה בקובץ שירות (service worker). יש הרבה דרכים לעשות את זה.
אני ממליץ לקרוא את המאמר שלנו על הארכיטקטורה ולבדוק איך אפשר ליישם עקרונות דומים באפליקציה ובמחסנית שלכם.
תבניות לתחילת העבודה
מעטפת האפליקציה (app shell)
המאגר app-shell מכיל הטמעה כמעט מלאה של ארכיטקטורת מעטפת האפליקציה (app shell). יש לו קצה אחורי שכתוב ב-Express.js וקצה קדמי שכתוב ב-ES2015.
הוא כולל גם את החלקים של המודל בצד הלקוח וגם את החלקים בצד השרת, ויש בו הרבה דברים, אז ייקח קצת זמן להכיר את בסיס הקוד. אחרת, זו נקודת ההתחלה הכי מקיפה שלנו ל-Progressive Web App כרגע. השלב הבא בפרויקט הזה יהיה Docs.
ערכת התחלה של Polymer
נקודת ההתחלה הרשמית לאפליקציות אינטרנט של Polymer תומכת בתכונות הבאות של Progressive Web App:
- מניפסט של אפליקציית אינטרנט
- מסך פתיחה של Chrome ל-Android
- שמירה במטמון אופליין של Service Worker עם רכיבי Platinum SW
- התראות (נדרשת הגדרה ידנית) עם רכיבי Platinum Push
בגרסה הנוכחית של PSK חסרה תמיכה בחלק מתבניות הביצועים המתקדמות יותר (למשל, מודל מעטפת האפליקציה (app shell), טעינה אסינכרונית) שקיימות בחלק מאפליקציות האינטרנט של Progressive Polymer.
אנחנו שואפים לנסות להטמיע את התבניות האלה ב-PSK ב-2016, אבל אפשר למצוא ניסויים מוקדמים בנושא באפליקציית Zuperkulblog של Polymer מאת רוב דודסון ובשיחה המצוינת Polymer Perf Patterns של אריק בידלמן.
Web Starter Kit
נקודת ההתחלה שלנו לפרויקטים חדשים של Vanilla כוללת את התכונות הבאות של Progressive Web App:
- מניפסט של אפליקציית אינטרנט
- מסך פתיחה של Chrome ל-Android
- טעינה מראש מהמטמון של Service Worker בזכות sw-precache
אם אתם מעדיפים לעבוד עם vanilla JS/ES2015 ולא יכולים להשתמש ב-Polymer, יכול להיות ש-Web Starter Kit תהיה שימושית כנקודת התייחסות שתוכלו לעשות בה שימוש חוזר או להעתיק ממנה קטעי קוד.
אפליקציות Progressive Web App עם ובלי מסגרות
חברי הקהילה כבר בנו כמה Progressive Web Apps בקוד פתוח, עם ובלי ספריות וסביבות עבודה של JS. אם אתם מחפשים השראה, יכול להיות שהמאגרים הבאים יהיו שימושיים כחומר עזר. הן גם פשוט אפליקציות ממש טובות.
Vanilla JavaScript
- האפליקציה Voice Memos של פול לואיס נבנתה באמצעות ארכיטקטורה דומה ל-
app-shell(תיאור) - Offline Wikipedia (ויקיפדיה אופליין) מאת ג'ייק ארצ'יבלד (סרטון)
- Air Horner של פול קינלן
- Guitar Tuner של פול לואיס (תיאור)
Polymer
- Zuperkulblog מאת רוב דודסון (שקפים)
React
Virtual-DOM
- Pokedex של נולן לוסון – Progressive Web App מצוינת שמשתמשת בגישה של "לעשות הכול ב-Web Worker" כדי לעזור ברינדור מתקדם. (write-up)
Angular.js
- Timey.in של קנת' אוכנברג – גם הוא משתמש ב-
sw-precacheלשמירה מראש של משאבים במטמון
הערות סגירה
כמו שציינו, Progressive Web Apps עדיין נמצאות בשלבי פיתוח ראשוניים, אבל זה זמן מצוין להתנסות בשיטות שעומדות מאחוריהן ולראות איך אפשר ליישם אותן באפליקציות האינטרנט שלכם.
פול קינלן מתכנן כרגע את ההנחיות של Web Fundamentals בנושא Progressive Web Apps. אם יש לכם הצעות לתחומים שתרצו שייכללו בהנחיות, אתם מוזמנים להגיב בשרשור.
קריאה נוספת
- אפליקציות Progressive Web App: איך לצאת מהכרטיסיות בלי לאבד את הנשמה
- Why Progressive Web Apps Are The Future Of Web Development
- אפליקציות Progressive Web App: מוכנות לשימוש
- יצירת אפליקציית אינטרנט מתקדמת (PWA) באמצעות ServiceWorker
- אפליקציות Progressive Web App הן העתיד
- Progressive Web App: דרך חדשה לחוות את הנייד
- היכרות עם Pokedex.org: אפליקציית אינטרנט מתקדמת למעריצי פוקימון
- סיכום של כנס המפתחים של Chrome: אפליקציות אינטרנט מתקדמות (PWA)