מבוא ליישומי אינטרנט מתקדמים

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

אבל, מה בדיוק ההבדל בין טיפוסי א פרוגרסיבי יישום אינטרנט?

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

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

מה הם יישומי אינטרנט מתקדמים?

פרוגרסיבי Web Apps (או PWA) לנצל את ממשק ה- API של דפדפן האינטרנט כדי ליצור חוויות אפליקציות מקומיות ישירות בדפדפן בכל מכשיר.

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

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

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

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

בואו לצלול לתוך יסודות של פרוגרסיב Web Apps וללמוד מה גורם להם לתקתק.

עובדי שירות

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

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

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

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

אם אתה מקווה לבנות יישום אינטרנט מתקדמת התחל עם ממשק ה- API של Service Worker. פשוט להתעסק עם זה ולהגדיר הדגמה פשוטה מקומית. זה יגדיר את הקרקע מאוחר יותר בניית תכונות יישומים מותאמים אישית ודפים כי כל לרוץ דרך עובדי שירות.

ל מדריכים למתחילים ו קטעי קוד מפורטים, אני ממליץ במפורש למשאבים אלה:

• תחילת העבודה עם עובדי שירות
• תחילת העבודה עם עובדי שירות
• דוגמה של שירות Worker: דוגמה אישית של דף לא מקוון

פגז האפליקציה

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

זה נשאר עם אותו הדבר “האפליקציה המקומית” להרגיש איפה ממשק תמיד נשאר גלוי אבל ה תוכן / פונקציונליות נטען אחרת בכל פעם. עיין בדף זה באתר Google Developers כדי ללמוד עוד קצת על מודל פגז App.

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

בדרך כלל, את הקליפה App יש אלה מרכיבים עיקרייםYou

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

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

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

תמיכה מקוונת ולא מקוונת

רוב היישומים המקומיים לרוץ בסדר בלי אינטרנט. פרוגרסיבי Web Apps נועדו לבצע את אותה התנהגות.

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

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

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

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

דוגמאות חיות

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

אבל, תודה PWA סלעים גלריה, אני כבר אוצר כמה דוגמאות מדהימות כדי להשוויץ מה PWAs באמת יכול לעשות.

1. ממיר מטבע

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

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

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

2. מבטאים באנגלית

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

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

הפנימיים פועלים React / Redux עם Firebase ו חיבור ה- API למפות Google. בהחלט דוגמה מצוינת למשהו פשוט למדי למתחילים ללמוד וללמוד.

3. Pokedex.org

עוד PWA פשוטה למדי זה Pokedex App נוצר על ידי Nolan Lawson. הוא גם פרסם את הקוד הזה בחופשיות על גייתוב, אז זה לנו עוד פרויקט זה שווה לרחרח וללמוד.

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

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

4. Flipkart

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

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

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

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

ללמוד עוד

פרוגרסיבי Web Apps הם פופולרי להפליא ובוודאי יקבל קיטור כמו מפתחים יותר לעבור מעל יליד / היברידית Apps.

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

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

• מדריך למתחילים ליישומי אינטרנט מתקדמים
• בנה את יישום האינטרנט הפרוגרסיבי הראשון שלך עם React
• בניית יישום אינטרנט מתקדמת עם פולימר