עידן יצחקימה Progressive Web Apps יכול לתת לנו?
בתצורה הכי בסיסית שלו (שזה מה שנעשה כאן), הוא יאפשר לנו להתקין את האתר שלנו כמו אפליקציה על הטלפון.
היתרונות הם:
- גישה יותר נוחה למשתמש מהטלפון או מהמחשב לאתר שלנו
- אם האתר רספונסיבי אז אין צורך לבנות אפליקציה בנפרד לאתר
- כחלק מהמנגנון, האתר שלנו לאחר התקנה יבצע בדיקות לבד מול האתר שלנו ברשת ואם יש משהו חדש הוא יעדכן את עצמו כך שגם אם נהיה במקום ללא קליטה עדיין המשתמש יוכל לגלוש לאתר שלנו
- אם כבר אמרנו שהאפליקציה מבצעת עדכון לבד מהרשת, זה גם אומר שהאתר יעלה הרבה יותר מהר
יש עוד מספר יתרונות שלא נדון בהם כאן כמו שליחת הודעה למשתמש ב-PUSH, שימוש במצלמה של הטלפון….
בנגולר יש פקודה שמיצרת את הכל ולכן אין צורך ליצור ידנית, ההסבר כאן הוא למי שרוצה ליצר לבד, במידה שאתם לא רוצים ליצור לבד, ניתן לדלג לסוף ולהריץ את הפקודה שכתובה בסוף הפוסט (היא תעשה כמעט את הכל 😎)
ניצור קובץ בספרית SRC בשם manifest.webmanifest אפשר גם בשם manifest.json
{
"name": "my-web-app",
"short_name": "my-app",
"theme_color": "#cbcbcb",
"background_color": "#cdcdcd",
"description": "this is description for your app",
"dir": "ltr",
"lang": "en-US",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}בקובץ הזה אפשר כבר לראות מספר דברים בולטים:
- צריך כ-8 אייקונים עבור גדלים שונים של מסכים, בכל אייקון יש לספק את הגודל שלו, הסוג שלו, המיקום שלו ולטובת אנדרואיד יש לספק גם purpose: maskable any, זה נועד כדי שהמכשיר יעגל פינות או יעגל לגמרי את האייקון.
- יש לציין לפחות אחד מהמאפיינים הבאים: name/short_name. במידה שמספקים את שניהם אז השם הקצר יופיע כאשר מעלים את האפליקציה, בדף הבית. השם הרגיל יופיע כאשר מתקינים את האפליקציה.
- start_url נדרש כדי להודיע לאפליקציה איפה להתחיל כשהיא עולה, אם מסופק מיקום ספציפי אז במקום להתחיל בדף שהמשתמש היה בו אחרון היא תמיד תעלה בדף הספציפי שכתוב.
- background_color קובע את הצבע של האפליקציה כשהיא עולה ולפני שהאתר מופיע.
- display קובע איך המסגרת/חלון של האתר יראה, מקבל fullscreen, standalone, minimal-ui, browser. במקרה שלנו, נשתמש ב-standalone, זה יתן מראה של אפליקציה ללא פס ניווט עליון וללא כפתורים מיותרים מסביב לדף שלנו.
יש עוד מספר פרמטרים, אבל אני חושב שהם די ברורים על פי השם שלהם ולכן לא נתעכב עליהם.
הצעד הבא: להפעיל את הקובץ
במידה שהיינו בפרויקט של דפים סטטים, אז היינו צריכים לקרוא לקובץ בכל דף שאנחנו רוצים לטעון PWA, אבל אנחנו באנגולר ולכן אנחנו צריכים לעשות את הקריאה רק פעם אחת ב-index .
<head>
<meta charset="utf-8">
<title>Webration</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#cbcbcb">
</head>שורה מספר 7 מבצעת את הקריאה לקובץ.
תאימות ל-IOS צריך להוסיף לינקים לאייקונים ב-head
<head>
<meta charset="utf-8">
<title>my-web-app</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="description for the website">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- ios support -->
<link rel="apple-touch-icon" sizes="72x72" href="assets/icons/icon-72x72.png" />
<link rel="apple-touch-icon" sizes="96x96" href="assets/icons/icon-96x96.png" />
<link rel="apple-touch-icon" sizes="128x128" href="assets/icons/icon-128x128.png" />
<link rel="apple-touch-icon" sizes="144x144" href="assets/icons/icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/icon-152x152.png" />
<link rel="apple-touch-icon" sizes="192x192" href="assets/icons/icon-192x192.png" />
<link rel="apple-touch-icon" sizes="384x384" href="assets/icons/icon-384x384.png" />
<link rel="apple-touch-icon" sizes="512x512" href="assets/icons/icon-512x512.png" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#cbcbcb">
</head>כך יראה ה-head לאחר השינוי.
עכשיו להוספה של ה-service worker (ואת כל שאר הדברים שדיברנו עליהם)
על יצירה של SW ידנית נדבר בהזדמנות אחרת.
ביצירה האוטומטית הוא נראה כך:
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
באנגולר זה ממש קל ופשוט (כמו שאנחנו אוהבים, מישהו אחר עשה את העבודה הקשה בשבילנו)
בפרויקט נריץ בטרמינל את הפקודה הבאה:
ng add @angular/pwa --project *project-name*
מה שיקרה הוא:
- ב-assets יתווספו כל האייקונים שדיברנו עליהם (תצטרכו להחליף אותם לשלכם)
- ברמה הכי גבוהה יתווסף קובץ ngsw-config.json שהוא ה-service worker ושם אפשר לעשות מספר שינויים כדי להחליט על זמן העידכון מידע / תדירות וכו'.
- app.module.ts יתעדכן גם הוא ואין צורך לגעת.
- במידה שלא עשיתם קובץ manifest.webmanifest אז גם הוא יופיע בתוך ספריית APP.
- גם ב-INDEX יתווסף הקישור לקובץ.
לבסוף, הייתי ממליץ לאחר עליה של האתר לרשת עם PWA לבדוק שאכן הכל עובד תקין.
יש לגלוש לאתר, ללחוץ על F12, לעבור ללשונית application, בצד ימין אתם תיראו manifast, service worker .
תלחצו עליהם ותבדקו שאין שגיאות או בעיות בצד שמאל.
