אפליקציות מסוג Progressive Web App למחשב

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

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

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

איך מוודאים שאפשר להתקין את האפליקציה

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

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

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

הערה לגבי עבודה במצב אופליין

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

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

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

הוספת אפשרות לגעת

כמעט כל מכשירי ChromeOS תומכים במגע, ורבים מהם תומכים גם בעטים אלקטרוניים. לכן, אתם צריכים לוודא שהאפליקציה שלכם פועלת בצורה חלקה עם שתי שיטות הקלט האלה, בנוסף למקלדת ולעכבר הרגילים. ממשק ה-API של אירועי הצבעה נועד בדיוק למטרה הזו. יש אירועים בסיסיים שקשורים למצביע, שסביר להניח שלא תצטרכו לשנות, כמו אירועים מסוג click. אירועים אחרים, כמו mouseup או touchstart, צריכים להיות מועברים לאירועי המצביע המקבילים שלהם כדי שהם יפעלו בצורה חלקה בכל סוג של מצביע. אם רוצים, אפשר גם לנהל בנפרד סוגים שונים של קלט. באפליקציות ובמשחקים שמסתמכים במידה רבה על קלט משתמש מבוסס-מגע, המעבר ל-Pointer Events API ישפר משמעותית את חוויית השימוש במכשירי ChromeOS.

ציור חלק באינטרנט

אם אתם מפתחים אפליקציה שבה המשתמשים מציירים באמצעות האצבעות או עטים אלקטרוניים, בעבר היה קשה לשמור על זמן אחזור מהיר מספיק בין הקלט של המשתמשים לבין הפלט שלכם, כדי שהתנועה תהיה חלקה. כשמפתחים אפליקציות כאלה ל-ChromeOS שמבוססות על Canvas API, מומלץ להשתמש ברמז desynchronized עבור canvas.getContext() כדי לספק עיבוד עם זמן אחזור נמוך. כדי להשתמש ברמז desynchronized בלוח ציור: 

const canvas = document.createElement('canvas'); // or select one from the DOM
const ctx = canvas.getContext('2d', {
  desynchronized: true,
  // Other options here…
});

if (ctx.getContextAttributes().desynchronized) {
  // Low-latency supported! Do something awesome with it.
} else {
  // Low-latency not supported! Fall back to less awesome stuff
}

שיקולים בתכנון למסכי מגע

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

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

להפוך אותו ליעיל

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

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