Z poprzedniego artykułu o Progresywnych Aplikacjach Webowych dowiedziałeś się co to jest PWA, czym się charakteryzuje i czy warto stworzyć taką aplikację.
Dzisiaj przybliżę Ci temat od strony technicznej, to znaczy jakie kroki trzeba wykonać aby przekształcić stronę internetową lub sklep internetowy w Progresywną Aplikację Webową.
Z tego artykułu dowiesz się:
- Czym jest PWA - Progressive Web Application - przypomnienie
- Jak możesz przekształcić swoją witrynę w PWA?
- Co zrobić, aby przeglądarka pokazywała użytkownikowi możliwość instalacji Twojej aplikacji internetowej?
- Jak testować PWA?
Czym jest PWA?
W skrócie PWA (Progressive Web Application) to aplikacja internetowa, która przypomina działaniem natywną aplikację mobilną. W prosty sposób można w nią przekształcić każdą stronę internetową lub sklep internetowy, dzięki czemu użytkownik będzie miał możliwość zainstalowania skrótu do aplikacji na komputerze i telefonie oraz korzystania z witryny w trybie offline.
4 rzeczy, aby przekształcić swoją stronę internetową w PWA
1. Responsywna strona internetowa
Twoja witryna powinna być dostosowana do działania na urządzeniach mobilnych i zoptymalizowana, aby zainstalowana aplikacja oferowała użytkownikowi jak najlepsze doświadczenie.
2. Zastosowanie protokołu HTTPS
Jest to bardzo ważny punkt - bez protokołu HTTPS przeglądarka nie wyświetli użytkownikowi informacji o możliwości instalacji, nie będziesz też mógł oprogramować powiadomień PUSH ani dostosować aplikacji pod działanie offline.
Informacje o zabezpieczeniu witryny protokołem HTTPS znajdziesz tutaj: https://support.google.com/webmasters/answer/6073543?hl=pl
3. Plik manifest.json
Plik w formacie JSON określający metadane aplikacji, np. jej nazwę oraz ikonę wyświetlaną po instalacji. Ale zanim przejdziemy do tworzenia pliku manifest, musimy zająć się dodaniem odpowiednich ikon. Aby Twoja aplikacja dobrze wyglądała na każdym urządzeniu, należy dodać favicon zgodnie z najnowszymi zaleceniami. Nie wystarczy sama ikona 16x16px czy 32x32px, ponieważ wtedy po instalacji na komputerze wyświetlana grafika będzie kiepskiej jakości.
źródło: https://css-tricks.com/
O tym, czego dokładnie potrzeba i dlaczego możesz przeczytać w artykule: https://css-tricks.com/favicon-quiz/
W celu utworzenia i dodania wszystkich niezbędnych ikon posłużymy się generatorem favicon, dzięki któremu z jednej ikony otrzymamy cały zestaw potrzebnych grafik wraz z kodem źródłowym: https://realfavicongenerator.net/
Po wgraniu ikony pojawia się ekran konfiguracji - w zależności od potrzeb możesz wygenerować odpowiednie favicon wraz z kodem. Jeśli chcesz, aby Twoja strona internetowa stała się aplikacją PWA dobrze działającą na wszystkich urządzeniach pamiętaj, żeby zaznaczyć odpowiednie punkty w konfiguracji w zakładce Assets.
Narzędzie to pozwala również sprawdzić wgrane favicon: https://realfavicongenerator.net/favicon_checker#.Xuct4JowjE4
Wraz z grafiką powinien wygenerować się plik site.webmanifest - jest to nasz manifest.json (możesz zostawić taką nazwę lub zmienić na manifest.json, subtelna różnica między tymi plikami jest wyjaśniona tutaj: https://developer.mozilla.org/en-US/docs/Web/Manifest#Deploying_a_manifest_with_the_link_tag).
Plik zawiera następujące dane:
{
"name": "",
"short_name": "",
"icons": […],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
- name: nazwa wyświetlająca się przy zapytaniu o instalację
- short name: nazwa wyświetlająca się na ekranie telefonu / komputera po instalacji
- icons: informacje o wygenerowanych favicon (ścieżki, rozmiary, typy plików)
- theme_color: kolor paska z adresem strony
- background_color: kolor wyświetlany podczas ładowania aplikacji
- display: definiuje w jakim trybie ma zostać pokazana aplikacja (ile elementów interfejsu pokaże się użytkownikowi)
źródło: https://krylan.ovh/
Oprócz automatycznie wygenerowanych właściwości powinniśmy jeszcze zdefiniować atrybut „start_url” - adres, który ma być załadowany po otwarciu aplikacji.
Wszystkie dostępne właściwości pliku manifest.json można znaleźć tutaj: https://developer.mozilla.org/en-US/docs/Web/Manifest
Przykładowy gotowy plik:
{
"name": "Risenet",
"short_name": "Risenet",
"start_url": "https://www.risenet.pl",
"theme_color": "#3b3b3b",
"background_color": "#3b3b3b",
"display": "standalone",
"icons": [{
"src": "/build/images/favicon/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png"
}, {
"src": "/build/images/favicon/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "/build/images/favicon/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "/build/images/favicon/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "/build/images/favicon/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "/build/images/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/build/images/favicon/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/build/images/favicon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}, {
"src": "/build/images/favicon/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any maskable"
}]
}
Pamiętaj, aby podlinkować ten plik w sekcji head Twojej witryny. Przy generowaniu favicon powinna pojawić się w kodzie źródłowym linijka:
<link rel="manifest" href="/site.webmanifest">
Jeśli zmieniłeś nazwę pliku, należy zmienić ją również tutaj.
4. Plik service-worker.js
Skrypt definiujący zachowanie aplikacji w trybie offline. Można w nim również zaprogramować powiadomienia PUSH.
W głównym pliku javascript swojej witryny umieść następujący kod:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}
Sprawdzamy tutaj czy dana przeglądarka obsługuje Service Worker i rejestrujemy plik. Jeśli tak, stwórzmy teraz sw.js (możesz ten plik nazwać service-worker lub dowolnie inaczej, pamiętaj tylko o podaniu odpowiedniej ścieżki w kodzie powyżej).
Zawartość tego pliku będzie się różnić w zależności od wybranej przez Ciebie metody cache’owania danych. Listę dostępnych opcji, ich wyjaśnienie i sytuacje, w których najlepiej z nich skorzystać możesz znaleźć tutaj: https://jakearchibald.com/2014/offline-cookbook/
Dobre wytłumaczenie, czym jest Service Worker oraz jak działa dostępne jest również w tym artykule: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
Przykładowy plik Service Worker:
const staticCacheName = 'site-static-v1';
const assets = [
'/',
'/index.html',
'/assets/js/ui.js',
'/assets/css/main.css',
'/assets/images/background-home.jpg',
'https://fonts.googleapis.com/css?family=Lato:300,400,700',
];
// install event
self.addEventListener('install', evt => {
evt.waitUntil(
caches.open(staticCacheName).then((cache) => {
console.log('caching shell assets');
cache.addAll(assets);
})
);
});
// activate event
self.addEventListener('activate', evt => {
evt.waitUntil(
caches.keys().then(keys => {
return Promise.all(keys
.filter(key => key !== staticCacheName)
.map(key => caches.delete(key))
);
})
);
});
// fetch event
self.addEventListener('fetch', evt => {
evt.respondWith(
caches.match(evt.request).then(cacheRes => {
return cacheRes || fetch(evt.request);
})
);
});
źródło: https://medium.com
Instalacja
Aby na pasku z adresem na komputerze pojawiła się ikona instalacji (Chrome) lub na telefonie powiadomienie o możliwości instalacji (Android), musi zostać spełnionych kilka warunków.
Desktop:
Mobile:
- Dodany plik manifest z polami:
- background_color
- display
- icons
- name/short_name
- start_url
- Zastosowany protokół HTTPS
- Dodana ikona witryny (favicon)
- Zarejestrowany Service Worker
Testowanie PWA
Wtyczka do Chrome Lighthouse oferuje analizę strony internetowej pod kątem Progressive Web Application.
Wypisane rekomendacje nie muszą być wszystkie spełnione, aby strona była dobrą aplikacją internetową. Należy dostosować wdrażane rozwiązania do danej witryny. Jednak na pewno warto przemyśleć wszystkie proponowane rozwiązania, aby Twoja aplikacja działała szybko i była zoptymalizowana.
Zobacz także: Jak poprawić wynik strony internetowej w PageSpeed Insights
Podsumowanie
Opisany tutaj sposób implementacji PWA jest wersją podstawową - powyższe kroki należy wykonać, aby strona internetowa lub sklep internetowy stały się progresywną aplikacją internetową.
Dzięki wdrożeniu PWA możesz sprawić, że Twoja witryna będzie bardziej przyjazna dla osób otwierających ją na urządzeniach mobilnych, będzie działać w trybie offline, może wysyłać powiadomienia PUSH na telefony z Androidem, a zainstalować można ją na prawie każdym urządzeniu mobilnym.
