Szybko wykonuj swoje zadania dzięki skrótom do aplikacji

Skróty do aplikacji zapewniają szybki dostęp do kilku typowych działań, których użytkownicy często potrzebują.

François Beaufort

Jungkee Song

Aby zwiększyć produktywność użytkowników i ułatwić im ponowne zaangażowanie w kluczowe zadania, platforma internetowa obsługuje teraz skróty do aplikacji. Umożliwiają one deweloperom stron internetowych zapewnienie szybkiego dostępu do kilku typowych działań, których użytkownicy często potrzebują.

Z tego artykułu dowiesz się, jak definiować skróty do aplikacji. Dodatkowo poznasz kilka powiązanych sprawdzonych metod.

Informacje o skrótach do aplikacji

Skróty do aplikacji pomagają użytkownikom szybko uruchamiać typowe lub zalecane zadania w aplikacji internetowej. Łatwy dostęp do tych zadań z dowolnego miejsca, w którym wyświetla się ikona aplikacji, zwiększa produktywność użytkowników i ich zaangażowanie w aplikację internetową.

Menu skrótów aplikacji można wywołać, klikając prawym przyciskiem myszy ikonę aplikacji na pasku aplikacji (Windows) lub w docku (macOS) na pulpicie użytkownika albo dotykając i przytrzymując ikonę menu aplikacji na Androidzie.

Menu skrótów do aplikacji jest widoczne tylko w przypadku progresywnych aplikacji internetowych, które są zainstalowane na komputerze lub urządzeniu mobilnym użytkownika. Aby dowiedzieć się więcej o wymaganiach w zakresie możliwości instalacji, zapoznaj się z sekcją Instalacja w module „Poznaj PWA”.

Każdy skrót do aplikacji wyraża intencję użytkownika, z którym każdy jest powiązany z adresem URL w zakresie aplikacji internetowej. Adres URL otwiera się, gdy użytkownik aktywuje skrót do aplikacji. Przykłady skrótów do aplikacji:

• Elementy nawigacji najwyższego poziomu (np. strona główna, linia czasu, ostatnie zamówienia)
• Szukaj
• zadania związane z wprowadzaniem danych (np. tworzenie e-maila lub tweeta, dodawanie rachunku);
• czynności (np. rozpoczęcie czatu z najpopularniejszymi kontaktami);

Definiowanie skrótów do aplikacji w manifeście aplikacji internetowej

Skróty do aplikacji możesz opcjonalnie zdefiniować w manifeście aplikacji internetowej, czyli w pliku JSON zawierającym informacje o aplikacji internetowej i tym, jak powinna ona działać po zainstalowaniu na komputerze lub urządzeniu mobilnym użytkownika. W szczególności są one deklarowane w elemencie tablicy shortcuts. Poniżej znajdziesz przykładowy manifest aplikacji internetowej.

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

Każdy element tablicy shortcuts to słownik zawierający co najmniej element name i url. Pozostali domownicy są opcjonalni.

name

Etykieta skrótu aplikacji zrozumiała dla człowieka, wyświetlana użytkownikowi.

short_name (opcjonalnie)

Czytelna etykieta dla osób, które mają ograniczoną ilość miejsca. Zalecamy podanie tych informacji, mimo że są opcjonalne.

description (opcjonalnie)

Zrozumiały dla człowieka opis przeznaczenia skrótu aplikacji. Nie są one używane w czasie pisania, ale w przyszłości mogą być wykorzystywane w technologii wspomagającej osoby z niepełnosprawnością.

url

URL otwierany, gdy użytkownik aktywuje skrót do aplikacji. Ten adres URL musi znajdować się w zakresie pliku manifestu aplikacji internetowej. Jeśli jest to adres URL bezwzględny, podstawowym adresem URL będzie adres URL pliku manifestu aplikacji internetowej.

icons (opcjonalnie)

Tablica obiektów zasobów obrazów. Każdy obiekt musi zawierać właściwość src i właściwość sizes. W przeciwieństwie do ikon w pliku manifestu aplikacji internetowej type obrazu jest opcjonalny. W momencie pisania tego tekstu pliki SVG nie są obsługiwane. Użyj formatu PNG.

