כיצד לבנות אפליקציית אינטרנט מתקדמת

מְחַבֵּר: John Stephens

תאריך הבריאה: 23 יָנוּאָר 2021

תאריך עדכון: 19 מאי 2024

וִידֵאוֹ: איך לבנות חנות אינטרנטית עם וורדפרס + ווקומרס 2021 (תמיכה בתגובות) (כתוביות בעברית)

תוֹכֶן

01. הגש באמצעות HTTPS
02. צור מעטפת יישום
03. רשום עובד שירות
04. הוסף התראות דחיפה
05. הוסף מניפסט של אפליקציית אינטרנט
06. הגדר את בקשת ההתקנה
07. נתח את ביצועי האפליקציה שלך
08. בדוק את האפליקציה שלך עם מגדלור

מובייל מהווה כעת למעלה ממחצית התעבורה באינטרנט, ויישומי רשת מאפשרים למשתמשים לעשות דברים בדפדפן שמתחרים באפליקציות מקומיות, אך יש בעיה: איכות החיבורים והמכשירים משתנה באופן מסיבי בכל רחבי העולם.

קייטרינג הן למשתמשים בחיבורים מהירים בסיאול והן למשתמשים בהודו הכפית בטלפון מיושן, הוא אתגר השימושיות האחרון, ו- Apps Progressive Web הם הפיתרון.

PWAs משתמשים בשיפור פרוגרסיבי כדי לטעון תחילה את התוכן החשוב ביותר, ואז להוסיף תוספות מצגות ופונקציונליות כנדרש, כלומר כל המשתמשים שלך מקבלים את אותה חווית ליבה במהירות האפשרית. אם אתה רוצה להגיע לקהל הרחב ביותר האפשרי, PWAs הם הדרך ללכת.

10 צעדים לחוויית משתמש מרתקת

למרות שאפליקציות אינטרנט מתקדמות מביאות הרבה יתרונות ופונקציונליות לרשת, הן אינן דורשות שכתוב מחדש של כל היישום שלך. ניתן להמיר כל יישום ל- PWA על ידי הוספת כמה שכבות נוספות אליו.

לקבלת התוצאות הטובות ביותר, אתה רוצה לשים דגש חזק על ביצועים מההתחלה - אבל זה נכון לגבי כל אפליקציית אינטרנט. כאן נעבור בין השלבים כדי להפוך את האפליקציה שלך לפרוגרסיבית.

אם אתה רוצה לבנות אתר הפועל בצורה חלקה, ודא שאירוח האתרים שלך נמצא במקום והשתמש בבונה אתרים הגון.

01. הגש באמצעות HTTPS

בואו נהיה כנים: בכל מקרה אתה צריך לעשות את זה. SSL מוסיף שכבת אבטחה נוספת לאינטרנט, ומסייע למשתמשים שלך להרגיש בטוחים בשימוש באתר שלך. עם PWAs, HTTPS חיוני לשימוש בעובדי שירות ולאפשר התקנת מסך הבית. אתה יכול לרכוש אישור SSL מרשם הדומיינים שלך בהוצאות נמוכות ואז להגדיר אותו באמצעות שירות האירוח שלך.

02. צור מעטפת יישום

מעטפת האפליקציה שלך היא הדבר הראשון שנטען - הדבר הראשון שהמשתמש רואה. זה אמור להתקיים במלואו במסמך HTML האינדקסי שלך, עם CSS מוטבע, כדי להבטיח שהוא יופיע מהר ככל האפשר והמשתמש שלך לא יבהה במסך לבן יותר זמן מהנדרש. מעטפת היישום מהווה חלק מתבנית השיפור המתקדם. האפליקציה שלך צריכה לספק למשתמש תוכן בהקדם האפשרי, ואז בהדרגה לשפר אותו ככל שיותר נתונים (ככל הנראה JavaScript) נטענים.

הדוגמה שלהלן לקוחה מיישום React.js. בפני המשתמש מוצג מתאר של האפליקציה ומחוון טעינה ב- index.html. לאחר מכן, ברגע ש- JavaScript נטען ומגיב אתחול, היישום המלא מוצג בתוך הקליפה.

