PWAs: ברוכים הבאים למהפכת המובייל

תוֹכֶן

• העלייה ב- PWA
• PWAs פועלים היום
• הַתקָנָה
• לא מקוון והשקה מיידית
• חוויה מהשורה הראשונה
• חנויות אפליקציות
• שילוב פלטפורמה
• אתגרי עיצוב ו- UX
• שנת ה- PWA

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

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

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

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

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

העלייה ב- PWA

בעוד שהשם PWA נטבע בשנת 2015 במאמר Escaping Tabs בלי לאבד את הנשמה מאת אלכס ראסל שעבד בגוגל עבור צוות Chrome, המסע שלהם לא התחיל ממש שם. פעם היו לנו יישומי HTML (HTA), שנוצרו על ידי מיקרוסופט בשנת 1999, יחד עם פלטפורמות יישומי אינטרנט רבות אחרות של נוקיה, בלקברי וחברות אחרות. ואז, בשנת 2007, סטיב ג'ובס הציג את מה שהייתה בזמנו הדרך היחידה ליצור אפליקציות לאייפון המקורי: PWA, אם כי עם שם אחר. Chrome התחיל משם, שיפר את ממשקי ה- API כמה שנים מאוחר יותר והמציא את שם ה- PWA.

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

PWAs פועלים היום

כיום PWAs הם פונקציונליים לחלוטין וניתנים להתקנה ב:

• Android עם רוב הדפדפנים, כאשר Chrome מציע את החוויה הטובה ביותר
• iOS עם Safari
• מחשבי Chromebook
• חלונות 10 מחנות מיקרוסופט
• טלפונים נבחרים עם KaiOS - מזלג מבית מערכת ההפעלה של Firefox - זמינים כיום למיליוני משתמשים בעיקר בהודו

התמיכה מגיעה גם ל- MacOS, Windows ו- Linux דרך Chrome בהמשך השנה. זה זמין היום כדגל ניסיוני 'Desktop PWA' אם אתה רוצה לנסות את זה עכשיו. ההתקנה ב- Windows on Edge ללא השימוש בחנות מגיעה גם היא מאוחר יותר, אם כי לא מוגדר מסגרת זמן ספציפית.

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

כמו כן, PWAs מיוצרים כרגע מרוב ה- CLI למסגרות שונות, כולל Angular 6+ CLI, React Create App, PWA Starter Kit מ- Polymer ו- Preact CLI. לבסוף, צוות Ionic Framework העלה את הרעיון של Capacitor, תחליף מקור פתוח של Cordova המאפשר PWA מקומי בכל חנות אפליקציות.

הַתקָנָה

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

לא מקוון והשקה מיידית

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

על מנת להתקין עובד שירות, מסמך ה- HTML שלך יצטרך לכלול משהו כמו:

אם ('serviceWorker' בנווט) navigator.serviceWorker.register ("sw.js");

זה יתקין את הקובץ "sw.js" בהתקני המשתמשים עבור התיקיה הנוכחית בתחום הנוכחי - מושג המכונה היקף. לאחר התקנתו, הביקורים הבאים בכתובת אתר כלשהי בתחומה ינוהלו על ידי אותו עובד שירות.

נניח שיש לנו PWA עם ארבעה קבצים: index.html, app.js, app.css ו- logo.png. הדבר הראשון הוא להתקין קבצים אלה במטמון בקובץ sw.js.

משאבי const = ["index.html", "app.js", "app.css", "logo.png"]; עצמי. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). ואז (cache => cache.addAll (resources)));});

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

self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). ואז (res => res);

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

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

שים לב שקבצי ה- PWA שלך יימחקו אם יש לחץ על האחסון על המכשיר, אלא אם כן אתה מבקש אחסון קבוע אם זמין:

אם ('אחסון' בנווט && 'נמשך' ב- navigator.storage) navigator.storage.persist ();

בדפדפני Chrome וברוב דפדפני Android, האפליקציה שלך אינה מסוגלת להשתמש ביותר מחמישה אחוז מהשטח הזמין; ב- iOS מדובר על 50MiB (קרוב ל- 50MB) למארח בלבד; ב- Edge זה משתנה בהתאם לגודל הזיכרון הכולל וב- Windows Store, זה בלתי מוגבל.

חוויה מהשורה הראשונה

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

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

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

ישנם כמה מחוללי מניפסט, כגון Generator Web App Manifest או PWA Builder, אשר ישנהו את גודל הסמל עבורך ברזולוציות שונות אם אתה מספק רזולוציה גבוהה (מינימום 512 פיקסלים).

כאשר מקושרים את קובץ המניפסט במסמך ה- HTML שלך, המשתמשים יוכלו להתקין את האפליקציה בטכניקות שונות בהתאם לדפדפן, הנקרא בדרך כלל הוסף למסך הבית, התקן או פשוט הוסף. אם ה- BWA שלך ניתן לסריקה על ידי בינג, מיקרוסופט תוסיף אותו באופן אוטומטי לחנות Microsoft כך שמשתמשי Windows 10 יוכלו להתקין אותו משם.

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

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

window.addEventListener ("beforeinstallpr ompt", פונקציה (e) {e.prompt (); // יציג הנחיה מקורית להתקנה})

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

חנויות אפליקציות

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

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

ישנם כמה PWA שכבר פורסמו בחנות Google Play, כגון Twitter Lite ו- Google Maps Go, כרגע תחת יישומים מותאמים אישית. Chrome יציע פתרון מ- Chrome 68 באמצעות פעילויות אינטרנט מהימנות. מאותה נקודה נוכל ליצור חבילת אנדרואיד (APK) עם משגר ל- PWA שלנו ולהעלות אותה לחנות. עבור חנות מיקרוסופט ב- Windows 10, האתר PWA Builder עוזר בימים אלה לייצור חבילת APPX Windows 10. באמצעות תצוגת אינטרנט, ייתכן שתוכל ליצור ידנית אפליקציית iOS עבור חנות האפליקציות, אך היזהר מאוד בכללי החנות.

שילוב פלטפורמה

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

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

לבסוף, בעת יצירת PWAs מקוריים המתפרסמים בחנות באמצעות Capacitor או ל- Microsoft Store, נוכל לגשר על ממשקי API מקומיים שיאפשרו לנו לבצע כמעט כל קוד מקורי. שילוב זה עם Windows 10 כולל גישה לחומרה אך גם שילוב עם מערכת ההפעלה, ומציע אפשרויות כגון Pin to Start. לדוגמה, ה- PWA של Twitter מאפשר לך להצמיד כל משתמש למסך הפתיחה שלך.

אתגרי עיצוב ו- UX

לתכנון PWAs יש אתגרים ייחודיים, לכן חשוב להקדיש זמן למחקר, בדיקה ככל האפשר ושקילת הדברים הבאים:

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

שנת ה- PWA

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

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