לאחרונה התקבלו בברכה דיונים רבים בנושא Progressive Web Apps. זה עדיין מודל חדש יחסית, אבל העקרונות שלהם יכולים להעשיר באותה מידה אפליקציות שפותחו באמצעות וניל JS, React, Polymer, Agular או כל מסגרת אחרת. בפוסט הזה אסכם כמה אפשרויות ואפרט על אפליקציות שיעזרו לכם להתחיל להשתמש ב-Progressive Web App כבר היום.
מהי Progressive Web App?
חשוב לזכור שאפליקציות מסוג Progressive Web App פועלות בכל מקום, אבל יש להן יתרונות משמעותיים בדפדפנים מודרניים. התכונה 'שיפור הדרגתי' היא עמוד שדרה של המודל.
אהרון גוסטפסון דיווה את השיפור המתקדם ל-M&M של בוטנים. הבוטן הוא התוכן שלכם, ציפוי השוקולד הוא שכבת ההצגה וה-JavaScript הוא מעטפת הסוכריות. צבע השכבה יכול להשתנות והחוויה עשויה להשתנות בהתאם ליכולות של הדפדפן שמשתמש בה.
מעטפת Candy Crush היא המקום שבו תכונות רבות של Progressive Web App יכולות להימצא. הן משלבת בין המיטב שיש לאינטרנט לבין מיטב האפליקציות. הם שימושיים למשתמשים כבר מהביקור הראשון בכרטיסיית הדפדפן, אין צורך בהתקנה.
כשהמשתמש בונה מערכת יחסים עם האפליקציות האלו באמצעות שימוש חוזר, מעטפת הממתקים הופכת למתוקה יותר – היא נטענת מהר מאוד בחיבורי רשת איטיים (תודה לservice worker), ששולחת התראות דחיפה רלוונטיות ושולחת אותן למסך הבית של האפליקציה ושולח אותן למסך מלא כמסך ביתי. הם יכולים גם להשתמש במודעות באנר חכמות להתקנת אפליקציות אינטרנט.
Progressive Web Apps הן
- Progressive – הרשאה שמתאימה לכל משתמש, בלי קשר לבחירה של הדפדפן, כי היא בנויה עם שיפור הדרגתי כי היא דייר ליבה.
- רספונסיבית – מתאימה לכל גורם צורה, למחשב, לנייד, לטאבלט או לכל שלב אחר.
- ללא קישוריות – משופר באמצעות Service Workers לעבודה אופליין או ברשתות באיכות נמוכה.
- App-like – המודל מאפשר להשתמש במודל מעטפת האפליקציה כדי לספק ניווטים ואינטראקציות בסגנון האפליקציה.
- Fresh – עדכון תמידי הודות לתהליך העדכון של Service Worker.
- בטוח – השירות מוצג באמצעות TLS כדי למנוע חיטוט בתוכן וכדי לוודא שהוא לא יגרום לשינוי.
- גילוי – אפשר לזהות אותם כ'אפליקציות' הודות למניפסטים של W3C ולהיקף הרישום של קובצי השירות (service worker) שמאפשרים למנועי חיפוש למצוא אותם.
- עידוד לאינטראקציה חוזרת – מאפשר לאינטראקציה חוזרת בקלות באמצעות תכונות כמו התראות.
- אפשרות להתקנה – מאפשרת למשתמשים לשמור את האפליקציות השימושיות ביותר במסך הבית שלהם, בלי הטרחה של חנות אפליקציות.
- Linkable – ניתן לשתף בקלות דרך כתובת URL ללא צורך בהתקנה מורכבת.
כמו כן, אפליקציות מסוג Progressive Web App אינן ייחודיות ל-Chrome ל-Android. בהמשך ניתן לראות כי אפליקציית האינטרנט Progressive Web App של Pokedex פועלת ב-Firefox ל-Android (בטא), עם תכונות מוקדמות של 'הוספה למסך הבית' ו'שמירה במטמון של Service Worker'.
אחד ההיבטים הנחמדים של אופי "מתקדם" במודל זה הוא העובדה שתכונות מסוימות מתבטלות בהדרגה, ככל שספקי דפדפנים מספקים בהם תמיכה טובה יותר. כמובן שאפליקציות מסוג Progressive Web App כמו Pokedex פועלות נהדר גם ב-Opera ב-Android, עם כמה הבדלים ראויים בהטמעה:
כדי להתעמק יותר ב-Progressive Web Apps, כדאי לקרוא את פוסט הבלוג המקורי שהציג אלכס ראסל (Alex Russell). פול קינלן התחיל גם להשתמש בתג Stack Overflow שימושי במיוחד לאפליקציות מסוג Progressive Web App שכדאי לנסות.
עקרונות
קובץ מניפסט של אפליקציית אינטרנט
המניפסט מאפשר לאפליקציית האינטרנט להיות נוכחות ברורה יותר במסך הבית של המשתמש. היא מאפשרת להפעיל את האפליקציה במצב מסך מלא (ללא סרגל כתובות URL), לשליטה על כיוון המסך, ובגרסאות האחרונות של Chrome ל-Android יש תמיכה בהגדרה של מסך פתיחה וצבע עיצוב בסרגל הכתובות. הוא משמש גם להגדרת קבוצת סמלים לפי גודל וצפיפות, המשמשים את מסך הפתיחה ואת סמל מסך הבית שהוזכרו קודם לכן.
ניתן למצוא קובץ מניפסט לדוגמה בערכה למתחילים באינטרנט ובמקומות נוספים בדוגמאות של Google Chrome. ברוס לוסון כתב מחולל מניפסט ומוניר למורי כתב גם כלי תיקוף של מניפסטים באינטרנט שימושי שכדאי לבדוק.
בפרויקטים האישיים שלי, אני נעזרת ב-realfavicongenerator כדי ליצור את הסמלים בגודל הנכון, גם המניפסט של אפליקציית האינטרנט וגם לשימוש ב-iOS, במחשב ועוד. גם מודול הצומת של סמל האתר יכול להשיג פלט דומה כחלק מתהליך ה-build.
תומכים בדפדפנים מבוססי Chromium (Chrome, Opera וכו') באפליקציית האינטרנט של Firefox כפי ש-Firefox מפתח את התמיכה באופן פעיל, ו-Edge מציגה אותן בתור בבדיקה. WebKit/Safari עדיין לא פרסמו אותות ציבוריים לגבי כוונותיהם להטמיע את התכונה הזו.
לקבלת פרטים נוספים, מומלץ לקרוא את המאמר אפליקציות אינטרנט שניתן להתקין עם מניפסט אפליקציית האינטרנט ב-Chrome ל-Android בדף Web Fundamentals.
הבאנר 'הוספה למסך הבית'
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. הן מפורטות בספריות של קובצי שירות (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 לגבי הכוונה שלהם להטמיע את התכונה הזו.
התראות בדחיפה ב-Open Web הוא מבוא מקיף לקבלת הגדרת Push על ידי מאט Gaunt, ו-Push Notifications codelab זמין גם ב-Web Fundamentals.
למיכאל ואן אווורקרק מצוות Chrome יש גם מבוא ל-6 דקות ל-Push אם יש טעם לצפות בסרטון.
יצירת שכבות בתכונות מתקדמות
חשוב לזכור שחוויית המשתמש יכולה להיות ברמות שונות של מתיקות, בהתאם לדפדפן שבו נעשה שימוש כדי לצפות באפליקציית האינטרנט. השליטה במעטפת הסוכריות נמצאת בשליטתכם.
באופן הזה, ניתן לשלב ב-Progressive Web App גם תכונות נוספות שמגיעות לפלטפורמת האינטרנט, כמו סנכרון ברקע (לסנכרון נתונים עם שרת אפילו כשאפליקציית האינטרנט סגורה) ו-Bluetooth לאינטרנט (לשיחות עם מכשירי Bluetooth מאפליקציית האינטרנט).
סנכרון ברקע עם תמונה אחת הופעל ב-Chrome ולג'ייק ארצ'יבלד יש סרטון של אפליקציית ויקיפדיה לשימוש במצב אופליין ומאמר שמדגים את הפעולה. לפרנסואה בופורט יש גם כמה דגימות Bluetooth לאינטרנט זמינות למי שרוצה לנסות את ה-API הזה.
ידידותי למסגרת
שום דבר לא מונע ממך להחיל אף אחד מהעקרונות שלמעלה על יישום או מסגרת קיימים שאתה מפתח באמצעותה. כמה עקרונות נוספים שכדאי לזכור במהלך היצירה של Progressive Web App הם מודל הביצועים שמתמקד במשתמש ב-RAIL ואנימציות המבוססות על FLIP.
אני מקווה שבמהלך 2016 נראה שמספר הולך וגדל של פרויקטים של זרעים ותבניות זרעים יוטמעו בצורה אורגנית בתמיכה ב-Progressive Web Apps כתכונה עיקרית. עד אז, המכשור להוספת התכונות האלה לאפליקציות שלכם אינו גבוה במיוחד, והן IMHO, שוות את המאמץ.
אדריכלות
יש רמות שונות של 'הכל כלול' במודל Progressive Web App, אבל אחת הגישות הנפוצות היא לתכנן אותן סביב Application Shell. זו לא דרישה קשה, אבל יש לה כמה יתרונות.
הארכיטקטורה של Application Shell מעודדת שמירה של מעטפת האפליקציה במטמון (ממשק המשתמש), כדי שהיא תפעל אופליין ולאכלס את התוכן באמצעות JavaScript. בביקורים חוזרים, הגדרה זו מאפשרת לקבל פיקסלים משמעותיים במסך במהירות רבה ללא רשת, גם אם התוכן מגיע משם בסופו של דבר. העובדה הזו משפרת באופן משמעותי את הביצועים.
לאחרונה ג'רמי קית' הגיב על כך שבסוג המודל הזה אין להתייחס לעיבוד בצד השרת כחלופה, אבל יש להתייחס לעיבוד בצד הלקוח כשיפור. זהו משוב הוגן.
במודל 'מעטפת אפליקציה', צריך להשתמש ככל האפשר בעיבוד בצד השרת, ולהשתמש ברינדור הדרגתי בצד הלקוח כשיפור, באותו אופן שבו אנחנו 'משפרים' את החוויה כאשר יש תמיכה ב-Service Worker. בסופו של דבר יש הרבה דרכים לגשת לכך.
ההמלצה שלי היא לקרוא את הסיכום שלנו על הארכיטקטורה ולבדוק איך ניתן ליישם עקרונות דומים בצורה הטובה ביותר באפליקציה ובסטאק שלכם.
תחילת העבודה עם תבניות סטנדרטיות
מעטפת האפליקציה
המאגר app-shell מכיל יישום כמעט מלא של ארכיטקטורת Application Shell. יש לו קצה עורפי שנכתב ב-Express.js וממשק קצה שנכתב ב-ES2015.
מכיוון שהוא מכסה חלקים בצד הלקוח ובצד השרת של המודל, והרבה דברים קורים בו, ייקח קצת זמן להכיר את ה-codebase. אחרת, זו נקודת ההתחלה המקיפה ביותר שלנו ל-Progressive Web App כרגע. Google Docs יהיה המיקוד הבא בפרויקט הזה.
ערכה פולימר למתחילים
נקודת ההתחלה הרשמית של אפליקציות האינטרנט Polymer תומכת בתכונות הבאות של Progressive Web App:
- מניפסט של אפליקציית אינטרנט
- מסך פתיחה של Chrome ל-Android
- שמירה במטמון במצב אופליין של Service Worker עם רכיבי Platinum SW
- התראות (נדרשת הגדרה ידנית) עם רכיבי דחיפה ברמת פלטינה
בגרסה הנוכחית של PSK חסרה תמיכה בחלק מדפוסי הביצועים המתקדמים יותר (למשל, מודל Application Shell, טעינה אסינכרונית) שנמצאים בחלק מאפליקציות האינטרנט מסוג Progressive Polymer.
אנחנו שואפים לנסות לשלב את הדפוסים האלה ב-PSK ב-2016, אבל ניתן למצוא ניסויים מוקדמים בנושא הזה באפליקציית Zuperkulblog של הפולימר מאת רוב דודסון, ואת השיחה המעולה על Polymer Perf Templates של אריק בידלמן.
ערכת התחלה באינטרנט
נקודת ההתחלה המשוערת שלנו לפרויקטים חדשים של וניל כוללת את התכונות הבאות של Progressive Web App:
- מניפסט של אפליקציית אינטרנט
- מסך פתיחה של Chrome ל-Android
- שמירה מראש במטמון של קובץ השירות (service worker) הודות ל-sw-precache
אם יש לכם העדפה לעבוד עם וניל JS/ES2015 ואין לכם אפשרות להשתמש ב-Polymer, יכול להיות ש-Web Starter Kit יהיה שימושי כנקודת התייחסות שתוכלו להשתמש בו שוב או לגנוב ממנו קטעי קוד.
Progressive Web Apps עם או בלי מסגרות
מספר אפליקציות קוד פתוח מסוג Progressive Web App כבר נבנו על ידי חברי הקהילה, עם ובלי ספריות ומסגרות של JS. אם אתם מחפשים השראה, המאגרים הבאים עשויים להועיל לכם. הן גם סתם אפליקציות ממש טובות.
וניל JavaScript
- תעודות מזהות של פול לואיס מעוצבות באמצעות ארכיטקטורה דומה לזו של
app-shell(כתיבה) - ויקיפדיה במצב אופליין מאת ג'ייק ארצ'יבלד (סרטון)
- Air Shoner מאת פול קינלן
- גיטרה טיונר מאת פול לואיס (כתיבה)
Polymer
- Zuperkulblog מאת רוב דודסון (slides)
React
DOM וירטואלי
- Pokedex מאת נולן לוסון - אפליקציה מעולה מסוג Progressive Web App שמיישמת את גישת "do הכל in a web worker" (עשו כל דבר במסגרת ה-Web Worker) כדי לסייע בעיבוד מתקדם. (כתוב)
Angular.js
- Timey.in מאת קנת אוכנברג - משתמש גם ב-
sw-precacheלשמירה מראש של משאבים
סיכום הערות
כפי שצוין, Progressive Web Apps עדיין נמצאות בחיתוליה, אבל זו הזדמנות מעניינת להכיר את המתודולוגיות שעומדת מאחוריהן ולבדוק עד כמה הן יכולות להתאים לאפליקציות האינטרנט שלכם.
פול קינלן מתכנן כרגע את ההנחיות בנושא Web Fundamentals (היסודות של בניית אתרים) לגבי Progressive Web Apps. אם יש לך משוב על תחומים שהיית רוצה לכסות, נשמח לקבל ממך משוב על השרשור.
קריאה נוספת
- Progressive Web App: בריחה מכרטיסיות בלי לאבד את הנשמה
- למה אפליקציות Progressive Web App הן העתיד של פיתוח האינטרנט
- Progressive Web Apps: מוכנות לשימוש בפריים טיים
- יצירת אפליקציה מתקדמת באמצעות ServiceWorker
- העתיד – אפליקציות מסוג Progressive Web App
- Progressive Web App: דרך חדשה להתנסות בנייד
- חדש: Pokedex.org: אפליקציית אינטרנט מתקדמת למעריצי פוקימון
- Chrome Developer Summit Recap: אפליקציות מסוג Progressive Web App