Panduan Manifes Apl Web
Manifes apl web (site.webmanifest) ialah fail JSON yang memberitahu penyemak imbas boleh dipasang nama, warna, mod paparan anda dan saiz ikon yang hendak digunakan pada skrin utama. Memautkannya dengan `<link rel='manifest' href='/site.webmanifest'>` membolehkan gesaan pemasangan Chrome dan Edge PWA pada desktop dan Android. Gandingkannya dengan ikon 192×192 dan 512×512 PNG — kedua-duanya dieksport oleh favicon generator — untuk persediaan favicon PWA yang lengkap.
Manifes apl web ialah fail teks JSON yang disajikan dengan jenis MIME `application/manifest+json`. Ia hidup di mana-mana URL yang anda pilih, tetapi konvensyennya adalah /site.webmanifest pada akar domain. Anda memautkannya daripada HTML anda menggunakan `<link rel='manifest' href='/site.webmanifest'>` di dalam elemen `<head>`. Penyemak imbas membaca manifes apabila ia menilai sama ada untuk menunjukkan gesaan pemasangan atau cara untuk memaparkan apl anda selepas pemasangan.
Tatasusunan ikon ialah bahagian paling favicon-relevan dalam manifes. Setiap entri menentukan src (URL kepada imej), saiz (dimensi piksel), jenis (jenis MIME) dan tujuan pilihan (sama ada 'mana-mana', 'bertopeng' atau 'sebarang topeng'). Sekurang-kurangnya, sediakan 192×192 PNG untuk ikon pelancar dan 512×512 PNG untuk skrin percikan. Tanpa ini, Chrome tidak akan menunjukkan gesaan pemasangan.
Ikon 192×192 digunakan oleh Android Chrome dalam pelancar apl, penukar apl terbaharu dan lorek pemberitahuan apabila PWA anda menghantar pemberitahuan tolak web. Ia mestilah PNG, boleh diakses di URL yang diisytiharkan tanpa ubah hala dan disajikan dengan pengepala CORS yang betul jika ia berada pada domain yang berbeza daripada manifes anda. favicon generator mengeksport android-chrome-192x192.png sedia untuk digunakan terus.
Ikon 512×512 digunakan untuk skrin percikan PWA yang ditunjukkan semasa apl dimuatkan selepas pelancaran skrin utama, pratonton dialog pemasangan dalam Chrome dan Edge pada desktop dan pelancar apl OS Chrome. Entri 512×512 yang hilang dalam manifes tidak menyekat pemasangan tetapi menghasilkan ikon penyemak imbas generik pada skrin percikan. Sentiasa sertakan untuk pengalaman pemasangan yang digilap.
Ikon boleh bertopeng ialah peningkatan khusus Android. Sistem ikon penyesuaian Android menggunakan topeng geometri (bulatan, tupai, titisan air mata, segi empat tepat bulat) pada ikon apl dan bentuknya berbeza mengikut pengeluar peranti. Ikon 'mana-mana' standard mungkin digunting tepinya oleh topeng ini. Ikon 'bertopeng' termasuk pelapik zon selamat — pastikan karya seni penting berada di tengah-tengah imej 80% (bulatan zon selamat) — supaya sebarang topeng boleh digunakan tanpa memotong logo.
Untuk mengisytiharkan ikon boleh bertopeng dalam manifes, tambahkan entri kedua untuk saiz yang sama dengan `'purpose': 'maskable'`: `{ "src": "/android-chrome-512x512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }`. Anda juga boleh menggabungkan: `'purpose': 'any maskable'` pada satu entri. Hasilkan ikon bertopeng anda dengan pelapik tambahan menggunakan pilihan eksport bertopeng penjana.
Medan nama dan short_name mengawal cara apl anda dilabelkan pada skrin utama dan dalam laci apl. `name` ialah nama apl penuh yang ditunjukkan semasa gesaan pemasangan. `short_name` ialah label di bawah ikon pada skrin utama — simpan di bawah 12 aksara untuk mengelakkan pemotongan pada skrin yang lebih kecil. Kedua-dua medan diperlukan untuk gesaan pemasangan muncul.
Medan theme_color menetapkan warna bar alamat penyemak imbas pada Android Chrome apabila pengguna menavigasi ke tapak anda (bukan hanya apabila PWA dipasang). Ia juga menetapkan warna bar alat dalam mod PWA kendiri. Gunakan warna jenama utama anda sebagai nilai heks. Tambahkan `<meta name='theme-color' content='#YOUR_COLOR'>` yang sepadan dalam HTML anda untuk penyemak imbas yang tidak membaca theme_color manifes.
Medan background_color mengawal warna latar belakang skrin percikan yang ditunjukkan antara pelancaran PWA dan cat pertama kandungan apl anda. Tetapkannya agar sepadan dengan latar belakang apl anda (biasanya putih atau warna jenama utama) untuk mengelakkan denyar yang menggelegar. Jika background_color tidak sepadan dengan latar belakang apl sebenar anda, pengguna melihat lompatan warna semasa permulaan.
Medan paparan menentukan cara PWA muncul selepas pemasangan. `standalone` menyembunyikan bar alamat penyemak imbas dan butang navigasi, menjadikan apl kelihatan seperti apl asli. `minimal-ui` menyimpan bar navigasi minimum. `fullscreen` mengalih keluar segala-galanya termasuk bar status. `browser` menunjukkan UI penyemak imbas penuh. Untuk kebanyakan PWA, `standalone` ialah pilihan yang betul. Gesaan pemasangan tidak muncul jika paparan ditetapkan kepada `browser`.
Medan start_url menentukan URL yang dibuka apabila pengguna melancarkan PWA yang dipasang dari skrin utama. Sentiasa sertakan ini — tanpanya, Android membuka URL tempat manifes ditemui, yang mungkin merupakan halaman pautan dalam dan bukannya halaman utama anda. Gunakan `'start_url': '/'` untuk kebanyakan tapak atau URL khusus jika apl anda perlu bermula pada laluan tertentu.
Menyahpepijat isu manifes adalah mudah dalam Chrome DevTools. Buka DevTools (F12), navigasi ke tab Aplikasi dan klik Manifes dalam panel kiri. Chrome menunjukkan paparan dihuraikan manifes anda, sebarang ralat penghuraian, kegagalan pengambilan ikon dan senarai semak 'Kebolehpasangan' yang menerangkan sebab gesaan pemasangan mungkin tidak dipaparkan. Isu biasa termasuk ikon tidak ditemui (404), jenis MIME yang salah atau ikon 192×192 yang tiada.
Melayan manifes dengan betul memerlukan dua konfigurasi bahagian pelayan. Pertama, fail mesti disampaikan dengan `Content-Type: application/manifest+json`. Kedua, jika ikon anda berada pada CDN atau asal yang berbeza daripada manifes, respons ikon mesti termasuk pengepala CORS yang sesuai (`Access-Control-Allow-Origin: *` atau domain anda). Pengepala CORS yang tiada pada fail ikon akan menyebabkan penyemak imbas menganggap manifes sebagai tidak sah.
Untuk rangka kerja yang menjana manifes secara automatik, sahkan fail yang dijana termasuk saiz dan warna ikon sebenar anda. Next.js menjana manifes daripada eksport /app/manifest.ts anda. Cipta Apl React menjana /public/manifest.json. Vite tidak menjana manifes secara lalai — buat satu secara manual. Dalam semua kes, kemas kini tatasusunan ikon untuk merujuk fail ikon berjenama sebenar anda dan bukannya ikon pemegang tempat lalai.
Cara ia berfungsi
- 1
Hasilkan ikon 192×192 dan 512×512 PNG
Muat naik logo 512×512 anda PNG atau SVG ke [favicon generator](tool:favicon-generator). Pakej muat turun termasuk android-chrome-192x192.png dan android-chrome-512x512.png sedia untuk digunakan terus.
- 2
Buat site.webmanifest
Buat fail JSON dengan sekurang-kurangnya: `name`, `short_name`, `icons` (192 dan 512 entri), `theme_color`, `background_color` dan `display: 'standalone'`. Pakej penjana termasuk templat manifes yang telah diisi sebelumnya.
- 3
Layankan manifes dengan jenis MIME yang betul
Konfigurasikan pelayan anda untuk menyediakan fail .webmanifest dengan `Content-Type: application/manifest+json`. Pada Apache, tambahkan `AddType application/manifest+json .webmanifest` pada .htaccess. Pada Nginx, tambahkan jenis MIME pada mime.types.
- 4
Pautkan manifes dalam HTML
Tambahkan `<link rel='manifest' href='/site.webmanifest'>` di dalam `<head>` anda. Tambahkan juga `<meta name='theme-color' content='#YOUR_COLOR'>` untuk penyemak imbas yang tidak membaca theme_color manifes.
- 5
Sahkan dengan Chrome DevTools
Buka Chrome DevTools > Aplikasi > Manifes. Sahkan tiada ralat ditunjukkan dan semua ikon diselesaikan. Semak bahagian Kebolehpasangan untuk kriteria tepat yang dipenuhi atau tidak dipenuhi untuk gesaan pemasangan PWA.
- 6
Uji gesaan pemasangan
Pada Android Chrome, navigasi ke tapak anda. Jika semua kriteria dipenuhi, Chrome menunjukkan sepanduk pemasangan atau pilihan 'Tambah ke Skrin Utama' dalam menu penyemak imbas. Selepas pemasangan, sahkan warna latar belakang skrin percikan dan ikon skrin utama dipaparkan dengan betul.
Cuba sekarang
Jana pakej ikon PWA anda
Penjana FaviconSoalan lazim
Adakah manifes apl web diperlukan untuk tapak web asas?+
Tidak — hanya jika anda mahu gesaan pemasangan ke skrin utama PWA pada Android dan desktop Chrome/Edge. favicon.ico sahaja mengendalikan tab penyemak imbas. Tambahkan manifes apabila anda ingin mendayakan pengalaman pemasangan mudah alih dan desktop yang lebih kaya.
Apakah saiz ikon yang terdapat dalam manifes apl web?+
Sekurang-kurangnya: 192×192 (pelancar Android) dan 512×512 (skrin percikan dan pratonton pemasangan). Tambahkan varian bertopeng bagi kedua-dua saiz untuk sokongan ikon Android adaptif dan 384×384 jika anda mahukan liputan ketumpatan tambahan.
Apakah perbezaan antara theme_color dan background_color dalam manifes?+
theme_color menetapkan bar alamat penyemak imbas dan warna bar alat. background_color menetapkan warna latar belakang skrin percikan yang ditunjukkan sebelum cat pertama apl anda. Tetapkan kedua-duanya agar sepadan dengan jenama anda untuk pengalaman pemasangan dan pelancaran yang lancar.
Mengapakah Chrome tidak menunjukkan gesaan pemasangan untuk PWA saya?+
Sebab yang paling biasa ialah: manifes hilang atau tidak sah, ikon 192×192 tiada, ikon mengembalikan 404, manifes tidak disajikan dengan jenis MIME yang betul atau tapak tidak disiarkan melalui HTTPS. Gunakan Chrome DevTools > Application > Manifes untuk melihat sebab kegagalan kebolehpasangan yang tepat.
Apakah ikon bertopeng dan adakah saya memerlukannya?+
Ikon boleh bertopeng termasuk pelapik zon selamat supaya Android boleh menggunakan topeng bulat atau tupai tanpa memotong logo anda. Anda memerlukan satu untuk ikon skrin utama anda kelihatan betul pada peranti Android yang menggunakan bentuk ikon penyesuaian bukan segi empat sama. Isytiharkannya dengan `'purpose': 'maskable'` dalam tatasusunan ikon manifes.
Bolehkah saya menggunakan ikon SVG dalam manifes apl web?+
Chromium menyokong SVG dalam beberapa konteks ikon manifes, tetapi PNG ialah lalai yang selamat secara universal untuk UI pemasangan merentas penyemak imbas. Sentiasa sertakan entri PNG 192 dan 512. Anda boleh menambah entri SVG bersama mereka tanpa sebarang bahaya.
Bagaimanakah saya boleh menyemak sama ada manifes web saya sah?+
Buka Chrome DevTools (F12) > Aplikasi > Manifes. Chrome menunjukkan ralat penghuraian, kegagalan pengambilan ikon dan senarai semak kebolehpasangan yang lengkap. Selesaikan sebarang isu yang dilaporkan, kemudian uji semula gesaan pemasangan dengan menggunakan pilihan 'Tambah pada Skrin Utama' daripada bar alamat Chrome.