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

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

מה זה PWA

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

בואו נראה איך זה עובד. המשתמש נכנס לאתר ומקבל הצעה להוסיף אותו למסך הראשי.

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

נקודה חשובה: PWA התגנב במכשיר של המשתמש בשתי קליקים. זה קרה לעקוף את חנות Play, וגם בניגוד האיסור על התקנת יישומים ממקורות לא ידועים. תוכנת האנטי וירוס לא נשבע.

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

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

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

תוצאות בדיקה מהירות:

  • ב- Firefox, ה- PWA פועל באופן מלא.
  • בדפדפן האינטרנט PWA של סמסונג לא עובד, הבלוג זמין כאתר רגיל.
  • באופרה, האתר זמין ללא פונקציונליות PWA.
  • Microsoft Edge עבור Android PWA פועל באופן מלא.

לפיכך, טכנולוגיית PWA נתמכת לפחות 80% מהדפדפנים (זהו החלק של Chrome, Firefox ו- Edge).

סיכום ביניים: PWA עושה ארבעה דברים מגניבים:

  • מותקן במכשיר בלחיצה אחת ללא חנויות יישומים.
  • טעינה מהירה הודות למטמון דף שנוצר מראש.
  • עובד באופן לא מקוון הודות לאותו מטמון.
  • שולח הודעות דחיפה למשתמשים.

מדוע העסק צריך להשתמש ביישומי אינטרנט מתקדמים

כל התשובות לשאלה מתוך כותרת המשנה ניתן למצוא בסעיף הקודם. אנו חוזרים על עיקרי האיחוד. PWA מסייע לעסקים:

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

יישום PWA נותן תוצאות מדידות. הנה כמה דוגמאות:

  • הודות לטכנולוגיה, Tinder הפחית את זמני טעינת הדף מ -11.9 שניות ל -4.69 שניות. PWA Tinder הוא 90% קל יותר מאשר היישום המקורי שלהם.
  • PWA Uber שוקל כמעט כלום ועומס ב 3 שניות אפילו ברשתות 2G.
  • תודות OLX ל- PWA הגדילו את שיעור הקליקים של מודעות ב- 146% והפחיתו את מספר הכשלים ב- 80%.

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

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

כיצד ליישם את הפונקציונליות של PWA באתר

כדי ליישם את PWA, אתר קיים חייב לעמוד בדרישות הבאות:

  • גישה דרך https.
  • יכולת הסתגלות או היענות.
  • כתובת אתר נפרדת עבור כל דף (נקודה חשובה, אם האתר שלך הוא ספא).

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

שקול שתי דרכים ליישם את PWA על מנת פשוט מ מורכב.

כיצד להפוך אתר ל- PWA בכמה קליקים באמצעות יישומי פלאגין מוכנים

הבעלים של CMS פופולרי הם בר מזל: הם יכולים להפוך את האתר לתוך יישום פרוגרסיבי בעזרת תוספות.

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

התקן את PWA ללא תשלום עבור תוסף WP באתר. בדקתי מספר מודולים מספריית וורדפרס הרשמית והתיישבו על פתרון זה. את התוצאות של עבודתו ניתן לראות בתחילת המאמר. אם אתה רוצה, נסה plugins אחרים.

ציין הגדרות כלליות. בחר את סמל שולחן העבודה (סמל אפליקציה) ואת סמל preloader (App Splash Screen Icon). בהגדרות ניתן לבחור את כיוון היישום (לאורך או לרוחב), אך פונקציה זו אינה פועלת. היישום מוצג במצב "לאורך", ללא קשר להגדרות.

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

בהגדרות מתקדמות, הפעל מעקב לא מקוון באמצעות Google Analytics. לחלופין, הפעל תמיכה בהתראה של PWA במסכי שולחן עבודה.

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

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

מה אם האתר לא עובד על וורדפרס? לתפוס את הפתרון:

  • ג 'ומלה: PWA מ WebKul ($ 59).
  • דרופל: פרוגרסיבי Web App (עובד עם דרופל 7, גרסה 8 דרופל הוא בפיתוח).
  • OpenCart: OpenCart PWA ($ 99).
  • מגנטו: סטודיו PWA (צריך סיוע למפתחים).
  • CS-Cart: CS-Cart PWA ($ 99).
  • Prestashop: PWA לדחוף הודעות מראש PWA (90 ו - 150 יורו בהתאמה).
  • WooCommerce: PWACommerce.

לא מצאתי פתרונות מוכנים למנועים אחרים, אבל אתה יכול לחפש בעצמך.

סיכום ביניים: וורדפרס יש מודולים חינם ליישום PWA, כולל WooCommerce ו דרופל. עבור מודולים עבור ג 'ומלה!, OpenCart, CS-Cart ו Prestashop אתה צריך לשלם. כדי ליישם יישום אינטרנט פרוגרסיבי על מנועי אחרים, מפתחים יצטרכו לשלם.

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

דרך מהירה וחופשית ליצירת אתר פונקציונליות של PWA עם Gatsby.

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

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

התקן את Node.js במחשב שלך. זה נחוץ כדי להפעיל שרת מקומי במחשב, אשר הכרחי לעבודה עם גטסבי. הן LTS ו- Node.js הנוכחיים יעשו. לאחר ההתקנה, פתח שורת פקודה והזן שתי פקודות: הצומת --version ו- npm --version. כדי להפעיל שורת פקודה ב- Windows, הקלד "cmd" בשורת המשימות.

אם הכל נעשה כראוי, תראה משהו כזה (גירסאות שונות):

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

  • git config - user.name גלובלי "Vasya פופקין".
  • msgstr.

