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

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

François Beaufort

Jungkee Song

Aby ułatwić użytkownikom produktywność i ponowne zaangażowanie w kluczowe zadania, platforma internetowa obsługuje teraz skróty do aplikacji. Umożliwiają one programistom stron internetowych umożliwia szybki dostęp do zestawu 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 aplikacji

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

Menu skrótów do aplikacji jest wywoływane po kliknięciu prawym przyciskiem myszy ikony aplikacji na pasku zadań. (Windows) lub zadokuj (macOS) na pulpicie użytkownika albo kliknij & przytrzymanie aplikacji ikona Menu z aplikacjami na Androidzie.

Menu skrótów do aplikacji jest widoczne tylko w przypadku progresywnych aplikacji internetowych, które: zainstalowane na komputerze lub urządzeniu mobilnym użytkownika. Sprawdź Instalacja. w filmie „Poznaj PWA” , aby poznać wymagania dotyczące możliwości zainstalowania.

Każdy skrót do aplikacji wyraża intencję użytkownika, z których każdy jest powiązany z tagiem adresu URL w zakresie aplikacji internetowej. Adres URL jest otwierany po aktywacji przez użytkownika 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)
• Szukaj
• 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 są opcjonalnie zdefiniowane w manifeście aplikacji internetowej, czyli w pliku JSON, informuje przeglądarkę o aplikacji internetowej i o tym, jak powinna działać, zainstalowane na komputerze lub urządzeniu mobilnym użytkownika. Mówiąc bardziej szczegółowo, zadeklarowany w elemencie tablicy shortcuts. Poniżej znajdziesz przykładowy plik 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 co najmniej name i url. Pozostali członkowie są opcjonalna.

name

Czytelna dla człowieka etykieta skrótu do aplikacji, gdy wyświetlane użytkownikowi.

short_name (opcjonalnie)

Czytelna etykieta dla osób, które mają ograniczoną ilość miejsca. Zalecane mimo że jest to opcjonalnie.

description (opcjonalnie)

Zrozumiały dla człowieka cel skrótu do aplikacji. Nie są używane w czasie pisania, ale mogą być narażone na kontakt z technologią wspomagającą osoby z niepełnosprawnością. w przyszłości.

url

Adres URL otwierany, gdy użytkownik aktywuje aplikację skrótu. Ten URL musi należeć do zakresu pliku manifestu aplikacji internetowej. Jeśli tak w przypadku względnego adresu URL, podstawowym adresem URL będzie adres URL pliku manifestu aplikacji internetowej.

icons (opcjonalnie)

Tablica obiektów zasobów obrazu. Każdy obiekt musi właściwości src i sizes. W przeciwieństwie do ikon pliku manifestu aplikacji internetowej element Opcja type obrazu jest opcjonalna. Pliki SVG nie są obsługiwane w chwili pisania. Użyj formatu PNG.

Jeśli chcesz, by ikony wyglądały idealnie, przesyłaj je w przyrostach co 48 dp (np. 36 x 36, ikony: 48 x 48, 72 x 72, 96 x 96, 144 x 144, 192 x 192 piksele). W przeciwnym razie zalecamy Musisz użyć pojedynczej ikony o wymiarach 192 x 192 piksele.

Ze względów jakości ikony muszą mieć co najmniej połowę idealnego rozmiaru Android o współczynniku proporcji 48 dp. Aby np. wyświetlać się na ekranie xxhdpi, ikona musi mieć rozmiar co najmniej 72 x 72 piksele. (Ta wartość pochodzi z parametru formuła do konwertowania 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 Panel aplikacji Narzędzi deweloperskich.

W tym panelu znajdziesz czytelną dla człowieka wersję wielu plików manifestu usług, w tym skrótów do aplikacji. Pozwala łatwo sprawdzić, czy wszystkie ikony skrótów (jeśli są dostępne) ładują się prawidłowo.

Skróty do aplikacji mogą być niedostępne dla wszystkich użytkowników, ponieważ Aktualizacje aplikacji internetowej mogą być aktualizowane tylko raz dziennie. Więcej informacji: 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. Warto uporządkować skróty do aplikacji według priorytetu, ponieważ limit na liczba wyświetlanych skrótów do aplikacji różni się w zależności od platformy. Chrome i Edge włączone Na przykład w systemie Windows liczba skrótów do aplikacji jest ograniczona do 10, a w Chrome – Tylko wyświetlacz w Androidzie 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 skrótów dla danej 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ć zawsze widoczna. Na przykład macOS nie obsługuje ikon w Docku menu skrótów. 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 należy dodawać url 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 do aplikacji są dostępne na platformach i wersjach wymienionych poniżej.

Obsługa Zaufanej aktywności internetowej

Bubblewrap – zalecane narzędzie do tworzenia aplikacji na Androida korzystających z technologii Trusted Web Aktywność, odczytuje skróty aplikacji z pliku manifestu aplikacji internetowej i automatycznie generuje odpowiednią konfigurację dla aplikacji na Androida. Pamiętaj, że ikony do skrótów do aplikacji są wymagane i muszą mieć co najmniej 96 x 96 pikseli Folia bąbelkowa.

PWABuilder – świetne narzędzie do łatwego przekształcania progresywnej aplikacji internetowej w godne zaufania Aktywność w internecie, obsługuje skróty do aplikacji oraz niektóre zastrzeżenia.

Dla deweloperów, którzy ręcznie integrują zaufaną aktywność w internecie z Androidem aplikacji, skróty do aplikacji na Androida można wykorzystać, aby zaimplementować tę samą zachowań.

Przykład

Zapoznaj się z przykładem skrótów do aplikacji i jego źródłem.

Przydatne linki

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