Manifest PWA: tworzenie aplikacji internetowej Manifestuj się w prosty sposób

Prawidłowo skonfigurowany manifest aplikacji internetowej ma kluczowe znaczenie dla procesu instalacji PWA, ponieważ bez niego cały proces po prostu nie jest możliwy. Co zaskakujące, nie jest też tak trudno mieć poprawnie skonfigurowany manifest aplikacji internetowej.

Po co to jest?

Manifest aplikacji sieci Web jest istotną częścią PWA, ponieważ określa, jak Twoja aplikacja będzie prezentować się użytkownikowi na ekranie powitalnym i na ekranie głównym użytkownika. To wszystko są ważne początkowe etapy, które wpływają na kształtowanie wrażeń użytkowników Twojej aplikacji, dlatego tak ważne jest, aby zrobić to dobrze.

Sposoby konfiguracji pliku manifest.json

Zaczynając od zera

Przy odrobinie znajomości formatu danych JSON możesz bez żadnego wysiłku utworzyć własny manifest aplikacji internetowej.

Typowy plik manifest.json powinien wyglądać mniej więcej tak:

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "wyświetlacz": "pełny ekran",
    "zakres": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "Rozwiązania e-commerce nowej generacji dla Magento",
    "ikony": [
        {
            "src": "/icon-192x192.png",
            "rozmiary": "192x",
            "typ": "obraz/png"
        },
        {
            "src": "/icon-256x256.png",
            "rozmiary": "256x",
            "typ": "obraz/png"
        },
        {
            "src": "/icon-384x384.png",
            "rozmiary": "384x",
            "typ": "obraz/png"
        },
        {
            "src": "/icon-512x512.png",
            "rozmiary": "512x",
            "typ": "obraz/png"
        }
    ]
}

Możesz pominąć niektóre części kodu, ale nadal jest kilka wymaganych członków, bez których użytkownik nie będzie mógł zainstalować PWA:

 nazwa, skrócona nazwa, ikony, wyświetlacz, start_url

• name : nazwa Twojej aplikacji, która jest wyświetlana pod ikoną Twojej aplikacji na ekranie głównym iw różnych innych miejscach. Utrzymuj, że wartość Twojej właściwości nazwy jest krótka i prosta.

• short-name : Gdy wartość właściwości name nie zmieści się na ekranie użytkownika, zostanie użyta wartość tej właściwości. Zalecamy, aby short-name miała mniej niż 20 znaków. W rzeczywistości strzelaj do 10 postaci.

• icons : ikony aplikacji, które mogą składać się z kilku obrazów dla różnych systemów operacyjnych i urządzeń. Możesz zdefiniować zestaw ikon dla przeglądarki, które będą używane do dodawania do ekranu głównego, ekranu powitalnego i tak dalej.

Na przykład sam iOS wymaga 4 różnych rozmiarów dla 4 swojego urządzenia:

• iPhone: 120 x 120 pikseli i 180 x 180 pikseli
• iPad Pro: 167 x 167 pikseli
• iPad i iPad mini: 152 x 152 piksele

Nawet Google Chrome wymaga co najmniej 2 różnych rozmiarów, aby w pełni korzystać z systemu iOS i Android:

• 512 x 512 pikseli
• 192 x 192 pikseli

Aby wywołać ikonę obrazu, używany jest zestaw właściwości, a mianowicie src , type i sizes .

• src : ścieżka do pliku obrazu ikony
• types : typ pliku obrazu
• sizes : szerokość x wysokość obrazu, w pikselach

 "ikony" : [ 
    {
       "src" : "/imgs/icon152.png",
       "typ" : "obraz/png",
       "rozmiary" : "192x192"
    },
    {
       "src" : "/imgs/icon215.png",
       "typ" : "obraz/png",
       "rozmiary" : "512x512"
    }
]

