קורס המפרט כל היבט בפיתוח של Progressive Web App המודרנית.
קורס זה עוסק ביסודות של פיתוח Progressive Web App בחלקים קלים להבנה. במודולים הבאים נסביר מה זה Progressive Web App, איך ליצור אפליקציה כזו או לשדרג את תוכן האינטרנט הקיים ואיך להוסיף את כל החלקים לאפליקציה שניתנת להתקנה במצב אופליין. אפשר להשתמש בחלונית התפריט כדי לנווט בין המודולים. (התפריט נמצא בצד ימין במחשב או מאחורי תפריט ההמבורגר בנייד).
נלמד את היסודות של PWA, כמו המניפסט של אפליקציית האינטרנט, Service Worker, איך לפתח אפליקציה מתוך מחשבה על שימוש בכלים אחרים כדי לבדוק את ה-PWA ולנפות באגים. אחרי העקרונות הבסיסיים האלה, תלמדו על השילוב עם הפלטפורמה ומערכת ההפעלה, איך לשפר את חוויית ההתקנה והשימוש ב-PWA ואיך להציע חוויה אופליין.
כל מודול כולל הדגמות אינטראקטיביות והערכות אישיות שיעזרו לך לבחון את הידע שלך. תוכלו לבדוק הדגמות ולהתנסות בהן בטלפון הנייד, בטאבלט או במחשב הנייד תוך כדי משחק עם קוד, כדי להבין את העקרונות הבסיסיים של יצירת Progressive Web App.
הקורס הזה מיועד למפתחי אתרים מתחילים וגם למפתחי אתרים מתקדמים. תוכלו לעבור על הסדרה מההתחלה ועד הסוף כדי להבין באופן כללי את השימוש ב-PWA מלמעלה למטה, או להשתמש בה כחומר עזר לנושאים ספציפיים. עבור אלה חדשים בפיתוח אתרים, תזדקקו לידע כללי ב-HTML, ב-CSS וב-JavaScript כדי להתקדם משם. מומלץ להיעזר בקורסים לימודי CSS ובקורסים HTML ו-JavaScript ב-MDN.
מה תלמדו:
איך מתחילים
אם אתם רוצים לבנות Progressive Web App, יכול להיות שתהו מאיפה להתחיל, אם אפשר לשדרג אתר ל-PWA בלי להתחיל מאפס, או איך לעבור מאפליקציה ספציפית לפלטפורמה ל-PWA. המאמר הזה יעזור לך לענות על השאלות הבאות.
היסודות
כל אפליקציות האינטרנט מסוג Progressive Web Apps נמצאות בבסיסן של אתרים מודרניים. לכן, חשוב שלאתר שלכם יהיה בסיס איתן בעיצוב רספונסיבי, נייד וקודם כל, עיצוב פנימי וביצועים טובים באינטרנט.
עיצוב האפליקציה
אחד ההבדלים העיקריים בין Progressive Web Apps לבין אתרים בגרסה הקלאסית של אפליקציות אינטרנט ואפליקציות הוא יכולת התקנה. כך ניתן ליצור חוויה עצמאית המשולבת יותר בפלטפורמה ובמערכת ההפעלה. ההתקנה מאפשרת גמישות חדשה ואחריות חדשה, כיוון שלא יהיה לנו ממשק משתמש של דפדפן סביב התוכן שלנו.
נכסים ונתונים
Progressive Web App היא אתר. כל הנכסים שלו זהים לאלה שבאינטרנט, אבל בתוספת כלים חדשים שבזכותם הנכסים האלה נטענים במהירות כשהם אונליין וזמינים במצב אופליין.
Service Workers
קובצי שירות (service worker) הם חלק בסיסי מ-PWA. הם מאפשרים טעינה מהירה (ללא קשר לרשת), גישה אופליין, התראות ויכולות נוספות.
שמירה במטמון
אתם יכולים להשתמש ב-Cache Storage API כדי להוריד, לאחסן, למחוק או לעדכן נכסים במכשיר. לאחר מכן, ניתן יהיה להציג את הנכסים האלה במכשיר ללא צורך בבקשת רשת.
הצגה
באמצעות אירוע האחזור של ה-Service Worker אפשר ליירט בקשות רשת ולשלוח תגובה בשיטות שונות.
תיבת עבודה
סביבת העבודה היא קבוצת מודולים שמפשטים אינטראקציות נפוצות של Service Worker, כמו ניתוב ושמירה במטמון. כל מודול מתייחס להיבט ספציפי בפיתוח של Service Worker. המטרה של Workbox היא להפוך את השימוש ב-Service Workers לפשוט ככל האפשר תוך מתן גמישות לעמוד בדרישות מורכבות של אפליקציות במידת הצורך.
נתונים ממקורות אופליין
כדי ליצור חוויה יציבה במצב אופליין, צריך להטמיע ניהול אחסון. כלים כמו IndexedDB, המטמון, מנהל האחסון, אחסון קבוע והוספה לאינדקס של תוכן יכולים לעזור.
התקנה
קל לגשת לאפליקציות מותקנות והן יכולות ליהנות משילובים עמוקים יותר עם מערכת ההפעלה. כדאי ללמוד איך להתקין את ה-PWA וליהנות מהיתרונות האלה.
מניפסט של אפליקציית אינטרנט
המניפסט של אפליקציית אינטרנט הוא קובץ JSON שמגדיר את האופן שבו יש להתייחס ל-PWA כאפליקציה מותקנת, כולל המראה והתחושה והתנהגות בסיסית במערכת ההפעלה.
הודעת התקנה
באתרים שעומדים בקריטריונים להתקנת PWA, הדפדפן מפעיל אירוע שמבקש מהמשתמש להתקין אותו. החדשות הטובות הן שאפשר להשתמש באירוע הזה כדי להתאים אישית את ההצעה לפעולה ולהזמין משתמשים להתקין את האפליקציה.
עדכון
סביר להניח שצריך לעדכן את ה-PWA. בפרק הזה תמצאו את הכלים לעדכון חלקים שונים של ה-PWA, מהנכסים ועד המטא-נתונים.
שיפורים
המשתמשים מצפים לקבל חוויה טובה. בפרק הזה נסביר איך אפשר לשפר את ה-PWA באמצעות מסכי פתיחה, קיצורי דרך לאפליקציות ואיך סשנים פועלים.
זיהוי
זיהוי האינטראקציות של המשתמשים עם האפליקציה שלכם הוא שימושי להתאמה אישית ולשיפור של חוויית המשתמש. לדוגמה, אתם יכולים לבדוק אם האפליקציה שלכם כבר מותקנת במכשיר של המשתמש ולהטמיע תכונות כמו העברת הניווט לאפליקציה הנפרדת מהדפדפן.
שילוב של מערכת ההפעלה
ה-PWA פועלת עכשיו מחוץ לדפדפן. הפרק הזה מסביר איך להמשיך להשתלב עם מערכת ההפעלה אחרי שמשתמשים מתקינים את האפליקציה שלכם.
ניהול החלונות
אפליקציית PWA מחוץ לדפדפן מנהלת חלון משלה. בפרק הזה תבינו מהם ממשקי ה-API והיכולות של ניהול חלון במערכת ההפעלה.
תכונות ניסיוניות
יש יכולות של אפליקציות PWA שעדיין נמצאות בבנייה, ואתם יכולים לקחת חלק בפיתוח שלהן. בפרק הזה תלמדו על פרויקט Fugu, איך להירשם לגרסת המקור לניסיון ואיך להשתמש בממשקי API ניסיוניים
כלים וניפוי באגים
אנחנו נחקור את הכלים הזמינים לפיתוח, ניפוי באגים ובדיקה של Progressive Web Apps.
ארכיטקטורה
כשאתם מפתחים PWA, אתם מקבלים החלטות מסוימות, למשל אם ליצור אפליקציית דף אחת או אפליקציה מרובת דפים, ואם תארחו אותה ברמת השורש של הדומיין או בתוך תיקייה.
ניהול המורכבות
באופן מפתיע, שמירה על אפליקציית אינטרנט פשוטה יכולה להיות מורכבת. ביחידה הזו נלמד איך ממשקי API לאינטרנט פועלים עם שרשור, ואיך אפשר להשתמש בזה עבור דפוסי PWA נפוצים, כמו ניהול מצבים.
יכולות
אפליקציות PWA לא קשורות רק למסך. הפרק הזה עוסק ביכולות של PWA כיום, מבחינת חומרה, חיישנים ושימוש בפלטפורמה.
סיכום
השלבים הבאים ומקורות מידע.
מוכנים ללמוד על PWA?