התקן את Gatsby CLI באמצעות הפקודה nsm install-gatsby-cli.

עכשיו אתה יכול להתקין את Gatsby הרכבה. בשורת הפקודה, בחר כונן D או כונן אחר שאינו מערכת במחשב. לשם כך, הזן את הפקודה D:.

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

התקן את הרכבה של Gatsby באמצעות הפקודה gatby new-blog-starter // github.com/gatsbyjs/gatsby-starter-blog. במקרה זה, הבלוג שלי- Starter הוא שם האתר. אתה יכול להחליף אותו עם כל האחרים.

לאחר השלמת ההתקנה, נווט לתיקיית הפרוייקט באמצעות הפקודה cd my-blog-starter. התחל PWA בשרת מקומי באמצעות הפקודה לפתח gatsby. אם הכל נעשה בצורה נכונה, הגרסה המקומית של האתר תהיה זמינה ב // localhost: 8000.

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

עריכת PWA וליצור הודעות יהיה בתיקיית הפרויקט.

כדי לשנות את הגדרות הבלוג שלך, פתח את gatsby-config.js ב- Notepad או בעורך טקסט אחר. ציין מטה-נתונים מתאימים: שם הבלוג, שם המחבר, התיאור. ככתובת אתר, ציין משהו כמו //basil-pupkin.surhe.sh, רק במקום "basil-pupkin" כתוב את האפשרות הרצויה. שים לב שעליך לציין את פרוטוקול החיבור https. קצת מאוחר יותר, אנו מפרסמים אתר אינטרנט בחינם על אירוח Surge.

שמור את השינויים בקובץ. לאחר מכן, השרת המקומי יעדכן את העתיד של PWA.

החלף את הגלגול בתיקייה Content - Assets. שם הקובץ עם התמונה שלך באותו אופן כמו גלגול ברירת המחדל נקרא. כדי לערוך את המידע אודות המחבר, פתח את הקובץ bio.js בתיקייה Src - Components. ציין את הנתונים ושמור את השינויים.

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

כדי לפרסם פוסט חדש, פעל באופן הבא:

  • צור תיקייה עם שם מתאים.
  • בתוך התיקיה, צור את הקובץ index.md.
  • פתח את הקובץ בעורך טקסט.

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

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

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

עכשיו להעביר את הבלוג מהשרת המקומי לאינטרנט. בואו נפעיל את PWA על אירוח חינם של אתרים סטטיים של Surge, אבל אם תרצה, תוכל להשתמש בפלטפורמות אחרות, לדוגמה, GitHub Pages, Netlify וכן הלאה.

התקן את ה- Surge. לשם כך, הזן את הפקודה npm install - global surge הפקודה אל המסוף. צור אתר סטטי: הזן את הפקודה gatsby build בתיקיית הפרוייקט. גטסבי יכין קבצי HTML ו- JavaScript סטטיים למשך דקה, שיפורסם בהמשך.

הזן את נחשול הציבור / הפקודה.

המערכת תציע שם תחום אקראי.

החלף את השם באופן ידני עם השם הרצוי.

לחץ על Enter והמתן להודעת פרסום האתר.

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

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

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

בדוק אם דפים פנימיים זמינים כאשר אינו מחובר.

שים לב שבמכשירים מסוימים כאשר אתה מפעיל לראשונה PWA דורש חיבור לאינטרנט.

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

נקודה חשובה: בניגוד ל- Google, Yandex עדיין לא יכולה להוסיף לאינדקס את התוכן שנוצר באמצעות JavaScript. כדי לעזור למנוע החיפוש, עליך להגדיר תצורת צד שרת ב- Gatsby. נדבר על כך בפרסומים הבאים.

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

"רבים רואים PWA להיות הטכנולוגיה של העתיד, ואני מסכים איתם": ניקולאי Ilichev, מתכנת במחלקת הפיתוח של אתר האינטרנט Texterra

מתכנת "Texterra" ניקולאי Ilichev שיתף עם הקוראים את דעתו על יישומי אינטרנט מתקדמים.

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

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

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

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

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

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

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

DD: כדי ליישם PWA, האתר חייב בתחילה יש מספר מאפיינים: הסתגלות, מהירות הורדה גבוהה, וזמינות מעל פרוטוקול חיבור מאובטח. האם זה אומר כי יישום של PWA יהפוך את בעל האתר "למשוך זנבות" ולשפר את האתר?

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

JJ: האם אתה חושב כי העובדה כי פורמט זה פעיל בקידום גוגל ישפיע על הפופולריות של PWA?

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

מה הלאה

PWA היא טכנולוגיה מבטיחה המרחיבה את אפשרויות האינטראקציה עם משתמשים ניידים. מתוך המאמר למדת כיצד להפוך אתר קיים לתוך PWA, אם זה עובד על מנוע פופולרי. המבוא של תכונות יישום מתקדמות לפחות לא פוגע באתר. Попробуйте сделать PWA с помощью Gatsby. Благодаря инструкции из статьи вы быстро сделаете современный блог, портфолио или сайт-визитку с функциональностью PWA. Если захотите реализовать прогрессивное приложение в интернет-магазине или на корпоративном сайте, обратитесь к профессиональным разработчикам.

Если во время работы с PWA на WordPRess или Gatsby будут вопросы, пишите в комментариях, будем разбираться.

צפה בסרטון: Richard Dolan and Linda Moulton-Howe Secret Space Program (פברואר 2020).

Loading...

עזוב את ההערה שלך