! - index.html -> גוף> div id = "root"> div id = "container"> div> div id = "header"> img src = "/ assets / icon.png" alt = "logo" /> h1> צ'אט / h1> / div> div id = "container-container"> img src = "/ assets / icon.png" alt = "logo" id = "loader" /> / div> / div> / div> / div> / body> // index.js ReactDOM.render (App />, document.getElementById ('root'));

03. רשום עובד שירות

כדי להשתמש בספקטרום המלא של מוצרי PWA (הודעות דחיפה, אחסון במטמון, הנחיות להתקנה) תזדקק לעובד שירות.

למרבה המזל, הם די קלים להתקנה. למטה נבדוק תחילה אם הדפדפן של המשתמש תומך בעובדי שירות. ואז, אם כן, נוכל להתקדם ברישום קובץ עובד השירות, הנקרא כאן service-worker.js. שים לב שאתה לא צריך שום דבר מיוחד בתוך הקובץ הזה בשלב זה - הוא יכול להיות ריק.

בדוגמה שלהלן, עם זאת, אנו מראים כיצד לנצל את שלושת אירועי מחזור החיים של עובדי השירות העיקריים. אלה הם 'התקנה', כאשר המשתמש מבקר לראשונה בדף שלך; 'הפעל', ממש לפני השלמת ההרשמה; ו- 'fetch', כאשר היישום מגיש בקשת רשת. האחרון רלוונטי למטמון ויכולת לא מקוונת.

