דפדפנים רבים מאפשרים להפעיל ולקדם את ההתקנה של Progressive Web App (PWA) ישירות בממשק המשתמש. ההתקנה (שנקראה בעבר 'הוספה למסך הבית') מאפשרת למשתמשים להתקין את אפליקציית ה-PWA בנייד או במחשב. כשמתקינים אפליקציית PWA, היא מתווספת למרכז האפליקציות של המשתמש, כך שניתן להפעיל אותה כמו כל אפליקציה מותקנת אחרת.
בנוסף לחוויית ההתקנה שמסופקת על ידי הדפדפן, אתם יכולים לספק תהליך התקנה מותאם אישית ישירות בתוך האפליקציה.
כאשר שוקלים אם לקדם את ההתקנה, חשוב להביא בחשבון את האופן שבו המשתמשים בדרך כלל
להשתמש ב-PWA. לדוגמה, אם קבוצה של משתמשים משתמשת ב-PWA שלכם,
פעמים בשבוע, המשתמשים האלה יכולים להפיק תועלת מהנוחות הנוספת
להפעיל את האפליקציה ממסך הבית של הטלפון או מתפריט ההתחלה במחשב
מערכת ההפעלה. גם אפליקציות מסוימות לפרודוקטיביות ובידור מועילה
משטח המסך הנוסף שנוצר על ידי הסרת סרגלי הכלים של הדפדפן
חלון במצב standalone, minimal-ui או window-control-overlay שהותקנו.
דרישות מוקדמות
לפני שמתחילים, חשוב לוודא שהאפליקציה ל-PWA עומדת בדרישות להתקנה, שבדרך כלל כוללות מניפסט של אפליקציית אינטרנט.
קידום ההתקנה
כדי להראות שניתן להתקין את Progressive Web App וכדי לספק תהליך ההתקנה בתוך האפליקציה:
- מקשיב לאירוע
beforeinstallprompt. - שומרים את האירוע
beforeinstallpromptכדי שיוכל להפעיל את תהליך ההתקנה מאוחר יותר. - צריך להודיע למשתמש שאפשר להתקין את ה-PWA, ולספק לחצן או רכיב אחר כדי להתחיל את תהליך ההתקנה באפליקציה.
האזנה לאירוע beforeinstallprompt
אם ה-Progressive Web App שלכם עומדת בקריטריונים להתקנה הנדרשים,
הדפדפן מפעיל אירוע beforeinstallprompt. שומרים הפניה לאירוע ומעדכנים את ממשק המשתמש כדי לציין שהמשתמש יכול להתקין את אפליקציית ה-PWA.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
תהליך ההתקנה באפליקציה
כדי לספק התקנה מתוך האפליקציה, יש לספק לחצן או רכיב אחר בממשק
שהמשתמשים יכולים ללחוץ או להקיש עליהם כדי להתקין את האפליקציה. כשלוחצים על האלמנט או
הקשת, התקשרת אל prompt() באירוע beforeinstallprompt השמור (ששמור ב
משתנה deferredPrompt). מוצגת למשתמש תיבת דו-שיח להתקנה של חלון,
אותו כדי לאשר שהוא רוצה להתקין את ה-PWA שלכם.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
המאפיין userChoice הוא הבטחה שמתמלאת לפי הבחירה של המשתמש.
אפשר להפעיל את prompt() באירוע שנדחה רק פעם אחת. אם המשתמש
ההצעה תידחה, יהיה עליך לחכות עד לאירוע beforeinstallprompt
מופעלת שוב, בדרך כלל מיד אחרי הנכס userChoice
הבעיה נפתרה.
זיהוי של מקרים שבהם אפליקציית ה-PWA הותקנה בהצלחה
אפשר להשתמש במאפיין userChoice כדי לקבוע אם המשתמש התקין את האפליקציה דרך ממשק המשתמש שלכם. עם זאת, אם המשתמש מתקין את אפליקציית ה-PWA שלכם מסרגל הכתובות או מרכיב אחר בדפדפן, userChoice לא יעזור.
במקום זאת, כדאי להאזין לאירוע appinstalled, שמופעל בכל פעם שהאפליקציה לנייד מותקנת, ללא קשר למנגנון שבו נעשה שימוש כדי להתקין אותה.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
זיהוי האופן שבו אפליקציית ה-PWA הושקה
שאילתת המדיה display-mode של CSS מציינת איך ה-PWA הושקה,
כרטיסייה בדפדפן או כ-PWA מותקנת. כך אפשר להחיל סגנונות שונים בהתאם לאופן שבו האפליקציה הושקה. לדוגמה, אפשר להגדיר אותו
כדי להסתיר תמיד את לחצן ההתקנה ולספק לחצן 'הקודם' כאשר הוא מופעל
מותקנת PWA.
מעקב אחרי אופן ההשקה של אפליקציית ה-PWA
כדי לעקוב אחרי האופן שבו המשתמשים מפעילים את ה-PWA, צריך להשתמש ב-matchMedia() כדי לבדוק את
שאילתת מדיה display-mode.
function getPWADisplayMode() {
if (document.referrer.startsWith('android-app://'))
return 'twa';
if (window.matchMedia('(display-mode: browser)').matches)
return 'browser';
if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
return 'standalone';
if (window.matchMedia('(display-mode: minimal-ui)').matches)
return 'minimal-ui';
if (window.matchMedia('(display-mode: fullscreen)').matches)
return 'fullscreen';
if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
return 'window-controls-overlay';
return 'unknown';
}
מעקב אחרי השינויים במצב התצוגה
כדי לעקוב אחרי המעבר של המשתמש בין browser לבין מצבי תצוגה אחרים, צריך להאזין לשינויים בשאילתת המדיה display-mode.
// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});
עדכון ממשק המשתמש על סמך מצב התצוגה הנוכחי
כדי להחיל צבע רקע אחר של PWA כשהיא מופעלת כהתקנה PWA, שימוש ב-CSS מותנה:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
עדכון השם והסמל של האפליקציה
מה קורה אם צריך לעדכן את שם האפליקציה או לספק סמלים חדשים? במאמר איך Chrome מטפל בעדכונים למניפסט של אפליקציות אינטרנט מוסבר מתי ואיך השינויים האלה משתקפים ב-Chrome.