Progressive Web Apps – jak wdrożyć i dlaczego warto?

Ludzie coraz częściej i chętniej korzystają z urządzeń mobilnych. Na ten moment stosunek użycia rozwiązań mobile do urządzeń stacjonarnych jest bardzo zbliżony. Jednak z miesiąca na miesiąc ta zależność ulega zmianie. Użytkownicy, decydując się na jakieś aplikacje, kierują się przede wszystkim trzema zasadami: niezawodność, szybkość i zaangażowanie.

Czym właściwie jest Progressive Web Apps?

Mając na uwadze oczekiwania użytkowników, powstało rozwiązanie — Progressive Web Apps, pozwalające na zainstalowanie aplikacji webowej na smartfonie bez konieczności korzystania ze sklepu. Początkowo nazwą progresywnej aplikacji webowej określono stronę internetową, wykorzystującą takie rozwiązania jak Service Worker czy Web App Manifest [1].

Technologia Progressive Web Apps umożliwia zapisywanie w pamięci urządzenia mobilnego stronę, co umożliwia rozszerzenie jej funkcji, a oprócz tego przyspiesza jej działanie. To rozwiązanie posiada wiele korzyści. Przede wszystkim mówi się o progresywności, responsywności, niezależności połączenia, bezpieczeństwie czy zwiększeniu zaangażowania użytkowników. Takie rozwiązanie może pozytywnie wpłynąć na wzrost odwiedzających daną witrynę, wzrost współczynnika konwersji czy dłuższy czas przebywania użytkowników na stronie.

Przygotowanie podłoża pod wdrożenie

Jeśli chcemy, aby Progressive Web Apps działał poprawnie, musimy uwzględnić zalecenia Google. Oto najważniejsze z nich:

• należy unikać „#” w adresach URL, wszystkie możliwości witryny powinny być przygotowane do prawidłowego odczytania strony,
• warto korzystać z technik „feature detection” i „progressive enhancement”, po to, aby każdy użytkownik miał dostęp do strony,
• złą praktyką jest stosowanie schematu „AJAX-Crawling” na nowych stronach,
• istotne jest ograniczenie liczby funkcjonalności,
• warto stosowanie atrybutu rel=”canonical”.

Ciekawą i przydatną rzeczą jest także narzędzie do pobierania i renderowania witryny po stronie serwera (bądź stosując rozwiązanie hybrydowe – część po stronie serwera, część po stronie użytkownika), które udostępnia Google Search Console [2].

Wdrożenie Progressive Web Apps w 5 krokach

1. Instalacja wtyczki Lighthouse w przeglądarce Google Chrome.
2. Wykonanie zadania – przewodnika, które pokazuje co zrobić, aby aplikacja stała się Progressive Web Apps.
3. Dodanie Manifestu – najpierw należy stworzyć plik /manifest.json przed uzupełnieniem, w sposób ukazany poniżej:

{
“short_name”: “”,
“name”: “”,
“icons”: [
{
“src”: “”,
“sizes”: “144×144”,
“type”: “image/png”
},
{
“src”: “”,
“sizes”: “192×192”,
“type”: “image/png”
}
],
“start_url”: “/?utm_source=homescreen”,
“background_color”: “”,
“theme_color”: “”,
“display”: “fullscreen”
}

W momencie, gdy plik zostanie utworzony, należy wskazać ścieżki w pliku /index.html, poprzez jej aktualizację do manifestu.

<link rel=“manifest” href=“/manifest.json”/>

4. Dodanie składnika Service Worker, który zapisuje pliki aplikacji do Cache Storage. Takie rozwiązanie umożliwia użytkownikowi korzystanie z danej witryny, nawet gdy nie ma połączenia z siecią.
5. Zaktualizowanie listy plików, które mają zostać zapamiętane przez przeglądarkę, a następnie stworzenie pliku /service-worker.js:

const CACHE_NAME = ‘wpisz-tutaj-dowolny-string’;

// List of files which are store in cache.
let filesToCache = [
‘/’,
‘/styles/main.css’,
‘/images/logo.png’,
‘/scripts/main.js’
];

self.addEventListener(‘install‘, function (evt) {
evt.waitUntil(
caches.open(CACHE_NAME).then(function (cache) {
return cache.addAll(filesToCache);
}).catch(function (err) {
// Snooze errors…
// console.error(err);
})
);
});

self.addEventListener(‘fetch’, function (evt) {
// Snooze logs…
// console.log(event.request.url);
evt.respondWith(
// Firstly, send request..
fetch(evt.request).catch(function () {
// When request failed, return file from cache…
return caches.match(evt.request);
})
);
});

Zalecane jest dodanie pliku /index.html do głównego pliku, który będzie w cache-u. Po tym działaniu powinien uruchomić się Service Worker.

<script>
const PATH = ‘/service-worker.js‘;

let isServiceWorkersSupport = (‘serviceWorker’ in navigator);

if (isServiceWorkersSupport) {
console.log(‘Will service worker register?‘);
navigator.serviceWorker.register(PATH).then(function () {
console.log(“Yes it did.”);
}).catch(function (err) {
console.log(“No it didn’t. This happened: “, err)
});
}
</script>

Osiągnij wynik 100/100

Taki wynik można uzyskać po wykonaniu kilku zadań. Zacznij od zmiany koloru górnego paska z adresem strony, poprzez definicję tego parametru:

<meta name=“theme-color” content=“color”/>

Kolejnym elementem, na który warto zwrócić uwagę jest kontrast pomiędzy kolorem tła a kolorem tekstu. Lighthouse zakłada, że powinien być on większy od przyjętej normy – 4.5. Ostatnią rzeczą jest ładowanie skryptów. Wykorzystując atrybut async w tagu <script>, podczas ładowania strony nie blokuje się layout witryny. Po ustawieniu tych wszystkich elementów strona domowa jest w 100% PWA.[3]

Technologia Progressive Web Apps niesie za sobą wiele korzyści zarówno dla właściciela witryny, jak i jej użytkowników. Korzystanie z tego rozwiązania, może wpłynąć pozytywnie na konwersję i utrzymywać odwiedzających stronę w bliższej interakcji z serwerem. 

[1] Dariusz Wrzesień, Progressive Web Apps – wprowadzenie do aplikacji progresywnych, „DEV:ENV”, 09.01.2018 [dostęp: 05.06.2018], <http://devenv.pl/progressive-web-apps/>

[2] Maciej Dobkowicz, Strony jak aplikacje? Poznaj Progressive Web Apps (PWA) i zoptymalizuj pod SEO „SEMTEC”, 24.05.2018 [dostęp: 05.06.2018], <https://www.semtec.pl/progressive-web-apps-pwa-optymalizacja-seo/?utm_source=rss&utm_medium=rss&utm_campaign=rss>

[3] Piotr Kowalski, Jak przerobić stronę na Progressive Web App?, „Piotr Kowalski Blog”, 07.05.2017 [dostęp: 12.06.2018], < https://piecioshka.pl/blog/2017/05/07/jak-przerobic-strone-na-pwa.html>