סקריפט> אם ('serviceWorker' בנווט) {window.addEventListener ('load', function () {navigator.serviceWorker.register ('service-worker.js'). ואז (פונקציה (רישום) {// ההרשמה הצליחה) console.log ('רשום!');}, פונקציה (שגיאה) {// רישום נכשל :( console.log ('רישום ServiceWorker נכשל:', שגיאה);}). לתפוס (פונקציה (שגיאה) {console.log (err);});});} אחר {console.log ('עובד עובד אינו נתמך');} / script> // service-worker.js self.addEventListener ('התקן', פונקציה () {console .log ('התקן!');}); self.addEventListener ("הפעל", אירוע => {console.log ('הפעל!');}); self.addEventListener ('אחזור', פונקציה (אירוע) { console.log ('אחזר!', event.request);});

04. הוסף התראות דחיפה

עובדי שירות מאפשרים למשתמשים שלך לקבל התראות דחיפה דרך ה- API של ה- Push באינטרנט. כדי לגשת אליו, תוכל להיכנס אליו self.registration.pushManager מתוך תיק עובדי השירות שלך. מכיוון ששליחת הודעות דחיפה נשענת במידה רבה על הגדרת ה- backend שלך, לא נצלול לתוכה כאן.

אם אתה מפעיל אפליקציה מאפס, שירות Firebase של גוגל מגיע עם הודעות ענן של Firebase להודעות דחיפה ללא כאבים יחסית (זכור: ודא שאתה שומר על קבצי העיצוב שלך באחסון בענן). הקוד שלהלן מראה כיצד להירשם להתראות דחיפה באמצעות ה- API של Push.

navigator.serviceWorker.ready.then (פונקציה (רישום) {אם (! registration.pushManager) {התראה ('אין תמיכה בהודעות דחיפה.'); החזר שקר;} // למנוי 'הודעת דחיפה' מרישום מנהל הדחיפה. .subscribe ({userVisibleOnly: true // הראה תמיד הודעה כאשר מתקבלת}). ואז (פונקציה (מנוי) {console.log ('מנוי.');}) .catch (פונקציה (שגיאה) {console.log ('מנוי) שגיאה: ', שגיאה);});})

05. הוסף מניפסט של אפליקציית אינטרנט

על מנת להפוך את היישום שלך להתקנה, עליך לכלול א manifest.json בספריית הבסיס של היישום. אתה יכול לחשוב על זה כתיאור של היישום שלך, בדומה למה שאתה יכול להגיש ל- App Store. הוא כולל אייקונים, מסך הפתיחה, שם ותיאור.

יש גם תצורה כלשהי לאופן שבו היישום שלך מופיע כאשר הוא מופעל ממסך הבית של המשתמש: האם ברצונך להציג את סרגל הכתובות בדפדפן או לא? איזה צבע אתה רוצה ששורת המצב תהיה? וכולי. שימו לב כי תקין manifest.json צריך לכלול ספקטרום מלא של גדלי אייקונים למכשירים שונים. הקוד שלהלן הוא תצוגה מקדימה של כמה מהמאפיינים שהמניפסט שלך יכול לכלול.

{"short_name": "Chat", "name": "Chat", "icons": [{"src": "/ assets / icon.png", "sizes": "192x192", "type": "image / png "}]," start_url ":" /? utm_source = מסך הבית "," background_color ":" # e05a47 "," theme_color ":" # e05a47 "," display ":" standalone "}

06. הגדר את בקשת ההתקנה

כאשר משתמש מבקר ב- PWA עם עובד שירות ומניפסט, Chrome יבקש ממנו באופן אוטומטי להתקין אותו על מסך הבית שלהם, בהתחשב באלה: על המשתמש לבקר באתר פעמיים, תוך חמש דקות בין הביקור.

הרעיון כאן הוא להמתין עד שהמשתמש יגלה עניין ביישום שלך, ואז לבקש ממנו להפוך אותו למתקן של המכשיר שלו (זאת בניגוד חד לגישת האפליקציה המקורית, שמבקשת את ההשקעה הזו מלפנים).

אך יתכנו מקרים שבהם ברצונך להציג את בקשת ההתקנה במצבים שונים, למשל לאחר שהמשתמש מבצע פעולה שימושית מסוימת. לשם כך אנו מיירטים את לפני ההתקנה אירוע ושמור אותו למועד מאוחר יותר ואז פרוס את ההנחיה כשאנחנו רואים לנכון.

window.addEventListener ('beforeinstallprompt', e => {console.log ('beforeinstallprompt Event fired'); e.preventDefault (); // סגרו את האירוע כך שניתן יהיה להפעיל אותו מאוחר יותר. this.deferredPrompt = e; להחזיר שקר; }); // כאשר ברצונך להפעיל הנחיה: this.deferredPrompt.prompt (); this.deferredPrompt.userChoice.then (choice => {console.log (choice);}); this.deferredPrompt = null;

07. נתח את ביצועי האפליקציה שלך

ביצועים הם הלב והנשמה של PWA. האפליקציה שלך צריכה להיות מהירה למשתמשים בכל תנאי הרשת. יכולת שמירה ואחסון לא מקוון עוזרים מאוד, אך בסופו של יום, היישום שלך צריך להיות מהיר גם אם למשתמש אין את הדפדפן לתמוך בטכנולוגיית עובדי השירות. זו ההגדרה של שיפור פרוגרסיבי - מספקים חוויה נהדרת לכולם, ללא קשר למודרניות המכשירים או לתנאי הרשת.

לשם כך, מערכת מדדים שימושית היא מערכת ה- RAIL. RAIL מכנה את גוגל 'מודל ביצועים ממוקד משתמש' - מערכת הנחיות למדידת ביצועי האפליקציה שלנו.

ראשי התיבות מייצגים תגובה (כמה זמן לוקח לאפליקציה שלך להגיב לפעולות משתמש), אנימציה (שמירה על מהירות האנימציה על 60fps), סרק (תוך שימוש בזמן שהאפליקציה שלך לא עושה שום דבר אחר כדי לטעון ולשמור מטמון נכסים נוספים) ו טען (טוען את האפליקציה שלך בשנייה אחת או פחות).

לפניכם טבלה של אמות מידה משמעותיות לטעינת יישומים, כפי שמספקת מגין קירני, כותבת הטכנולוגיה ב- Google Web Fundamentals.

08. בדוק את האפליקציה שלך עם מגדלור

גוגל היא האלופה הגדולה ביותר שדוחפת אפליקציות פרוגרסיביות כעתיד האינטרנט. ככזה, הוא סיפק כלי שימושי להנחיית פיתוח ה- PWA שלך.

בעבר נקרא מגדלור ומסופק כתוסף Chrome, החל מ- Chrome 60 הוא חלק מ- DevTools של Chrome, בכרטיסייה 'ביקורת'. מה שמגדלור עושה הוא להריץ את היישום שלך בתנאים שונים ולמדוד את תגובתו והצלחתו על פי הנחיות PWA. זה נותן לך ציון מתוך 100. זה יכול גם לקלוע את האפליקציה שלך בשיטות עבודה מומלצות באינטרנט בו זמנית.

הטקסט הבא הוא רשימה של הערכים שמגדלור נמדד. בשימוש גם תיאורים.