לאחרונה בוצע דיון רב בנושא Progressive Web Apps. הם עדיין מודל חדש יחסית, אבל העקרונות שלהם יכולים לשפר באותה מידה אפליקציות שפותחו באמצעות וניל JS, תגובה, פולימר, Angular או כל מסגרת אחרת. בפוסט הזה אסכם כמה אפשרויות ואסביר אפליקציות שיעזרו לכם להתחיל לעבוד עם Progressive Web App היום.
מהי Progressive Web App?
חשוב לזכור ש-Progressive Web Apps פועלות בכל מקום, אבל בדפדפנים מודרניים יש ביצועים מעולים. שיפור הדרגתי הוא עמוד התווך של המודל.
אהרון גוסטפסון שיחק את שיפור הדרגתי ל-M&M בוטן. הבוטן הוא התוכן שלכם, ציפוי השוקולד הוא שכבת המצגת, וה-JavaScript הוא המעטפת הקשיחה. צבעי השכבה הזו עשויים להשתנות, והחוויה עשויה להשתנות בהתאם ליכולות של הדפדפן שמשתמש בה.
המעטפת של מעטפת הממתק היא המקום שבו יש מגוון תכונות של Progressive Web App. אלה חוויות שמשלבות את התכונות הכי טובות באינטרנט ובאפליקציות הכי טובות. הם שימושיים למשתמשים כבר מהביקור הראשון בכרטיסיית הדפדפן, אין צורך בהתקנה.
כשהמשתמשים יוצרים קשר עם האפליקציות האלה באמצעות שימוש חוזר, הם הופכים את מעטפת הממתק למתוקה עוד יותר – הטעינה מהירה מאוד בחיבורי רשת איטיים (תודה ל-service worker), שליחת התראות רלוונטיות וסמל מהמחלקה הראשונה במסך הבית של המשתמש שיכול לטעון אותן כחוויות אפליקציה במסך מלא. הן גם יכולות לנצל את היתרונות של באנרים חכמים להתקנת אפליקציות אינטרנט.
אפליקציות מסוג Progressive Web App הן
- Progressive – עבודה לכל משתמש, ללא קשר לבחירת הדפדפן, כי היא תוכננה עם שיפור הדרגתי כדייר ליבה.
- רספונסיבי – מתאימים לכל גורם צורה, למחשבים, לניידים, לטאבלטים או למכשירים הבאים.
- קישוריות בלתי תלויה – עם כלי שירות (service worker) שיכולים לעבוד אופליין או ברשתות באיכות נמוכה.
- דומה לאפליקציה – שימוש במודל מעטפת האפליקציה כדי לספק ניווטים ואינטראקציות בסגנון האפליקציה.
- Fresh – תמיד עדכני בזכות תהליך העדכון של Service Worker.
- בטוח – השירות מוצג דרך TLS כדי למנוע מעקב לא רצוי ולהבטיח שלא מישהו ביצע שינויים בתוכן.
- Discoverable – ניתן לזהות אותם כ'אפליקציות' בזכות מניפסטים של W3C והיקף הרישום של קובץ השירות, שמאפשרים למנועי חיפוש למצוא אותם.
- עידוד לאינטראקציה חוזרת – תכונות כמו התראות שנשלחות מהאפליקציה מיועדות לעידוד לאינטראקציה חוזרת בקלות.
- ניתנות להתקנה – המשתמשים יכולים "לשמור" את האפליקציות השימושיות ביותר במסך הבית שלהם, בלי להסתבך עם חנות אפליקציות.
- Linkable – שיתוף קל באמצעות כתובת URL, ללא צורך בהתקנה מורכבת.
בנוסף, אפליקציות מסוג Progressive Web App לא ייחודיות ל-Chrome ל-Android. בהמשך אפשר לראות ש-Pokedex Progressive Web App פועל ב-Firefox ל-Android (בטא) עם תכונות של הוספה מוקדמת למסך הבית ותכונות של Service Worker לשמירה במטמון פועלות כמו שצריך.
אחד מההיבטים הנחמדים של האופי ה "מתמשך" במודל הזה הוא שאפשרות הדרגתיות של תכונות זמינות, ככל שספקי הדפדפנים מספקים תמיכה טובה יותר עבורם. כמובן, Progressive Web Apps כמו Pokedex עובדות מצוין גם ב-Opera ל-Android, עם כמה הבדלים מודגשים בהטמעה:
כדי להתעמק באפליקציות Progressive Web Apps, כדאי לקרוא אותן בפוסט בבלוג המקורי של אלכס ראסל. פול קינלן גם פתח תג Stack Overflow שימושי מאוד עבור Progressive Web Apps, שכדאי לבדוק.
עקרונות
מניפסט של אפליקציית אינטרנט
המניפסט מאפשר לאפליקציית האינטרנט שלך להציג נוכחות יותר טבעית במסך הבית של המשתמש. היא מאפשרת להפעיל את האפליקציה במצב מסך מלא (בלי להציג סרגל כתובות URL), מספקת שליטה על כיוון המסך, ובגרסאות אחרונות של Chrome ב-Android תומכת בהגדרת מסך פתיחה וצבע עיצוב לסרגל הכתובות. הוא משמש גם להגדרת קבוצה של סמלים לפי גודל ודחיסות שמשמשים עבור מסך הפתיחה וסמל מסך הבית שהוזכרו למעלה.
ניתן למצוא קובץ מניפסט לדוגמה בערכה למתחילים באינטרנט ואילך בדוגמאות של Google Chrome. ברוס לוסון כתב מחולל מניפסטים ומוניר לאמורי כתב גם מאמת מניפסט אינטרנטי שימושי שכדאי לבדוק.
בפרויקטים האישיים שלי, אני מסתמך על realfavicongenerator כדי ליצור סמלים בגודל תקין גם לקובץ המניפסט של אפליקציית האינטרנט וגם לשימוש ב-iOS, במחשב וכן הלאה. גם סמל האתר של ה-Node יכול להגיע לפלט דומה במסגרת תהליך ה-build שלכם.
בדפדפנים מבוססי Chromium (Chrome, Opera וכו') יש תמיכה במניפסטים של אפליקציות אינטרנט, ש-Firefox מפתחת באופן פעיל תמיכה בהן ו-Edge כלול בבדיקה. WebKit/Safari עדיין לא פרסמו אותות ציבוריים לגבי הכוונות שלהם להטמיע את התכונה עדיין.
לפרטים נוספים, אפשר לקרוא את המאמר אפליקציות אינטרנט הניתנות להתקנה עם המניפסט של אפליקציות אינטרנט ב-Chrome ל-Android בדף 'יסודות של בניית אתרים'.
הבאנר 'הוספה למסך הבית'
Chrome ב-Android תומך כרגע בהוספת אתרים למסך הבית, אבל הגרסאות האחרונות תומכות גם בהצעה יזומה להוספת אתרים באמצעות מודעות באנר מותאמות להתקנת אפליקציות אינטרנט.
כדי שההודעות להתקנת האפליקציה יוצגו באפליקציה, חייבים:
- הקובץ צריך להיות מניפסט תקין של אפליקציית אינטרנט
- להיות מוצגת באמצעות HTTPS (לאישור בחינם אפשר לעיין בקטע letsencrypt)
- צריך להיות רשום לפחות קובץ שירות (service worker) תקין
- קבלת ביקור פעמיים, עם 5 דקות לפחות בין ביקורים
יש כמה דוגמאות של מודעות באנר להתקנת אפליקציות, החל ממודעות באנר בסיסיות ועד לתרחישי שימוש מורכבים יותר, כמו הצגת אפליקציות קשורות.
Service Worker לשמירה במטמון אופליין
קובץ service worker הוא סקריפט שרץ ברקע, בנפרד מדף האינטרנט. הוא מגיב לאירועים, כולל בקשות רשת שהתקבלו מדפים שהוא מציג. ל-Service Worker יש משך חיים קצר בכוונה.
המכשיר מתעורר כשהוא מקבל אירוע ופועל רק כל עוד הוא צריך לעבד אותו. קובץ שירות (service worker) מאפשר להשתמש ב-Cache API כדי לשמור משאבים במטמון וניתן להשתמש בו כדי לספק למשתמשים חוויה במצב אופליין.
קובצי Service Worker הם כלי יעיל לשמירה במטמון אופליין, אבל הם גם מציעים שיפור משמעותי בביצועים בצורה של טעינה מיידית לצורך ביקורים חוזרים באתר או באפליקציית האינטרנט שלכם. אתם יכולים לשמור את מעטפת האפליקציה במטמון כדי שהיא תפעל אופליין ולאכלס את התוכן שלה באמצעות JavaScript.
דוגמאות של קובץ שירות (service worker) זמינות בדוגמאות ל-Google Chrome. חוברת הבישול אופליין של ג'ייק ארצ'יבלד היא ספר חובה, ואני ממליץ לך לנסות את ההדרכה המפורטת הראשונה שלך לאינטרנט במצב אופליין אם היא חדשה ל-Service Worker.
הצוות שלנו מתחזק גם כמה כלי עזר ל-Service Worker ובונה כלים שימושיים לצמצום התקורה בקבלת הגדרת קובץ שירות. הם מופיעים בספריות של קובצי שירות (Service Worker). שתי הסיבות העיקריות הן:
- sw-precache: כלי זמן build שיוצר סקריפט של Service Worker שמועיל לשמירה במטמון של המעטפת של אפליקציית האינטרנט
- sw-toolbox: ספרייה שמאפשרת לשמור במטמון זמן ריצה למשאבים שנמצאים בשימוש לעיתים רחוקות
ג'ף פוזניק כתב מאמר ראשוני קצר על sw-precache בשם אופליין, במהירות, עם המודול sw-precache וגם Codelab באותו כלי שיכול להיות שימושי לך.
ב-Chrome, ב-Opera וב-Firefox כבר מיושמות תמיכה ב-Service Worker, כש-Edge עם אותות ציבוריים חיוביים לגבי העניין בתכונה. Safari הזכיר לזמן קצר את ההתעניינות בו דרך תוכנית לחמש שנים שהציע מהנדס אחד.
התראות על עידוד לאינטראקציה חוזרת
בפועל, ניתן לבנות אפליקציות אינטרנט שהמשתמשים יכולים לקיים איתן אינטראקציה מחוץ לכרטיסייה. אפשר לסגור את הדפדפן, והם אפילו לא צריכים להשתמש באופן פעיל באפליקציית האינטרנט כדי ליהנות מהחוויה שלך. כדי להשתמש בתכונה הזו נדרשים גם קובץ שירות (service worker) וגם קובץ מניפסט של אפליקציית אינטרנט, והיא מבוססת על כמה מהתכונות שפורטו למעלה.
ה-Push API מוטמע ב-Chrome, בפיתוח ב-Firefox ובבדיקה ב-Edge. עדיין אין אותות גלויים לכולם מ-Safari לגבי הכוונה שלהם להטמיע את התכונה הזו.
הכלי 'התראות בדחיפה' באינטרנט הפתוח הוא מבוא מקיף להגדרת Push על ידי מאט גונט (Matt Gaunt), וקוד Lab להתראות בדחיפה זמין גם ב'יסודות של בניית אתרים'.
מייקל ואן אווורקרק מצוות Chrome מציע גם הקדמה של 6 דקות ל-Push, אם אתה רוצה ליצור סרטונים.
יצירת שכבות בתכונות מתקדמות
חשוב לזכור, חוויית המתיק יכולה להשתנות בהתאם לדפדפן שמשמש לצפייה באפליקציית האינטרנט. השליטה על מעטפת הסוכריה נמצאת בידיים שלכם.
ניתן גם להוסיף שכבות של תכונות נוספות לפלטפורמת האינטרנט, כמו סנכרון נתונים עם שרת (לסנכרון נתונים עם שרת גם כשאפליקציית האינטרנט סגורה) וBluetooth באינטרנט (לשיחה עם מכשירי Bluetooth מאפליקציית האינטרנט) באופן הזה.
התכונה 'סנכרון ברקע מסוג One-shot' הופעל ב-Chrome וג'ייק ארצ'יבלד מציג סרטון של אפליקציית ויקיפדיה אופליין ומאמר שמדגים את הפעולה הזו. יש גם כמה דוגמאות Bluetooth באינטרנט של פרנסואה ביופורט, למי שרוצה לנסות את ה-API הזה.
ידידותי למסגרת
שום דבר לא מונע מכם ליישם אף אחד מהעקרונות שלמעלה באפליקציה או במסגרת הקיימת שאתם מפתחים. כמה עקרונות נוספים שכדאי לזכור כשמפתחים את Progressive Web App: מודל ביצועים ממוקד-משתמש RAIL ואנימציות מבוססות FLIP.
אני מקווה שבמהלך שנת 2016, נציג מספר הולך וגדל של שכבות חימום ופרויקטים של זרעים אורגנית, כדי לתמוך ב-Progressive Web Apps כתכונה ליבה. עד אז, המחסום להוספת התכונות האלה לאפליקציות שלכם לא גבוה מאוד והוא IMHO, די שווה את המאמץ.
ארכיטקטורה
יש כמה רמות שונות של "הכול כלול" במודל Progressive Web App, אבל אחת הגישה הנפוצה היא לתכנן את הארכיטקטורה סביב Application Shell. זו לא דרישה קשה, אבל יש לה כמה יתרונות.
הארכיטקטורה של Application Shell מעודדת שמירה במטמון של מעטפת האפליקציה (ממשק המשתמש) כדי שהיא תפעל אופליין ולאכלס את התוכן שלה באמצעות JavaScript. בביקורים חוזרים, הפעולה הזו מאפשרת לקבל פיקסלים משמעותיים במסך במהירות רבה ללא הרשת, גם אם התוכן שלכם מגיע בסופו של דבר משם. התוצאה הזו כוללת שיפור משמעותי בביצועים.
ג'רמי קית' הגיב לאחרונה שבמודל הזה, ייתכן שאין להתייחס לרינדור בצד השרת כחלופה, אבל יש להתייחס לעיבוד בצד הלקוח כשיפור. זהו משוב הוגן.
במודל Application Shell, יש להשתמש ככל האפשר ברינדור בצד השרת, וברינדור הדרגתי בצד הלקוח יש להשתמש כשיפור באותו אופן שבו אנחנו "משפרים" את החוויה כשיש תמיכה ב-Service Worker. יש הרבה דרכים להגיע ליעד הזה.
ההמלצה שלי היא לקרוא את הכתיבה שלנו על הארכיטקטורה ולבדוק איך אפשר ליישם עקרונות דומים באפליקציה ובסטאק שלכם.
תחילת העבודה עם דוד חימום
מעטפת האפליקציה
המאגר app-shell מכיל הטמעה כמעט מלאה של ארכיטקטורת Application Shell. יש לו קצה עורפי שכתוב ב-Express.js וממשק קצה שנכתב ב-ES2015.
המודל כולל חלקים נרחבים גם בצד הלקוח וגם בצד השרת, והמודל מכסה הרבה דברים, כך שייקח קצת זמן להכיר את ה-codebase. אחרת, זו נקודת ההתחלה המקיפה ביותר שלנו כרגע ב-Progressive Web App. המסמכים הבאים יתמקדו בפרויקט הזה: Docs.
ערכת מתחילים מפולימר
נקודת ההתחלה הרשמית של אפליקציות אינטרנט של Polymer תומכת בתכונות הבאות של Progressive Web App:
- מניפסט של אפליקציית אינטרנט
- מסך פתיחה של Chrome ל-Android
- שמירה במטמון אופליין של Service Worker באמצעות רכיבי SW מסוג פלטינה
- התראות (נדרשת הגדרה ידנית) עם רכיבי ה-Platinum
הגרסה הנוכחית של PSK חסרה בחלק מדפוסי הביצועים המתקדמים יותר (למשל מודל Application Shell, טעינה אסינכרונית) שנמצאו בחלק מאפליקציות האינטרנט מסוג Progressive Polymer.
אנחנו מתכננים לנסות לאפייה את הדפוסים האלה ב-PSK ב-2016, אבל אפשר למצוא ניסויים מוקדמים בנושא הזה באפליקציית Zuperkulblog של רוב דודסון (Polymer), ובשיחת Polymer Perf templates של אריק ביילמן.
ערכת אתרים למתחילים
נקודת ההתחלה המקובצת שלנו לפרויקטים חדשים של וניל כוללת את התכונות הבאות של Progressive Web App:
- מניפסט של אפליקציית אינטרנט
- מסך פתיחה של Chrome ל-Android
- שמירה מראש במטמון של Service-worker באמצעות sw-precache
אם יש לכם העדפה לעבוד עם וניל JS/ES2015 ואתם לא יכולים להשתמש ב-Polymer, ערכת Web Starter Kit עשויה להיות שימושית כנקודת התייחסות, שבה תוכלו להשתמש שוב בקטעי קוד או לגנוב מהם קטעי קוד.
Progressive Web Apps עם ובלי frameworks
מספר אפליקציות מסוג Progressive Web App בקוד פתוח כבר נבנו על ידי חברי הקהילה עם או בלי ספריות ו-frameworks של JS. אם דרוש לך השראה, כדאי לעיין במאגרי המידע שבהמשך. הן גם פשוט אפליקציות ממש טובות.
וניל JavaScript
- הכלי Voice Memos של פול לואיס נוצר באמצעות ארכיטקטורה שדומה לזו של
app-shell(כתיבה) - ויקיפדיה אופליין מאת ג'ייק ארצ'יבלד (סרטון)
- Air Holner מאת פול קינלן
- Guitar Tuner מאת Paul Lewis (כתיבה)
Polymer
- Zuperkulblog מאת רוב דודסון (שקפים)
React
DOM וירטואלי
- Pokedex מאת Nolan Lawson – Progressive Web App (אפליקציית Progressive Web App מעולה) שמציעה גישת "do all in a web worker" (ביצוע כל מה שצריך בגישת עובד אינטרנט) כדי לעזור ברינדור פרוגרסיב. (כתיבה)
Angular.js
- Timey.in מאת קנונת' אוכנברג – משתמש גם ב-
sw-precacheלשמירה במטמון של משאבים
הערות סיום
כפי שציינו, Progressive Web Apps עדיין בשלבי פיתוח, אבל זו תקופה מרגשת להתנסות עם המתודולוגיות שעומדות מאחוריהן ולראות עד כמה הן יכולות להתאים לאפליקציות האינטרנט שלכם.
פול קינלן מתכננים כרגע את ההנחיות של Web Fundamentals (היסודות של בניית אתרים) לגבי Progressive Web Apps. אם יש לך משוב על תחומים נוספים שהיית רוצה לקרוא, אפשר להגיב בשרשור.
קריאה נוספת
- Progressive Web Apps: יציאה מהכרטיסיות בלי לאבד את הנשמה
- למה השימוש ב-Progressive Web Apps הוא העתיד של פיתוח אתרים
- Progressive Web Apps: מוכנות לפריים טיים
- יצירת אפליקציה מסוג Progressive בעזרת ServiceWorker
- העתיד של Progressive Web Apps
- Progressive Web App: דרך חדשה להתנסות בנייד
- חדש: Pokedex.org: אפליקציית אינטרנט מתקדמת לחובבי פוקימון
- סיכום כנס מפתחי Chrome: אפליקציות Progressive Web App