Aplikacja Ekodom to aplikacja przeglądarkowa PWA wykonana przez Krakweb w technologii React.js w latach 2019-2020. Jest dostępna pod adresem https://www.ekodom.edu.pl Na jej przykładzie pokażę jak zainstalować aplikację PWA.
Instalacja aplikacji PWA w Google Chrome i obsługa wersji offline na przykładzie Ekodom
Instalacja aplikacji PWA w Google Chrome i obsługa wersji offline na przykładzie Ekodom
![{[description]}](https://www.krakweb.pl/uploads/modules/articles/thumbs/775_400_crop_q80_ae0c0b17c00275c.jpg)
- Spis treści [Ukryj]
- 1 Instalacja aplikacji PWA w Google Chrome
- 2 Instalowanie aplikacji PWA na urządzeniu mobilnym
- 3 Różnica pomiędzy stroną internetową, a aplikacją PWA
- 3.1 Porównanie wyglądu aplikacji PWA ze stroną internetową w przeglądarce Google Chrome.
- 4 PWA w React.js - dodatkowe informacje
Instalacja aplikacji PWA w Google Chrome
Żeby zainstalować aplikację w przeglądarce Google Chrome należy na pasku adresu (po prawej stronie obok ikonki gwiazdki) znaleźć ikonę: plusik w kółeczku
Po kliknięciu w ten plusik pojawia się okienko, w którym należy kliknąć przycisk “Zainstaluj” (aplikację). Po kliknięciu w przycisk “Zainstaluj” aplikacja instaluje się w przeglądarce Google Chrome oraz otwiera się automatycznie w nowym oknie.
Po zainstalowaniu aplikacja jest dostępna ze skrótu na pulpicie systemu oraz na pierwszym ekranie przeglądarki Google Chrome (o ile włączony masz widok prezentujący aplikacje przeglądarki, a nie np. najczęściej odwiedzane strony.
Instalowanie aplikacji PWA na urządzeniu mobilnym
Na urządzeniu mobilnym z przeglądarką Google Chrome po otwarciu strony internetowej dostępnej w postaci PWA, możliwej do instalacji, pojawia się komunikat w postaci wyskakującego z dołu ekranu okienka z pytaniem o zgodę na instalację aplikacji.
Komunikat o możliwości instalacji aplikacji PWA na urządzeniu mobilnym pojawia się w dolnej części ekranu w postaci “Dodaj aplikację” do ekranu głównego.
Kliknij w ten boks żeby zainstalować aplikację na urządzeniu mobilnym.
W kolejnym kroku przeglądarka zapyta Cię dodatkowo o potwierdzenie dodania aplikacji do ekranu głównego.
Po kliknięciu w “Dodaj” otrzymasz powiadomienie: “Dodano do ekranu głównego”. Powiadomienie to jest wysyłane przez przeglądarkę Google Chrome. W powiadomieniu widać nazwę aplikacji, domenę aplikacji oraz ikonę aplikacji.
W efekcie aplikacja pojawia się na liście aplikacji oraz w postaci skrótu na pulpicie telefonu.
Różnica pomiędzy stroną internetową, a aplikacją PWA
Aplikacja PWA to “tylko” rozszerzona forma strony internetowej. Jest stworzona w technologiach charakterystycznych dla stron internetowych - HTML CSS JavaScript. Nowoczesnym i popularnym rozwiązaniem do tworzenia tego typu aplikacji jest react.js.
Porównanie wyglądu aplikacji PWA ze stroną internetową w przeglądarce Google Chrome.
Podstawowa różnica pomiędzy stroną internetową, a aplikacją PWA polega na tym, że aplikacja wyświetla się w pełnym oknie bez paska adresu i menu przeglądarki.
Daje to zauważalną oszczędność miejsca. Dzięki brakowi paska przeglądarki aplikacja jest bardziej czytelna.
PWA w React.js - dodatkowe informacje
Zarówno z Google Chrome na laptopie jak i na urządzeniu mobilnym aplikację można odinstalować.
Żeby przetestować, czy aplikacja działa bez dostępu Internetu rozłącz połączenie internetowe.
Zainteresował Cię temat aplikacji w technologii React.js? Napisz do nas, porozmawiaj z naszym ekspertem!