PWACompat – המניפסט של אפליקציית האינטרנט לכל הדפדפנים

תכנתם אפליקציית אינטרנט, כתבתם את הקוד ואת קובץ השירות (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 (פתיחה ללא דפדפן Chrome) מוגדרת למצבי תצוגה standalone, fullscreen או minimal-ui
• יוצרות apple-touch-icon תמונות ומוסיף את רקע המניפסט לסמלים שקופים: אחרת, מערכת iOS מעבדת את השקיפות כשחור
• יוצר תמונות פתיחה דינמיות, שתואמות כמעט לתמונות הפתיחה שנוצרו לדפדפנים מבוססי Chromium

אם תרצו לתרום עוד תוכן או לעזור בתמיכה נוספת בדפדפן, PWACompat נמצא ב-GitHub.

אני רוצה לנסות

PWACompat זמין עכשיו ב-Airhorer, ב-v8.dev וב-Emojityper. ה-HTML של כותרת האתר יכול להיות פשוט: פשוט ציינו את המניפסט ותנו ל-PWACompat לטפל בכל השאר.

📢🤣🎉