• display : wskazuje sposób wyświetlania aplikacji. Aby uzyskać wciągające i podobne do aplikacji wrażenia, zaleca się ustawienie fullscreen (bez interfejsu użytkownika). Dostępne są jednak również opcje takie jak standalone , minimal-ui użytkownika, które są mniej kosztowne pod względem wydajności, ale wiążą się z utratą immersyjnego doświadczenia (pasek stanu może nadal być wyświetlany).

• start_url : wskazuje ścieżkę, z której uruchamia się aplikacja. Twoja wartość start_url może być prostym / , jeśli aplikacja zaczyna się od tego samego katalogu .root, w którym przechowywany jest plik manifest.json .

Członkowie fakultatywni

Kierowanie się książką to jedno, ale zawsze możesz spróbować być lepszym. Poniżej znajdują się zalecane przez nas klucze dla lepszego i bardziej szczegółowego manifestu aplikacji internetowej:

• scope : ogranicza zakres, do którego może przejść użytkownik. Jeśli użytkownik wyjdzie poza zakres, powróci do normalnej strony internetowej na karcie lub w oknie przeglądarki. Aby określić zakres swojej witryny, po prostu umieść / lub pełny adres URL swojej witryny.

Uwagi :
– Domyślnym zachowaniem scope jest katalog, z którego obsługiwany jest manifest.json .
– Każdy link otwarty w aplikacji internetowej zostanie wyrenderowany w istniejącym oknie PWA. Aby otworzyć dowolny link na karcie przeglądarki, musisz dodać target="_blank" do tagu <a> .
– start_url musi znajdować się w zakresie.

• background_color : wskazuje kolor tła w niektórych kontekstach aplikacji. Dokładniej, to pole może służyć do ustawienia koloru tła ekranu powitalnego.

• theme_color : wskazuje kolor motywu elementów interfejsu użytkownika aplikacji internetowej, takich jak pasek adresu. Zmiana jest stosowana w całej witrynie i obowiązuje tylko wtedy, gdy witryna jest uruchamiana z ekranu głównego.

Uwagi : konfiguracje na poziomie strony — np. metatag theme-color: <meta name="theme-color" content="#3367D6"> — zastąpią wartość theme_color w pliku manifestu aplikacji internetowej.

• description : To powinno być oczywiste.

• shortcuts : Definiuje skróty do stron w aplikacji internetowej. Dostęp do skrótów aplikacji można uzyskać, naciskając długo ikonę programu uruchamiającego aplikacji w systemie Android lub klikając prawym przyciskiem myszy ikonę aplikacji na pasku zadań (Windows)/w Docku (macOS).

 "skróty" : [
  {
    "nazwa": "Powiadomienia",
    "url": "/użytkownik/powiadomienia/",
    "description": "Wiadomości, które przegapiłeś"
  },
  {
    "name": "Utwórz nowe zamówienie",
    "url": "/utwórz/zamów"
  },
  {
    "name": "Moja lista życzeń",
    "url": "/użytkownik/lista życzeń"
  }
]

Korzystanie z generatora manifestów aplikacji internetowej

Łatwiejszym i łatwiejszym sposobem na zrobienie tego byłoby użycie generatora manifestów aplikacji internetowej. Generator pobiera dane wejściowe i na podstawie których generuje w pełni funkcjonalny manifest aplikacji internetowej, którego można używać bez zmian.

Połącz swój plik manifest.json

Gdy wszystko jest poprawnie skonfigurowane, następnym krokiem jest odwołanie się do manifestu aplikacji internetowej w nagłówku HTML.

 <link rel="manifest" href="/manifest.webmanifest">

Po odwołaniu się do manifestu aplikacji internetowej wszystkie obsługiwane przeglądarki powinny teraz poprawnie rozpoznawać plik manifest.json . Aby uzyskać pełną listę aktualnie obsługiwanych przeglądarek, sprawdź CanIUse.

Wniosek

I to wszystko w przypadku prostego manifestu aplikacji internetowej. Utworzenie w pełni funkcjonalnego pliku manifest.json nie powinno zająć dużo czasu. Dzięki kilku dodatkowym poprawkom Twoja aplikacja internetowa może zostać zainstalowana tak, jak inne aplikacje PWA.