מדריך מניפסט אפליקציות אינטרנט
מניפסט של אפליקציית אינטרנט (site.webmanifest) הוא קובץ JSON שאומר לדפדפנים הניתנים להתקנה את שם האפליקציה, הצבעים, מצב התצוגה ובאילו גדלי סמלים להשתמש במסך הבית. קישור זה עם `<link rel='manifest' href='/site.webmanifest'>` מאפשר את הוראת ההתקנה של Chrome ו-Edge PWA במחשב שולחני ו-Android. התאם אותו עם סמלים 192×192 ו-512×512 PNG - שניהם מיוצאים על ידי ה-favicon generator - להגדרה מלאה של PWA favicon.
מניפסט אפליקציית האינטרנט הוא קובץ טקסט JSON המוגש עם סוג MIME `application/manifest+json`. הוא מופיע בכל כתובת אתר שתבחר, אבל הקונבנציה היא /site.webmanifest בשורש הדומיין. אתה מקשר אותו מה-HTML שלך באמצעות `<link rel='manifest' href='/site.webmanifest'>` בתוך האלמנט `<head>`. הדפדפן קורא את המניפסט כאשר הוא בוחן אם להציג בקשת התקנה או כיצד להציג את האפליקציה שלך לאחר ההתקנה.
מערך האייקונים הוא החלק הרלוונטי ביותר ל-favicon במניפסט. כל ערך מציין src (כתובת אתר לתמונה), גדלים (מידות פיקסלים), סוג (סוג MIME), ולחלופין מטרה (או 'כל', 'ניתן למסיכה' או 'כל שניתן למסיכה'). לכל הפחות, ספק 192×192 PNG עבור סמל המשגר ו-512×512 PNG עבור מסך הפתיחה. בלי אלה, Chrome לא יציג בקשת התקנה.
הסמל של 192×192 משמש את Android Chrome במפעיל היישומים, בבורר היישומים האחרונים ובצלת ההתראות כאשר ה-PWA שלך שולח הודעת דחיפה באינטרנט. זה חייב להיות PNG, נגיש בכתובת האתר המוצהרת שלו ללא הפניות מחדש, ומוגש עם כותרות CORS מתאימות אם הוא נמצא בדומיין אחר מהמניפסט שלך. ה-favicon generator מייצא את android-chrome-192x192.png מוכן לשימוש ישיר.
הסמל 512×512 משמש למסך הפתיחה של PWA המוצג בזמן שהאפליקציה נטענת לאחר הפעלת מסך הבית, התצוגה המקדימה של דו-שיח ההתקנה ב-Chrome ו-Edge על שולחן העבודה, ומפעיל האפליקציות Chrome OS. רשומת 512×512 חסרה במניפסט אינה חוסמת את ההתקנה אלא גורמת לסמל דפדפן גנרי במסך הפתיחה. כלול אותו תמיד לחוויית התקנה מלוטשת.
סמלים הניתנים למסיכה הם שיפור ספציפי ל-Android. מערכת הסמלים האדפטיבית Android מיישמת מסכות גיאומטריות (עיגול, סקוורקל, דמעה, מלבן מעוגל) על סמלי האפליקציה, והצורה משתנה בהתאם ליצרן המכשיר. סמל 'כל' סטנדרטי עשוי לקצוץ את הקצוות שלו על ידי המסכות הללו. סמל 'ניתן למסיכה' כולל ריפוד של אזור בטוח - השאר את הגרפיקה החיונית במרכז 80% של התמונה (מעגל האזור הבטוח) - כך שניתן להחיל כל מסכה מבלי לחתוך את הלוגו.
כדי להכריז על סמל הניתן למסיכה במניפסט, הוסף ערך שני באותו גודל עם `'purpose': 'maskable'`: `{ "src": "/android-chrome-512x512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }`. ניתן גם לשלב: `'purpose': 'any maskable'` בכניסה אחת. צור את הסמל הניתן למסיכה שלך עם ריפוד נוסף באמצעות אפשרות הייצוא הניתנת למסיכה של המחולל.
השדות שם ו-short_name שולטים כיצד האפליקציה שלך מסומנת במסך הבית ובמגירת האפליקציות. `name` הוא שם האפליקציה המלא המוצג במהלך בקשת ההתקנה. `short_name` היא התווית מתחת לסמל במסך הבית - שמור אותה מתחת ל-12 תווים כדי למנוע חיתוך במסכים קטנים יותר. שני השדות נדרשים כדי שיופיע בקשת ההתקנה.
השדה theme_color מגדיר את הצבע של שורת הכתובת של הדפדפן ב-Android Chrome כאשר המשתמש מנווט לאתר שלך (לא רק כאשר ה-PWA מותקן). זה גם מגדיר את צבע סרגל הכלים במצב PWA עצמאי. השתמש בצבע המותג הראשי שלך כערך משושה. הוסף '<meta name='theme-color' content='#YOUR_COLOR'>' תואם ב-HTML שלך עבור דפדפנים שאינם קוראים את theme_color של המניפסט.
השדה background_color שולט בצבע הרקע של מסך הפתיחה המוצג בין השקת PWA לבין הצביעה הראשונה של תוכן האפליקציה שלך. הגדר אותו כך שיתאים לרקע האפליקציה שלך (בדרך כלל לבן או צבע המותג הראשי) כדי למנוע הבזק צורם. אם background_color אינו תואם לרקע האפליקציה שלך בפועל, המשתמשים רואים קפיצת צבע במהלך ההפעלה.
שדה התצוגה קובע כיצד ה-PWA יופיע לאחר ההתקנה. `standalone` מסתיר את שורת הכתובת של הדפדפן ואת לחצני הניווט, מה שגורם לאפליקציה להיראות כמו אפליקציה מקורית. `minimal-ui` שומר על סרגל ניווט מינימלי. `fullscreen` מסיר הכל כולל שורת המצב. `browser` מציג את ממשק המשתמש המלא של הדפדפן. עבור רוב ה-XXH4XX, `standalone` היא הבחירה הנכונה. הודעת ההתקנה לא מופיעה אם התצוגה מוגדרת ל-`browser`.
השדה start_url מציין איזו כתובת אתר נפתחת כאשר המשתמש מפעיל את ה-PWA המותקן ממסך הבית. כלול תמיד את זה - בלעדיו, Android פותח את כתובת האתר שבה התגלה המניפסט, שעשוי להיות דף קישור עמוק ולא דף הבית שלך. השתמש ב-`'start_url': '/'` עבור רוב האתרים, או בכתובת URL ספציפית אם האפליקציה שלך צריכה להתחיל במסלול מסוים.
איתור באגים במניפסט הוא פשוט ב-Chrome DevTools. פתח את DevTools (F12), נווט ללשונית Application ולחץ על Manifest בחלונית השמאלית. Chrome מציג תצוגה מנותחת של המניפסט שלך, שגיאות ניתוח כלשהן, כשלי אחזור סמלים ורשימת בדיקה של 'ניתנות להתקנה' שמסבירה מדוע ייתכן שבקשת ההתקנה לא מופיעה. בעיות נפוצות כוללות סמלים לא נמצאו (404), סוג MIME שגוי או סמל חסר של 192×192.
הגשה נכונה של המניפסט דורשת שתי תצורות בצד השרת. ראשית, יש להגיש את הקובץ עם `Content-Type: application/manifest+json`. שנית, אם הסמלים שלך נמצאים ב-CDN או במקור שונה מהמניפסט, תגובות הסמל חייבות לכלול כותרות CORS מתאימות (`Access-Control-Allow-Origin: *` או הדומיין שלך). כותרות CORS חסרות בקבצי אייקונים יגרמו לדפדפן להתייחס למניפסט כלא חוקי.
עבור מסגרות שמייצרות אוטומטית את המניפסט, ודא שהקובץ שנוצר כולל את הגדלים והצבעים האמיתיים של הסמלים שלך. Next.js יוצר מניפסט מיצוא /app/manifest.ts שלך. צור React אפליקציית /public/manifest.json. Vite אינו יוצר מניפסט כברירת מחדל - צור אחד באופן ידני. בכל המקרים, עדכן את מערך הסמלים כדי להתייחס לקובצי הסמלים הממותגים האמיתיים שלך ולא לסמלי ברירת המחדל של מצייני המיקום.
איך זה עובד
- 1
צור אייקונים של 192×192 ו-512×512 PNG
העלה את הלוגו PNG או SVG שלך בגודל 512×512 ל-[favicon generator](tool:favicon-generator). חבילת ההורדה כוללת android-chrome-192x192.png ו-android-chrome-512x512.png מוכנים לשימוש ישיר.
- 2
צור site.webmanifest
צור קובץ JSON עם לפחות: `name`, `short_name`, `icons` (192 ו-512 ערכים), `theme_color`, `background_color` ו-`display: 'standalone'`. חבילת המחולל כוללת תבנית מניפסט מולאה מראש.
- 3
הצג את המניפסט עם סוג MIME הנכון
הגדר את השרת שלך לשרת קובצי .webmanifest עם `Content-Type: application/manifest+json`. ב-Apache, הוסף את `AddType application/manifest+json .webmanifest` ל-.htaccess. ב-Nginx, הוסף את סוג MIME ל-mime.types.
- 4
קשר את המניפסט ב-HTML
הוסף `<link rel='manifest' href='/site.webmanifest'>` בתוך `<head>` שלך. הוסף גם '<meta name='theme-color' content='#YOUR_COLOR'>' עבור דפדפנים שאינם קוראים את ה-manifes theme_color.
- 5
אמת עם Chrome DevTools
פתח את Chrome DevTools > Application > Manifest. אשר שלא מוצגות שגיאות וכל הסמלים נפתרים. בדוק את הסעיף ניתנות להתקנה עבור הקריטריונים המדויקים שנתקיימו או לא מולאו עבור הוראת ההתקנה של PWA.
- 6
בדוק את הודעת ההתקנה
ב-Android Chrome, נווט אל האתר שלך. אם כל הקריטריונים מתקיימים, Chrome מציג באנר התקנה או אפשרות 'הוסף למסך הבית' בתפריט הדפדפן. לאחר ההתקנה, ודא שצבע הרקע של מסך הפתיחה וסמל מסך הבית מוצגים כהלכה.
נסה עכשיו
צור את חבילת הסמלים שלך PWA
מחולל פביקוןשאלות נפוצות
האם נדרש מניפסט של אפליקציית אינטרנט לאתר בסיסי?+
לא - רק אם אתה רוצה את בקשת ההתקנה למסך הבית של PWA ב-Android ובשולחן העבודה Chrome/Edge. favicon.ico לבדו מטפל בכרטיסיות הדפדפן. הוסף את המניפסט כאשר אתה רוצה לאפשר חוויות התקנה עשירות יותר בנייד ובשולחן העבודה.
אילו גדלי אייקונים נכנסים למניפסט של אפליקציית האינטרנט?+
לפחות: 192×192 (משגר Android) ו-512×512 (מסך הפתיחה ותצוגה מקדימה של התקנה). הוסף גרסאות הניתנות למסיכה משני הגדלים לתמיכה בסמלים אדפטיבית של Android, ו-384×384 אם אתה רוצה כיסוי צפיפות נוסף.
מה ההבדל בין theme_color ו-background_color במניפסט?+
theme_color מגדיר את סרגל הכתובות של הדפדפן ואת צבע סרגל הכלים. background_color מגדיר את צבע הרקע של מסך הפתיחה המוצג לפני הצביעה הראשונה של האפליקציה שלך. הגדר את שניהם כך שיתאימו למותג שלך לחוויית התקנה והשקה חלקה.
מדוע Chrome לא מציג בקשת התקנה עבור ה-PWA שלי?+
הסיבות הנפוצות ביותר הן: מניפסט חסר או לא חוקי, חסר סמל 192×192, אייקונים מחזירים 404, מניפסט לא מוגש עם סוג MIME הנכון, או שהאתר לא מוגש ב-HTTPS. השתמש ב-Chrome DevTools > Application > Manifest כדי לראות את הסיבה המדויקת לכשל בהתקנה.
מהו סמל הניתן למסיכה והאם אני צריך אחד?+
אייקון הניתן למסיכה כולל ריפוד באזור בטוח כך ש-Android יכול להחיל מסכות עגולות או מפותלות מבלי לחתוך את הלוגו שלך. אתה צריך אחד כדי שסמל מסך הבית שלך יראה תקין במכשירי Android המשתמשים בצורות סמל לא מרובע. הכריז על זה עם `'purpose': 'maskable'` במערך הסמלים של המניפסט.
האם אוכל להשתמש בסמלים של SVG במניפסט של אפליקציית האינטרנט?+
Chromium תומך ב-SVG בהקשרים מסוימים של סמל מניפסט, אבל PNG הוא ברירת המחדל הבטוחה האוניברסלית עבור ממשקי משתמש להתקנות חוצי דפדפן. כלול תמיד ערכים של PNG 192 ו-512. אתה יכול להוסיף ערך SVG לצידם ללא כל נזק.
איך אני בודק אם המניפסט האינטרנטי שלי חוקי?+
פתח את Chrome DevTools (F12) > יישום > מניפסט. Chrome מציג שגיאות ניתוח, כשלי אחזור סמלים ורשימת בדיקה מלאה להתקנה. תקן את כל הבעיות שדווחו, ולאחר מכן בדוק מחדש את הוראת ההתקנה באמצעות האפשרות 'הוסף למסך הבית' משורת הכתובת של Chrome.