Skróty do aplikacji zapewniają szybki dostęp do kilku typowych działań, których użytkownicy często potrzebują.
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 aplikacji jest wyświetlane tylko w przypadku progresywnych aplikacji internetowych zainstalowanych na komputerze lub urządzeniu mobilnym użytkownika. Aby dowiedzieć się więcej o wymaganiach dotyczących możliwości zainstalowania, zapoznaj się z sekcją Instalacja w module „Wprowadzenie do PWA”.
Każdy skrót aplikacji wyraża intencję użytkownika, a każda z nich jest powiązana z adresem URL w zakresie aplikacji internetowej. Gdy użytkownik aktywuje skrót aplikacji, otwiera się adres URL. 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- Czytelna dla człowieka etykieta skrótu do aplikacji 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 cel skrótu do aplikacji. W momencie pisania tego tekstu nie jest on używany, ale w przyszłości może być udostępniony technologiom wspomagającym.
url- Adres 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ść
srci właściwośćsizes. W przeciwieństwie do ikon w pliku manifestu aplikacji internetowejtypeobrazu jest opcjonalny. Pliki SVG nie są obsługiwane w chwili pisania. Użyj formatu PNG.Jeśli chcesz, by ikony wyglądały idealnie, dodawaj je w krokach co 48 dp (czyli ikony 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. Na przykład, aby ikona była wyświetlana na ekranie xxhdpi, musi mieć wymiary 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. Ułatwia sprawdzenie, czy wszystkie ikony skrótów (jeśli są dostępne) ładują 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
Sortowanie skrótów aplikacji według priorytetu
Skróty są wyświetlane w kolejności, w jakiej zostały zdefiniowane w pliku manifestu. Zalecamy uporządkowanie skrótów aplikacji według priorytetu, ponieważ limit liczby wyświetlanych skrótów 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 wersje 4 były dozwolone. Chrome 92 dodał skrót do ustawień witryny, korzystając z jednego z dostępnych boksów 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 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
Adnotacje do skrótów do aplikacji url dodawaj w taki sam sposób jak w przypadku start_url do celów analitycznych (np. url:
"/my-shortcut?utm_source=homescreen").
Obsługa przeglądarek
Skróty aplikacji są dostępne na platformach i w wersjach wymienionych poniżej.
Obsługa Zaufanej aktywności internetowej
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.