אתה מפעיל PWA, אבל הדפדפן לא מציע התקנה? בדוק את הקונסולה: ככל הנראה שגיאת manifest. הגדרת ה-Web App Manifest נראית כמו פרט קטן, אבל ב-80% מהמקרים היא חוסמת את אירוע beforeinstallprompt. ראינו פרויקטים שבהם חסרו אייקוני maskable, display_override היה שגוי, או ששכחו תגי iOS. כתוצאה מכך, משתמשים לא מקבלים את הסמל על מסך הבית, וההמרה יורדת ב-30–40%. בואו נפרק איך להפוך את האפליקציה שלכם לניתנת להתקנה באנדרואיד, iOS ושולחן העבודה ללא מורכבות מיותרת.
למה משתמשים לא רואים את כפתור ההתקנה
סיבות נפוצות: manifest חסר, JSON לא תקין, אייקונים לא מתאימים (גודל או סוג), display שגוי (לדוגמה, browser במקום standalone), אין Service Worker, אין HTTPS. אבל לרוב, האייקונים לא עומדים בדרישות: אנדרואיד דורש אייקוני maskable עם purpose: maskable, ו-iOS דורש apple-touch-icon. בלעדיהם, הדפדפן פשוט לא יציע התקנה. אנחנו ממפים את השגיאות ומספקים פתרונות מוכנים.
manifest.json מלא
{
"name": "ТехноМагазин — купить электронику онлайн",
"short_name": "ТехноМагазин",
"description": "Смартфоны, ноутбуки, аксессуары. Быстрая доставка по России.",
"start_url": "/?utm_source=pwa&utm_medium=manifest",
"scope": "/",
"display": "standalone",
"display_override": ["window-controls-overlay", "standalone"],
"orientation": "any",
"theme_color": "#1a73e8",
"background_color": "#ffffff",
"lang": "ru",
"dir": "ltr",
"categories": ["shopping", "lifestyle"],
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-192-maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"screenshots": [
{
"src": "/screenshots/catalog-mobile.webp",
"sizes": "390x844",
"type": "image/webp",
"form_factor": "narrow",
"label": "Каталог товаров"
},
{
"src": "/screenshots/product-mobile.webp",
"sizes": "390x844",
"type": "image/webp",
"form_factor": "narrow",
"label": "Карточка товара"
},
{
"src": "/screenshots/catalog-desktop.webp",
"sizes": "1280x800",
"type": "image/webp",
"form_factor": "wide",
"label": "Каталог — десктоп"
}
],
"shortcuts": [
{
"name": "Корзина",
"short_name": "Корзина",
"url": "/cart?utm_source=pwa",
"icons": [
{
"src": "/icons/cart-96.png",
"sizes": "96x96",
"type": "image/png"
}
]
},
{
"name": "Поиск",
"short_name": "Поиск",
"url": "/search?utm_source=pwa",
"icons": [
{
"src": "/icons/search-96.png",
"sizes": "96x96",
"type": "image/png"
}
]
}
],
"protocol_handlers": [
{
"protocol": "web+technoshop",
"url": "/products?q=%s"
}
]
}קישור ב-HTML
<head>
<link rel="manifest" href="/manifest.json">
<!-- iOS — Safari не читает manifest для этих параметров -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="ТехноМагазин">
<!-- iOS иконки -->
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120.png">
<!-- Splash screens iOS (опционально) -->
<link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px)" href="/splashscreens/iphone12.png">
<!-- Windows tile -->
<meta name="msapplication-TileColor" content="#1a73e8">
<meta name="msapplication-TileImage" content="/icons/icon-144.png">
<meta name="theme-color" content="#1a73e8">
</head>השוואת תמיכה בין אנדרואיד ל-iOS
| שדה Manifest | אנדרואיד (Chrome) | iOS (Safari) |
|---|---|---|
{ "name": "ТехноМагазин — купить электронику онлайн", "short_name": "ТехноМагазин", "description": "Смартфоны, ноутбуки, аксессуары. Быстрая доставка по России.", "start_url": "/?utm_source=pwa&utm_medium=manifest", "scope": "/", "display": "standalone", "display_override": ["window-controls-overlay", "standalone"], "orientation": "any", "theme_color": "#1a73e8", "background_color": "#ffffff", "lang": "ru", "dir": "ltr", "categories": ["shopping", "lifestyle"], "icons": [ { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-192-maskable.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ], "screenshots": [ { "src": "/screenshots/catalog-mobile.webp", "sizes": "390x844", "type": "image/webp", "form_factor": "narrow", "label": "Каталог товаров" }, { "src": "/screenshots/product-mobile.webp", "sizes": "390x844", "type": "image/webp", "form_factor": "narrow", "label": "Карточка товара" }, { "src": "/screenshots/catalog-desktop.webp", "sizes": "1280x800", "type": "image/webp", "form_factor": "wide", "label": "Каталог — десктоп" } ], "shortcuts": [ { "name": "Корзина", "short_name": "Корзина", "url": "/cart?utm_source=pwa", "icons": [{ "src": "/icons/cart-96.png", "sizes": "96x96", "type": "image/png" }] }, { "name": "Поиск", "short_name": "Поиск", "url": "/search?utm_source=pwa", "icons": [{ "src": "/icons/search-96.png", "sizes": "96x96", "type": "image/png" }] } ], "protocol_handlers": [ { "protocol": "web+technoshop", "url": "/products?q=%s" } ] } | נתמך (standalone, fullscreen) | לא נשקל |
<head> <link rel="manifest" href="/manifest.json"> <!-- iOS — Safari не читает manifest для этих параметров --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-title" content="ТехноМагазин"> <!-- iOS иконки --> <link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png"> <link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152.png"> <link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120.png"> <!-- Splash screens iOS (опционально) --> <link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px)" href="/splashscreens/iphone12.png"> <!-- Windows tile --> <meta name="msapplication-TileColor" content="#1a73e8"> <meta name="msapplication-TileImage" content="/icons/icon-144.png"> <meta name="theme-color" content="#1a73e8"> </head> | כל הגדלים נתמכים | רק apple-touch-icon |
display | נתמך | לא נתמך |
icons | נתמך (להתקנה) | לא נתמך |
shortcuts | נתמך | לא נשקל |
מצבי תצוגה
| ערך | תיאור |
|---|---|
screenshots | כרטיסיית דפדפן רגילה |
scope | אלמנטי ניווט מינימליים |
browser | ללא שורת כתובת, כמו אפליקציה מקורית |
minimal-ui | מסך מלא ללא ממשק דפדפן |
standalone הוא מערך עם עדיפות: הדפדפן בוחר את הערך הראשון שנתמך. fullscreen מספק שורת כותרת מותאמת אישית עבור PWA לשולחן העבודה.
אייקון Maskable
אייקון maskable מתאים לצורת המכשיר (עיגול, ריבוע, squircle). התוכן חייב להיות בתוך אזור הבטיחות — עיגול מרכזי עם רדיוס של 80% מהגודל. אנחנו משתמשים בספריית sharp כדי ליצור אייקונים כאלה עם ריפוד נכון. ללא maskable, האייקון עלול להיחתך באנדרואיד וב-Windows, מה שיהרוס את תפיסת המשתמש בזמן ההתקנה.
איך לבדוק אייקון maskable
העלה את האייקון ל-maskable.app — הוא יראה איך הוא נראה במכשירים שונים. אם התוכן חורג מאזור הבטיחות, הגדל את הריפוד.Manifest דינמי לאתרים רב-לשוניים
// routes/web.php
Route::get('/manifest.json', [ManifestController::class, 'index']);
// ManifestController.php
public function index(Request $request): JsonResponse
{
$locale = app()->getLocale();
$manifest = [
'name' => __('pwa.name'),
'short_name' => __('pwa.short_name'),
'description' => __('pwa.description'),
'start_url' => "/?lang={$locale}&utm_source=pwa",
'lang' => $locale,
'theme_color' => '#1a73e8',
'background_color' => '#ffffff',
'display' => 'standalone',
'scope' => '/',
'icons' => $this->getIcons(),
'shortcuts' => $this->getShortcuts($locale),
];
return response()->json($manifest)
->header('Content-Type', 'application/manifest+json');
}אימות
- Chrome DevTools → Application → Manifest — בדוק את כל השדות, האייקונים וההתקנות
- Lighthouse → PWA — ודא את כל הדרישות
- PWABuilder — ביקורת מלאה ויצירת חבילות עבור App Store
השתמש בתיעוד MDN להתייחסות למפרט.
לפי מפרט W3C, Web App Manifest הוא התקן להגדרת מראה PWA במכשירים.
למה Manifest לא עובד ב-iOS?
Safari מתעלם משדה display_override ומכמה אחרים. הפתרון הוא להוסיף את תגי ה-meta ו-apple-touch-icon כפי שמופיע למעלה. בלעדיהם, ה-PWA באייפון נפתח ב-Safari, לא כאפליקציה עצמאית. כמו כן, ודא שwindow-controls-overlay תקין ומצביע על דף HTTPS.
איך לוודא תקינות Manifest לפני פריסה?
אנחנו משתמשים בשלושה כלים: Chrome DevTools לבדיקות מהירות, Lighthouse לביקורת PWA מלאה, ו-PWABuilder לאימות סופי. PWABuilder גם יוצר חבילות עבור Google Play ו-App Store אם צריך לפרסם את ה-PWA בחנויות אפליקציות. מניסיוננו, כ-80% מבעיות ההתקנה נפתרות עם manifest תקין.
מה כלול
- ביקורת manifest קיים (אם יש)
- יצירת כל גדלי האייקונים, כולל maskable (192, 512, 96, 144, 180)
- הגדרת
// routes/web.php Route::get('/manifest.json', [ManifestController::class, 'index']); // ManifestController.php public function index(Request $request): JsonResponse { $locale = app()->getLocale(); $manifest = [ 'name' => __('pwa.name'), 'short_name' => __('pwa.short_name'), 'description' => __('pwa.description'), 'start_url' => "/?lang={$locale}&utm_source=pwa", 'lang' => $locale, 'theme_color' => '#1a73e8', 'background_color' => '#ffffff', 'display' => 'standalone', 'scope' => '/', 'icons' => $this->getIcons(), 'shortcuts' => $this->getShortcuts($locale), ]; return response()->json($manifest) ->header('Content-Type', 'application/manifest+json'); }ו-displayלמכשירים שונים - סימון תגי meta עבור iOS ו-Windows
- אימות דרך Lighthouse ו-PWABuilder
- מסירת manifest.json מוכן ותיעוד עדכון
התהליך שלנו
- ניתוח דרישות (קהל, מכשירים, תמיכה רב-לשונית)
- עיצוב manifest (מערך שדות, מבנה אייקונים)
- יישום (יצירת אייקונים, כתיבת manifest, שילוב HTML)
- בדיקה על מכשירים אמיתיים (אנדרואיד, iOS, Windows)
- פריסה וניטור התקנות
לוחות זמנים משוערים
הגדרה בסיסית: בין 4 ל-8 שעות. פרויקטים מורכבים עם תמיכה רב-לשונית והרבה אייקונים: עד יומיים עסקיים. העלות נקבעת באופן אישי — תלויה במספר הלוקליזציות ובצרכי שילוב CMS. הזמינו מאיתנו הגדרת PWA manifest — קבלו JSON מוכן ואייקונים תוך 4 שעות. צרו קשר כדי לדון בפרויקט שלכם ולקבל הערכה ראשונית — נסביר איך לייעל התקנה ולהגביר המרה.
למהנדסים שלנו יש ניסיון של 5+ שנים ב-PWA, הסמכות בביצועי web, ויותר מ-50 פרויקטים שהושלמו.