Jeśli chcesz mieć ikony o idealnych wymiarach, podaj je z przyrostami co 48 dp (np. 36 x 36, 48 x 48, 72 x 72, 96 x 96, 144 x 144, 192 x 192 piksele). W przeciwnym razie zalecamy użycie pojedynczej ikony o wymiarach 192 x 192 piksele.

Ikony muszą mieć co najmniej połowę idealnego rozmiaru na Androidzie, który wynosi 48 dp. Aby na przykład była wyświetlana na ekranie xxhdpi, ikona musi mieć co najmniej 72 x 72 piksele. (wynik z formuły do konwertowania jednostek dp na piksele).

Testowanie skrótów do aplikacji

Aby sprawdzić, czy skróty aplikacji są prawidłowo skonfigurowane, użyj panelu Plik manifestu w panelu Aplikacja w DevTools.

Ta karta zawiera czytelną dla człowieka wersję wielu właściwości pliku manifestu, w tym skrótów aplikacji. Dzięki temu możesz łatwo sprawdzić, czy wszystkie ikony skrótów (jeśli są dostępne) wczytują się prawidłowo.

Skróty aplikacji mogą nie być dostępne od razu dla wszystkich użytkowników, ponieważ aktualizacje progresywnych aplikacji internetowych są ograniczone do 1 raza dziennie. Dowiedz się więcej o tym, jak Chrome obsługuje aktualizacje pliku manifestu aplikacji internetowej.

Sprawdzone metody

Uporządkuj skróty do aplikacji według priorytetu

Skróty wyświetlają się w kolejności, według której zostały zdefiniowane w pliku manifestu. Zachęcamy do ułożenia skrótów do aplikacji według priorytetu, ponieważ limit liczby wyświetlanych skrótów do aplikacji różni się w zależności od platformy. Chrome i Edge w Windows ograniczają liczbę skrótów aplikacji do 10, podczas gdy Chrome na Androida wyświetla tylko 3. Przed wersją Chrome 92 na Androida 7 dozwolone były 4 karty. W Chrome 92 dodano skrót do ustawień witryny, który zajmuje jeden z dostępnych slotów dla skrótów do aplikacji.

Używaj różnych nazw skrótów do aplikacji

Nie należy polegać na ikonach, aby odróżnić skróty aplikacji, ponieważ mogą one nie być zawsze widoczne. Na przykład system macOS nie obsługuje ikon w menu skrótów w Docku. Użyj różnych nazw skrótów do aplikacji.

Pomiar korzystania ze skrótów do aplikacji

Na potrzeby analityki (np. url: "/my-shortcut?utm_source=homescreen") należy dodać adnotacje do wpisów url skrótów aplikacji tak samo jak do wpisów start_url.

Obsługa przeglądarek

Skróty do aplikacji są dostępne na platformach i wersjach wymienionych poniżej.

Pomoc dotycząca zaufanej aktywności w internecie

Bubblewrap to zalecane narzędzie do tworzenia aplikacji na Androida, które korzystają z zaufanej aktywności w internecie. Narzędzie to odczytuje skróty aplikacji z pliku manifestu aplikacji internetowej i automatycznie wygeneruje odpowiednią konfigurację dla aplikacji na Androida. Pamiętaj, że ikony skrótów aplikacji są wymagane i muszą mieć wymiary co najmniej 96 x 96 pikseli w Bubblewrap.

PWABuilder to świetne narzędzie, które ułatwia przekształcenie progresywnej aplikacji internetowej w działalność w zaufanym środowisku internetowym. Obsługuje ono skróty aplikacji z pewnymi zastrzeżeniami.

Deweloperzy, którzy chcą ręcznie zintegrować zaufane działanie w internecie z aplikacją na Androida, mogą użyć skrótów aplikacji na Androida, aby wdrożyć te same zachowania.

Przykład

Sprawdź przykład skrótu aplikacji i jego źródło.

Przydatne linki

• MDN
• Specyfikacja
• Przykład skrótów do aplikacji | Przykładowe źródło skrótów do aplikacji
• Komponent Blink: UI>Browser>WebAppInstalls