עיצבתם אפליקציית אינטרנט, כתבתם את הקוד ואת קובץ השירות (service worker) ולבסוף הוספתם את מניפסט של אפליקציית אינטרנט שמתארת איך היא צריכה להתנהג כאשר 'מותקן' במכשיר של משתמש. המידע הזה כולל סמלים ברזולוציה גבוהה לשימוש, למשל במרכז האפליקציות או במעבר בין האפליקציות בטלפון הנייד, או איך אפליקציית האינטרנט אמורה להתחיל כשהיא נפתחת ממסך הבית של המשתמש.
הרבה דפדפנים יכבדו את המניפסט של אפליקציות האינטרנט, אבל לא כל דפדפן יטען או יכבד אותו
כל ערך שתציינו. מזינים PWACompat,
הספרייה שלוקחת את המניפסט של אפליקציית האינטרנט ומוסיפה באופן אוטומטי תגי meta או link רלוונטיים
עבור סמלים בגדלים שונים, סמל האתר, מצב ההפעלה, צבעים וכו'.
המשמעות היא שאין יותר צורך להוסיף לדפים מספר עצום של תגים רגילים ולא רגילים (כמו <link rel="icon" ... /> או <meta name="orientation" ... />). בנוסף, לאפליקציות במסך הבית של iOS, הכלי PWACompat ייצור באופן דינמי אפילו מסכי פתיחה, כך שלא תצטרכו ליצור מסך פתיחה לכל גודל מסך.
שימוש ב-PWACompat
כדי להשתמש ב-PWACompat, חשוב לקשר לכל הדפים למניפסט של אפליקציית האינטרנט:
<link rel="manifest" href="manifest.webmanifest" />
לאחר מכן, כוללים את הסקריפט הזה או מוסיפים אותו לחבילה שנטענת באופן אסינכרוני:
<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>
הספרייה PWACompat תאחזר את קובץ המניפסט ותבצע את הפעולות הנדרשות בדפדפן של המשתמש, בין אם הוא משתמש במכשיר נייד ובין אם במחשב.
עדיין מומלץ להוסיף לפחות סמל אחד של קיצור דרך באיכות גבוהה, כדי להוסיף לאינדקס חיפוש:
<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />
מידע נוסף זמין בשיטות המומלצות.
<script type="module">
// detect iOS Safari
if (('standalone' in navigator) && (!navigator.standalone)) {
import('https://unpkg.com/pwacompat');
}
</script>
מעמיק
בדפדפנים נתמכים, מה PWACompat עושה בפועל? ה-PWACompat יטען את המניפסט של אפליקציית האינטרנט ו:
- יצירת תגי מטא של סמלים לכל הסמלים במניפסט (למשל, עבור סמל אתר, דפדפנים ישנים יותר)
- ליצור מטא תגים חלופיים לדפדפנים שונים (למשל iOS, WebKit/Chromium forks וכו') שמתארים איך אפליקציית אינטרנט צריכה להיפתח
- מגדיר את צבע העיצוב על סמך המניפסט
ב-Safari, PWACompat:
- מגדיר את הערך
apple-mobile-web-app-capable(פתיחה ללא מסגרת דפדפן) למצבי תצוגהstandalone,fullscreenאוminimal-ui - יצירת קובצי
apple-touch-icon, הוספת הרקע של המניפסט לסמלים שקופים: אחרת, iOS ידפיס את השקיפות בשחור - יצירת תמונות דינמיות של מודעות הפתיחה, שדומות מאוד לתמונות הפתיחה שנוצרות לדפדפנים שמבוססים על Chromium
אם ברצונך להוסיף תוכן או לעזור בתמיכה נוספת בדפדפן, PWACompat נמצאת ב-GitHub.
רוצה לנסות?
PWACompat זמינה ב-Airhooer, ב-v8.dev וב- אמוג'י. ה-HTML של הכותרת באתרים יכול להיות פשוט: פשוט מציינים את המניפסט ומאפשרים ל-PWACompat לטפל בשאר.
📢🤣🎉