Manifest aplikacji internetowej
Napisze Pan/Pani plik manifest.json zawierający name, icons, start_url, display i theme_color, aby przeglądarki wyświetlały monit Dodaj do ekranu głównego.
Manifest aplikacji internetowej to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest PWA?
Progressive Web App to witryna internetowa z możliwościami aplikacji natywnej: można ją zainstalować na ekranie głównym, działa offline i może odbierać powiadomienia push. Trzy podstawowe elementy to Web App Manifest, Service Worker i HTTPS.
Plik manifestu
manifest.json (lub .webmanifest) to plik JSON opisujący metadane aplikacji. Przeglądarki odczytują go, aby włączyć opcję „Dodaj do ekranu głównego” i uruchamiać aplikację podobnie jak natywną.
Podstawowy manifest
Minimalny manifest zawiera name, icons, start_url i tryb display.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}Dołączanie manifestu
Należy dołączyć go w elemencie HTML <head>.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">Tryby display
"display" określa elementy interfejsu okna aplikacji: "standalone" (bez interfejsu przeglądarki, wygląd aplikacji), "fullscreen" (tryb immersyjny, ukrywa pasek stanu), "minimal-ui" (część elementów sterujących przeglądarki), "browser" (zwykła karta).
Ikony — wiele rozmiarów
Należy dostarczyć ikony w wielu rozmiarach. Współczesny Android wymaga rozmiarów 192 i 512, a systemy Apple — dodatkowych rozmiarów. Dla adaptacyjnych ikon Androida należy użyć "purpose": "maskable".
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Tagi charakterystyczne dla Apple
iOS nie obsługuje manifestu w pełni. Należy dodać charakterystyczne dla Apple tagi meta na potrzeby opcji dodawania do ekranu głównego w iOS.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Notes">Monit instalacji
Przeglądarki wywołują zdarzenie beforeinstallprompt, gdy spełnione są kryteria (manifest + service worker + HTTPS + zaangażowanie użytkownika). Można je odroczyć i wywołać z własnego interfejsu.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}Skróty (App Shortcuts)
Manifest może deklarować skróty wyświetlane po dłuższym naciśnięciu ikony zainstalowanej aplikacji.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Kategorie i zrzuty ekranu
Należy dodać categories i screenshots, aby wzbogacić interfejs instalacji w Chrome na Androidzie i w systemie Windows.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]Testowanie manifestu
Należy otworzyć DevTools → Application → Manifest. Chrome wyświetla sparsowane pola manifestu, podglądy ikon i ostrzeżenia (brakujące ikony, niski kontrast itp.).
Frameworki ułatwiają to zadanie
Next.js: należy umieścić manifest.webmanifest w public/. Nuxt: należy zainstalować moduł @vite-pwa/nuxt. Vite: vite-plugin-pwa automatycznie generuje manifest i service worker.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};Szybkie sprawdzenie
Jaka wartość display w Web App Manifest sprawia, że zainstalowana PWA otwiera się bez interfejsu przeglądarki, podobnie jak aplikacja natywna?
Podsumowanie: Web App Manifest
Plik JSON opisujący metadane PWA. Należy uwzględnić name, short_name, start_url, display, theme_color oraz icons (w wielu rozmiarach i z maskable). Manifest należy dołączyć w HTML za pomocą rel=manifest. iOS wymaga charakterystycznych dla Apple tagów meta. Zdarzenie beforeinstallprompt umożliwia utworzenie własnego interfejsu instalacji. shortcuts i screenshots wzbogacają interfejs instalacji. Frameworki (Vite PWA, Next, Nuxt PWA) automatyzują generowanie.
Często zadawane pytania
Czy lekcja „Manifest aplikacji internetowej” jest bezpłatna?
Tak — pełny tekst „Manifest aplikacji internetowej” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Manifest aplikacji internetowej”?
Napisze Pan/Pani plik manifest.json zawierający name, icons, start_url, display i theme_color, aby przeglądarki wyświetlały monit Dodaj do ekranu głównego. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Manifest aplikacji internetowej”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Manifest aplikacji internetowej
- Rejestracja i cykl życia Service Workera
- Strategie buforowania offline: CacheFirst i NetworkFirst
- Powiadomienia push