Skróty do aplikacji dają 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ć ich ponowne angażowanie w kluczowe zadania, platforma internetowa obsługuje teraz skróty do aplikacji. Umożliwiają one programistom stron internetowych szybki dostęp do kilku typowych działań, które 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 aplikacji
Skróty do aplikacji ułatwiają użytkownikom szybkie wykonywanie typowych lub zalecanych zadań w aplikacji internetowej. Łatwy dostęp do tych zadań z dowolnego miejsca z ikoną aplikacji zwiększa produktywność użytkowników oraz ich zaangażowanie w korzystanie z aplikacji internetowej.
Aby wyświetlić menu skrótów do aplikacji, należy kliknąć prawym przyciskiem myszy ikonę aplikacji na pasku zadań (Windows) lub zadokować (macOS) na pulpicie użytkownika. Można też nacisnąć i przytrzymać ikonę programu uruchamiającego aplikację na Androidzie.
![Zrzut ekranu przedstawiający menu skrótów do aplikacji otwartego na Androidzie](https://web.dev/static/articles/app-shortcuts/image/screenshot-an-app-shortc-411804d9517fb.png?authuser=7&hl=pl)
![Zrzut ekranu przedstawiający menu skrótów do aplikacji otwartego w systemie Windows](https://web.dev/static/articles/app-shortcuts/image/screenshot-an-app-shortc-71fa6f805b104.png?authuser=7&hl=pl)
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 nawigacyjne najwyższego poziomu (np. strona główna, oś czasu, ostatnie zamówienia)
- Wyszukiwarka
- Wprowadzanie danych (np. napisanie e-maila lub tweeta, dodanie rachunku)
- Czynności (np. rozpoczęcie czatu z najpopularniejszymi kontaktami)
Zdefiniuj skróty aplikacji w pliku manifestu 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. Dokładniej rzecz ujmując, są one deklarowane w elemencie tablicy shortcuts
. Poniżej znajduje się przykład potencjalnego pliku manifestu 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 przynajmniej name
i url
. Pozostali członkowie są opcjonalna.
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 jego podanie, choć jest to opcjonalne.
description
(opcjonalnie)- Zrozumiały dla człowieka cel skrótu do aplikacji. Nie są one używane w czasie pisania, ale w przyszłości mogą być w niej używane.
url
- Adres URL otwierany, gdy użytkownik aktywuje skrót do aplikacji. Ten URL musi należeć do zakresu pliku manifestu aplikacji internetowej. W przypadku względnego adresu URL podstawowy adres URL to adres URL pliku manifestu aplikacji internetowej.
icons
(opcjonalnie)Tablica obiektów zasobów obrazu. Każdy obiekt musi zawierać właściwość
src
isizes
. W przeciwieństwie do ikon pliku manifestu aplikacji internetowej atrybuttype
obrazu 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.
Ze względu na jakość ikony muszą mieć co najmniej połowę idealnego rozmiaru na urządzeniu z Androidem, 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. (Zawarte w niej formuła przeliczania jednostek dp na jednostki pikseli.
Testowanie skrótów do aplikacji
Aby sprawdzić, czy skróty do aplikacji są prawidłowo skonfigurowane, użyj panelu pliku manifestu w panelu Aplikacja w Narzędziach deweloperskich.
![Zrzut ekranu ze skrótami do aplikacji w Narzędziach deweloperskich](https://web.dev/static/articles/app-shortcuts/image/screenshot-app-shortcuts-6c63f528aa376.png?authuser=7&hl=pl)
W tym panelu znajdują się czytelna dla człowieka wersja wielu właściwości pliku manifestu, w tym skrótów do aplikacji. Ułatwia sprawdzenie, czy wszystkie ikony skrótów (jeśli są dostępne) ładują się prawidłowo.
Skróty do aplikacji mogą nie być od razu dostępne dla wszystkich użytkowników, ponieważ progresywne aktualizacje aplikacji internetowej są ograniczone do jednego dnia. 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. Na przykład Chrome i Edge w systemie Windows ograniczają liczbę skrótów do aplikacji do 10, a w Chrome na Androida wyświetla się tylko wartość 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 do rozróżniania skrótów do aplikacji, ponieważ mogą one nie być 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.
Mierzenie użycia 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ługiwane przeglądarki
Skróty do aplikacji są dostępne na platformach i wersjach wymienionych poniżej.
![Zrzut ekranu przedstawiający menu skrótów do aplikacji otwartego w ChromeOS](https://web.dev/static/articles/app-shortcuts/image/screenshot-an-app-shortc-8b082728a8835.png?authuser=7&hl=pl)
Obsługa Zaufanej aktywności internetowej
Bubblewrap – zalecane narzędzie do tworzenia aplikacji na Androida, które korzystają z zaufanej aktywności internetowej, odczytuje skróty aplikacji z pliku manifestu aplikacji internetowej i automatycznie generuje odpowiednią konfigurację dla aplikacji na Androida. Uwaga: ikony skrótów do aplikacji są wymagane i muszą mieć co najmniej 96 na 96 pikseli w Bubblewrap.
PWABuilder, czyli świetne narzędzie do łatwego przekształcania progresywnej aplikacji internetowej w zaufaną aktywność w internecie, obsługuje skróty do aplikacji z pewnymi zastrzeżeniami.
Deweloperzy, którzy ręcznie integrują zaufaną aktywność internetową ze swoją aplikacją na Androida, mogą korzystać ze skrótów do aplikacji na Androida, aby umożliwić wykonywanie tych samych działań.
Przykład
Zapoznaj się z przykładem skrótów do aplikacji i jego źródłem.