Wraz z Chrome 84 pojawiło się kilka nowych rzeczy, które mogą znaleźć zastosowanie w przeglądarkowych aplikacjach. Jedną z nich są skróty, które pozwalają nam na dodanie klikalnych odnośników poza aplikacją, od strony systemu. Ich wprowadzenie jest bardzo proste, ponieważ wystarczy jedynie uzupełnić plik manifest.json o nowe informacje.
Jeśli jeszcze nie wiecie, czym jest plik "manifest.json" i w jaki sposób możecie uczynić swoją webową aplikację możliwą do zainstalowania, zachęcam do zapoznania się z moimi wcześniejszymi artykułami:
Progressive Web Apps – Wprowadzenie
Web App Manifest – pokażmy istnienie naszej aplikacji poprzez manifest.json
PWA Shortcuts w praktyce – jak to wygląda?
Najpierw pokażę Wam, jaki efekt możemy osiągnąć korzystając ze zdefiniowania skrótów, żeby było wiadomo, o czym jest tak naprawdę mowa. Skróty aplikacji pojawiają się w menu kontekstowym po kliknięciu prawym przyciskiem myszy na ikonę aplikacji w systemie Windows 10. Na telefonie lista skrótów się rozwinie, jeśli na ekranie głównym przytrzymamy palcem ikonę aplikacji. W tym drugim przypadku, na Androidzie, jest ograniczenie liczby skrótów, dlatego jeśli mamy ich więcej, to może niektórych z nich nie wyświetlić. Dlatego trzeba mieć na uwadze, że w zależności od przeglądarki lub systemu sposób i ilość wyświetlanych skrótów może się różnić.
Skróty aplikacji prezentują się jak na załączonych poniżej zrzutach ekranu, na przykładzie Twittera.
W jakich sytuacjach możnemy wykorzystać skróty? Na przykład, aby ułatwić użytkownikom dostęp do głównych części nawigacji (np. przejście bezpośrednio do profilu użytkownika) w aplikacji lub umożliwić szybkie wykonanie jakiejś akcji (np. napisanie maila, czy tweeta, jak na obrazku powyżej).
Jak dodać skróty do PWA?
Część praktyczna jest bardzo prosta. Wystarczy do pliku manifest.json aplikacji dodać listę skrótów w takiej formie:
"shortcuts": [
{
"name": "Console",
"short_name": "Console",
"description": "Access your MIDI console",
"url": "/webmidi/console",
"icons": [{ "src": "img/console-x192.png", "sizes": "192x192" }]
},
{
"name": "Piano",
"short_name": "Piano",
"description": "Play on virtual piano",
"url": "/webmidi/piano",
"icons": [{ "src": "img/piano-x192.png", "sizes": "192x192" }]
}
]W przykładzie powyżej pokazuję dwa skróty z aplikacji, którą ostatnio piszę. Mamy tutaj tablicę, której każdy z elementów posiada pięć właściwości. Opiszmy je sobie po kolei:
– name – najważniejszy element naszego skrótu, czyli nazwa. To ona się wyświetla na liście skrótów i powinna w krótki i zwięzły sposób pokazywać, gdzie nas zaprowadzi.
– short_name – jest to jeszcze krótsza nazwa, która może zostać użyta, jeśli w danym miejscu będzie zbyt mało miejsca do wyświetlenia pełnej nazwy. Właściwość opcjonalna.
– description – opis działania skrótu. Na tę chwilę nie jest on w ogóle wykorzystywany, ale może w przyszłości znaleźć się dla niego zastosowanie (tak jak opis samej aplikacji, którego używają sklepy z PWA).
– url – to również jest bardzo ważna właściwość, ponieważ to dzięki niej wskazujemy przeglądarce, jaki adres ma otworzyć po uruchomieniu aplikacji poprzez konkretny skrót. Może to być URL absolutny lub relatywny (w tym drugim przypadku jest brana pod uwagę ścieżka pliku manifest). Należy pamiętać, że podany adres musi się znajdować w "scope" aplikacji (więcej o tym w podlinkowanym wyżej artykule o manifest.json). Można również w adresie URL wykorzystać parametry, aby móc zmierzyć, jak często użytkownicy korzystają z tych skrótów.
– icons – ostatnia właściwość na naszej liście, wyznaczająca ikony danego skrótu. Dokładnie jak w przypadku ikon aplikacji, możemy podać ich kilka, różnych typów i rozmiarów. Ze swojego doświadczenia mogę powiedzieć, że jeśli ustawimy mniejsze ikony, to te mogą nie być wyświetlane, dlatego lepiej umieścić większe (tak jak powyżej: 192x192px). Ta właściwość jest również opcjonalna (bez niej po prostu będzie się wyświetlała sama nazwa bez obrazka).
Tak wyglądają skróty w mojej aplikacji po ich zaaplikowaniu (zwróćcie uwagę na to, że na Androidzie ilość wyświetlanych skrótów jest ograniczona):
Wsparcie skrótów PWA
Dla tego elementu nie mamy tabeli wsparcia przeglądarek na caniuse, ale jako pierwsze wprowadził to Chrome w wersji 84. Zaraz po nim pojawiło się to w kolejnych przeglądarkach opartych na Chromium, takich jak Edge czy Brave. Jeśli chodzi o systemy operacyjne, to działają one na wszystkich nowszych systemach, czyli Windows 10, Linux, MacOS, iOS, Android. Niestety, tutaj natknąłem się na pewien problem, ponieważ o ile na Androidzie skróty rzeczywiście poprawnie kierują użytkownika na dany URL, tak na Windowsie 10 otwiera się aplikacja na swoim "start_url" (i nie jest to kwestia tylko mojej aplikacji, ponieważ w innych również tak to "działa"). Gdybyście dowiedzieli się więcej na temat wsparcia pozostałych przeglądarek i systemów, dajcie znać w komentarzach, a uzupełnie wpis o te informacje.
Aktualizacja (27.08.2020)
Okazuje się, że wspomniany wyżej problem ze skrótami na Windows 10 był spowodowany... pomyłką w Chrome. Od wersji 85 skróty działają poprawnie.
Kilka słów na koniec
Skróty to kolejna rzecz, która pozwala nam rozwinąć webowe aplikacje tak, aby bardziej przypominały te natywne. Szczerze mówiąc, ja sam ze skrótów nie korzystam – równie szybko mogę otworzyć aplikację i przejść do odpowiedniej zakładki czy aktywności (chyba że aplikacja ma toporny UI). A Wy co sądzicie o tej opcji? Jak wykorzystacie ją w swoich aplikacjach?
Darmowy ebook o PWAJeśli interesuje Cię temat PWA i chciałbyś dowiedzieć się o tym więcej, zapraszam do zapoznania się z moim ebookiem zawierającym najważniejsze informacje:
"Basics of PWA" eBook
