Jak wdrożyć PWA w Angular: Przewodnik krok po kroku dla deweloperów

Progressive Web Apps (PWA) to nowoczesne aplikacje łączące cechy technologii mobilnych z przeglądarką. Dzięki możliwości pracy offline, szybkiemu ładowaniu i opcji instalacji na urządzeniu, PWA zdobywa popularność wśród deweloperów i użytkowników.

Implementacja PWA w Angular wymaga kilku istotnych kroków. Rozpoczęcie pracy to instalacja Angular CLI i utworzenie projektu. Następnie dzięki Angular Service Worker można dodawać funkcje PWA. Istotne jest także skonfigurowanie manifestu i dodanie ikon. W tym artykule szczegółowo omówimy każdy krok, by ułatwić ich implementację w Twojej aplikacji.

Warto inwestować czas w naukę o PWA, ponieważ technologie te znacząco poprawiają wydajność i dostępność aplikacji. Tworzenie PWA w Angular to krok ku przyszłości, zwiększając zadowolenie użytkowników.

Wprowadzenie do Progressive Web Apps (PWA)

Progressive Web Apps (PWA) to innowacyjne projekty tworzenia aplikacji internetowych, które łączą zalety aplikacji mobilnych z klasycznymi stronami. Dzięki PWA użytkownicy mogą korzystać z wielu ciekawych funkcji. Najważniejsze z nich to:

• dostępność offline,
• opcja instalacji na urządzeniach,
• błyskawiczne ładowanie.

Dzięki Service Workers w PWA możliwe jest korzystanie z aplikacji bez internetu, co znacząco podnosi komfort, szczególnie w miejscach o słabym zasięgu. Instalacja aplikacji na urządzeniach sprawia, że działają one jak klasyczne aplikacje, zwiększając zaangażowanie. Szybkie ładowanie to kluczowy element zadowolenia, ponieważ użytkownicy często rezygnują, jeśli czas ładowania przekracza 3 sekundy.

Zastosowanie PWA przynosi wiele korzyści. Badania pokazują, że użytkownicy korzystają z nich czterokrotnie intensywniej, co przekłada się na lepsze wskaźniki konwersji i lojalności. W odpowiedzi na rosnące wymagania rynku i popularność urządzeń mobilnych, PWA są doskonałym rozwiązaniem.

Dlaczego warto tworzyć aplikacje PWA w Angular?

Tworzenie PWA w Angularze jest korzystne, szczególnie dla programistów poszukujących efektywnych rozwiązań. Angular jako framework oferuje komfort w użyciu komponentów, co przyspiesza rozwój aplikacji.

Angular promuje także wykorzystanie TypeScript, co poprawia czytelność oraz analizę kodu, a także pozwala tworzyć elastyczne i łatwe w zarządzaniu aplikacje. Ponadto, Angular oferuje narzędzia zoptymalizowane dla PWA, takie jak Angular Service Worker, co ułatwia implementację funkcji offline i zarządzanie cache’em.

Przykłady wdrożenia PWA w Angular pokazują redukcję czasu ładowania o 50% oraz wzrost retencji użytkowników o 30%. Dzięki zaawansowanym możliwościom Angulara i wsparciu społeczności, jest on jednym z najlepszych wyborów do tworzenia aplikacji PWA.

Obowiązkowe komponenty PWA

Aplikacje PWA mają na celu oferowanie użytkownikom doświadczeń porównywalnych z aplikacjami natywnymi. By osiągnąć ten cel, każda aplikacja PWA musi zawierać kilka kluczowych elementów.

Manifest

Manifest PWA to plik JSON przekazujący przeglądarkom istotne dane o aplikacji, takie jak nazwa czy ikony. Jego głównym celem jest umożliwienie instalacji aplikacji na urządzeniach, co czyni go nieodzownym elementem instalowalności.

Service Worker

Service Worker to skrypt działający w tle, zarządzający cache’em i umożliwiający działanie offline. Pozwala on prezentować treści użytkownikom nawet bez internetu i zarządzać powiadomieniami push, co zwiększa interaktywność.

Inne komponenty

Dodatkowe elementy w PWA to technologie do przechowywania danych lokalnie oraz API jak Geolocation, Notifications, Fetch, które wzbogacają funkcjonalność aplikacji.

Instalacja i konfiguracja PWA w Angular

Aby zainstalować i skonfigurować PWA w Angular, wykonaj następujące kroki:

Krok 1: Instalacja pakietów

Najpierw zainstaluj Angular PWA używając polecenia:

ng add @angular/pwa

To doda niezbędne pliki konfiguracyjne i wszystkie wymagane pakiety.

Krok 2: Konfiguracja manifestu

Manifest (plik manifest.webmanifest) zostanie automatycznie utworzony. Upewnij się, że jest prawidłowo skonfigurowany: dodaj ikony i właściwości, jak name, short_name, theme_color.

Krok 3: Ustawienia serwisu

Dodaj plik serwisu (Service Worker) ngsw-config.json, by dostosować cache aplikacji i strategie aktualizacji.

Krok 4: Budowanie aplikacji

Skorzystaj z komendy, by zbudować aplikację z obsługą PWA:

ng build --prod

Użyj opcji --prod dla pełnej optymalizacji.

Krok 5: Testowanie PWA

Przetestuj aplikację w przeglądarce, zmieniając protokół na HTTPS, używając lokalnych serwerów HTTP jak http-server czy lite-server.

Więcej informacji znajdziesz w oficjalnej dokumentacji Angular.

Dodanie paczki @angular/pwa

Dodanie paczki @angular/pwa do Angular pozwala przekształcić aplikację w PWA. Paczka zawiera kluczowe elementy wspierające funkcje offline, push notifications czy lepsze działanie na urządzeniach mobilnych. By dodać paczkę, użyj komendy:

ng add @angular/pwa

Proces jest prosty: uruchom komendę w katalogu głównym projektu Angular. Paczka automatycznie dodaje niezbędne pliki konfiguracyjne, m.in. ngsw-config.json i zmiany w angular.json, co umożliwia działanie aplikacji jako PWA.

Dzięki paczce @angular/pwa można korzystać z zaawansowanych funkcji, jak cache’owanie zasobów i ochrona odpowiedzi HTTP, co poprawia pracę aplikacji offline.

"architect": {
  "build": {
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets",
        {
          "glob": "**/*",
          "input": "./src/manifest",
          "output": "./manifest/"
        }
      ],
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json"
    },
    ...
  },
  ...
}

"serve": {
  "options": {
    "ssl": true,
    "sslKey": "path/to/ssl/key",
    "sslCert": "path/to/ssl/cert"
  }
}

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./src/manifest",
                "output": "./manifest/"
              }
            ],
            ...
          }
        },
        "serve": {
          "options": {
            "ssl": true,
            ...
          }
        }
      }
    }
  }
}

Tworzenie i aktualizacja manifestu PWA

Manifest PWA, plik JSON, określa właściwości aplikacji webowej w stylu natywnym. Kluczowe elementy, które powinny się w nim znaleźć, to nazwa aplikacji, ikona, tło oraz orientacja ekranu. Funkcjonowanie aplikacji zależy od tego pliku, umożliwia bowiem jej instalację na urządzeniach mobilnych.

Aby stworzyć manifest, utwórz nowy plik JSON (najczęściej manifest.json) i umieść w nim odpowiednie klucze i wartości. Przykład:

{
    "name": "Moja Aplikacja",
    "short_name": "Aplikacja",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#FFFFFF",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Ważne elementy: name, start_url, icons. start_url określa stronę startową aplikacji, a icons definiuje rozmiary ikon na urządzeniach mobilnych.

Zmiany w manifestu wprowadza się, odpowiadając na potrzeby aplikacji lub użytkowników. Po aktualizacji, użytkownicy mogą być zmuszeni do odświeżenia aplikacji. Linki do dokumentacji PWA: MDN Web Docs i W3C PWA Specification.

Rejestracja Service Workera

Rejestracja Service Workera w Angular to niezbędny krok do pełnego wykorzystania możliwości PWA. Service Worker działa w tle, pozwalając na efektywne zarządzanie danymi oraz obsługę powiadomień push i cache’u.

Aby zarejestrować go w Angular, wykonaj następujące kroki:

1. Instalacja Angular Service Worker: Zainstaluj za pomocą:

ng add @angular/pwa

2. Rejestracja Service Workera: Otwórz app.module.ts i dodaj ServiceWorkerModule:

import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
     declarations: [ /* Twoje komponenty */ ],
     imports: [
         ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
     ],
     bootstrap: [AppComponent]
})
export class AppModule { }

3. Dodanie pliku konfiguracyjnego: Upewnij się, że w katalogu projektu są pliki takie jak ngsw-config.json definiujące strategię cache’u.
4. Budowanie aplikacji: Użyj:

ng build --prod

5. Testowanie: Testuj aplikację z Service Workerem, uruchamiając lokalnie serwer, np. http-server.

Efektywne użycie Service Workera w Angularze poprawia wydajność aplikacji i doświadczenie użytkownika, umożliwiając m.in. funkcje offline.

Co to jest Service Worker?

Service Worker to skrypt działający w tle, niezależnie od aplikacji webowej. Jego celem jest zwiększenie wydajności i dostępności aplikacji, nawet w trybie offline.

Funkcje Service Workera:

• Zarządzanie cache’em: Przechowuje zasoby, skracając czas ładowania i zmniejszając koszty danych,
• Powiadomienia push: Wysyła wiadomości do użytkowników, gdy przeglądarka jest zamknięta,
• Intercepcja żądań: Pozwala na adaptację odpowiedzi, umożliwiając tworzenie aplikacji działających offline,
• Tryb offline: Dzięki cache’owaniu, aplikacje mogą działać bez internetu, co podnosi ich funkcjonalność w obszarach o słabej łączności.

Service Worker to fundament PWA, który znacząco poprawia doświadczenia użytkowników.

Jak zarejestrować Service Workera w Angular?

Zarejestrowanie Service Workera w Angular to kluczowy krok, który ułatwia wdrożenie aplikacji offline i przyspieszenie ładowania. Oto instrukcja krok po kroku.

Krok 1: Instalacja pakietu

Wpierw upewnij się, że masz zainstalowany pakiet @angular/pwa, używając komendy:

ng add @angular/pwa

Krok 2: Rejestracja Service Workera

W app.module.ts dodaj rejestrację Service Workera:

import { ServiceWorkerModule } from '@angular/service-worker';

Dodaj do importów z ustawieniem:

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

Krok 3: Konfiguracja pliku ngsw-config.json

Stwórz lub edytuj ngsw-config.json w katalogu projektu, by dostosować cache i aktualizacje dla Service Workera.

Krok 4: Budowanie aplikacji

Zbuduj aplikację ukomendą:

ng build --prod

Service Worker będzie teraz zarejestrowany w Twojej aplikacji Angular, przyspieszając jej działanie i zapewniając funkcjonalność offline.

Rola Angular Service Worker

Angular Service Worker pełni kluczową rolę w aplikacjach bazujących na frameworku Angular, zwłaszcza jako PWA. Główne zadania obejmują zarządzanie cache’em, zapewnienie offline funkcji oraz obsługę powiadomień push. Dzięki nim aplikacje są bardziej wydajne.

Jedną z najważniejszych funkcji Angular Service Workera jest cache’owanie zasobów, które pozwala aplikacjom działać w trybie offline. Przechowuje pliki takie jak CSS, obrazy i skrypty JavaScript, co przyspiesza ładowanie i poprawia wrażenia użytkowników.

Angular Service Worker monitoruje też aktualizacje aplikacji, automatycznie uaktualniając cache, co daje użytkownikom dostęp do najnowszych funkcji bez konieczności odświeżania strony.

Obsługa powiadomień push w Angular Service Worker umożliwia deweloperom wdrożenie mechanizmów komunikacyjnych, informując użytkowników o nowych aktualizacjach lub ofertach.

Funkcje Angular Service Workera wspierają budowę aplikacji, które są responsywne i dostępne, niezależnie od stanu połączenia internetowego. Jest to szczególnie ważne w kontekście PWA, ponieważ pomaga dostarczać płynne i wydajne aplikacje na różne urządzenia.

Cache’owanie zasobów i synchronizacja danych

Cache’owanie zasobów to kluczowa technika optymalizacji aplikacji webowych, z Service Workerem jako centralnym elementem tego procesu. Działa on w tle, pozwalając na przechowywanie zasobów, co zmniejsza liczbę zapytań sieciowych i przyspiesza ładowanie.

Główną strategią cache’owania jest „Cache First”. Polega ona na próbie pobrania danych z cache’u przed sięgnięciem do serwera. Pozwala to na pracę offline i nadal działającą aplikację. Oto przykład wdrożenia w Service Workerze:

self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request)
        .then((response) => {
            return response || fetch(event.request);
        })
    );
});

Innym ważnym aspektem jest synchronizacja danych, gdzie Service Worker oferuje opóźnione przesyłanie na serwer, przydatne offline. Może to być realizowane poprzez Background Sync, gwarantujące wysyłanie danych po odzyskaniu internetowego dostępu. Przykład:

self.addEventListener('sync', (event) => {
    if (event.tag === 'sync-data') {
        event.waitUntil(syncData());
    }
});

Synchronizacja danych w PWA jest ważna, ponieważ pozwala kontynuować pracę również bez połączenia. Zarządzanie cache’em oraz synchronizacją danych wpływa znacząco na wydajność i użytkowanie, czyniąc aplikacje bardziej responsywnymi i solidnymi.

Jak działa cache’owanie w Service Workerze?

Cache’owanie w Service Workerze stanowi istotny mechanizm umożliwiający tworzenie szybkich aplikacji webowych, szczególnie w PWA (Progressive Web Apps). Mechanizm obejmuje przechowywanie zasobów aplikacji w pamięci podręcznej, co pozwala na ich szybsze ładowanie w przyszłości.

Service Worker, działający w tle, potrafi przechwytywać żądania sieciowe i wykorzystywać API Cache do zapisu odpowiedzi HTTP. Proces ten obejmuje kluczowe kroki:

1. Rejestracja Service Workera – Aplikacja ustala, które skrypty zarządzały będą cache’em.
2. Instalacja – Podczas tego etapu istotne zasoby (CSS, JS, ikony) można załadować do pamięci podręcznej.
3. Aktywacja – Service Worker uzyskuje aktywność i zarządza żądaniami sieciowymi poprzez ustalanie, które zapytania kierowane będą do pamięci lub sieci.
4. Intercepcja żądań – Service Worker może przechwytywać HTTP fetch requests, wykorzytując zasoby z cache, przyspieszając ładowanie i umożliwiając działanie offline.
5. Zarządzanie cache’em – Umożliwia to aktualizację czy usunięcie zasobów, aby uniknąć przepełnienia pamięci i zapewnić aktualność danych.

Przykłady obejmują aplikacje umożliwiające przeglądanie treści offline, co jest ważne przy niestabilnych połączeniach. MDN oferuje szczegółową dokumentację na temat cache’owania w PWA, co stanowi cenne źródło wiedzy dla deweloperów. Wdrażanie cache’owania w Service Workerze zdecydowanie zwiększa wydajność i użytkowość aplikacji, polepszając je pod kątem user experience.

Synchronizacja danych w tle z użyciem Service Workera

Service Worker oferuje możliwość synchronizacji danych w tle dla PWA (Progressive Web Apps). Dzięki temu, aplikacje mogą funkcjonować offline oraz synchronizować dane, co poprawia ich wydajność i user experience.

Jedną z istotnych funkcji Service Workera jest „Background Sync”, który pozwala na wykonywanie zadań w tle, nawet gdy aplikacja jest zamknięta. Metody synchronizacji obejmują:

• Synchronizacja z dostępem do sieci: Aplikacje mogą ubiegać się o synchronizację działań wyłącznie wtedy, kiedy jest dostęp do internetu. BackgroundSyncManager umożliwia ustalenie priorytetów dla danych przesyłowych.
• Automatyczne próby przesyłania: System monitoruje zadania, które nie zakończyły się z powodu braku sieci. Po odzyskaniu połączenia Service Worker automatycznie wznawia synchronizację.
• Zdarzenie sync: Deweloperzy mogą implementować logikę synchronizacji danych z użyciem sync. Po zarejestrowaniu, zadania takie jak przesył danych na serwer i aktualizacja lokalnego cache mogą być realizowane.

Synchronizacja danych w tle przy użyciu Service Workera znacznie poprawia wydajność PWA, pozwalając użytkownikom na ciągłe korzystanie z aplikacji. Przykładowo, aplikacje do notowania mogą synchronizować notatki przy dostępie do internetu, co umożliwia użytkownikom łatwe korzystanie z aplikacji, bez względu na stan łączności.

Testowanie i publikacja aplikacji PWA

Skuteczne testowanie PWA wymaga pewnych kluczowych zasad. Istotnym krokiem jest zapewnienie zgodności aplikacji różnymi przeglądarkami i urządzeniami, za pomocą narzędzi takich jak Lighthouse do analizy wydajności czy SEO, a także testowanie responsywności i funkcjonalności offline.

Serwery dla PWA muszą obsługiwać HTTPS, co umożliwia korzystanie z zaawansowanych funkcji. Ważne jest odpowiednie skonfigurowanie manifestu aplikacji oraz Service Workera, co przyspiesza działanie aplikacji.

Publikacja PWA na GitHub wymaga utworzenia repozytorium i dodania plików projektu. Można użyć GitHub Pages do hostingu. To dogodne rozwiązanie umożliwia łatwe zarządzanie kodem i wersjami aplikacji.

Podsumowując, testowanie i publikacja PWA wymagają strategicznego podejścia i użycia technologicznych zasobów, aby oferować wysokiej jakości aplikacje dla użytkowników.

Wymagania dotyczące HTTP Servera

Serwer HTTP jest kluczowy dla działania i dostarczania aplikacji PWA. Wymagania serwera obejmują wsparcie dla HTTPS, co jest niezbędne do funkcji PWA jak powiadomienia push i bezpieczeństwo danych użytkownika.

Konieczne jest właściwe ustawienie nagłówków CORS dla udostępniania zasobów między źródłami. Obsługa cache oraz Service Workerów jest kluczowa. Serwery powinny wspierać nagłówki określające, jak długo zasoby powinny być przechowywane, co optymalizuje wydajność.

Przykłady to Nginx i Apache oferujące elastyczną konfigurację. Nginx pozwala na łatwe ustawienie nagłówków i reguł CORS, Apache zapewnia moduły dla zarządzania zasobami, co jest konieczne dla aplikacji PWA.

Podsumowując, serwer HTTP spełniający wymagania PWA gwarantuje bezpieczeństwo, konfigurację CORS, obsługę cache oraz Service Workerów.

Testowanie aplikacji PWA w przeglądarkach

Testowanie PWA jest kluczowe dla ich prawidłowego funkcjonowania w różnych przeglądarkach, jak Google Chrome czy Safari. PWA muszą działać płynnie niezależnie od przeglądarki; narzędzia analityczne i metody testowe odgrywają tu istotną rolę.

Głównym skupiskiem testów jest zgodność z różnymi standardami webowymi. Narzędzia, takie jak Lighthouse w Chrome, oceniają jakość PWA oraz wskazują obszary do poprawy. Wydajność to drugi kluczowy etap – należy oceniać czas ładowania, responsywność i interaktywność, szczególnie na urządzeniach mobilnych. Pomocne są tu WebPageTest i PageSpeed Insights.

Testowanie obejmuje także offline funkcjonalność, kluczowy aspekt PWA. Należy ocenić, czy aplikacja prawidłowo cache’uje dane i wspiera offline usługi, odłączając urządzenie od sieci. Dla Safari warto zwrócić uwagę na obsługę Service Workerów i manifestu aplikacji. Testy na urządzeniach iOS są zalecane.

Podsumowując, testowanie PWA w różnych przeglądarkach wymaga szerokiej gamy metod i narzędzi zapewniających zgodność, wydajność i funkcjonalność aplikacji.

Publikacja aplikacji na GitHubie i innych platformach

Publikacja PWA na GitHubie i innych platformach wymaga kilku kroków. GitHub, jako popularna platforma do współpracy nad kodem, stanowi idealne miejsce do udostępniania projektów.

Pierwszym krokiem jest utworzenie repozytorium na GitHubie. Następnie dodaj pliki projektu, poprzez przesyłanie bezpośrednie lub za pomocą Git. Warto dołączać plik README, który opisuje aplikację i jej funkcje.

Konfiguracja GitHub Pages umożliwia publikację aplikacji. W ustawieniach repozytorium wybierz odpowiednią gałąź i folder dla publikacji.

Do hostingu PWA popularny jest także Netlify, umożliwiający łatwe wdrażanie aplikacji. Proces publikacji generuje unikalny adres URL do aplikacji.

Ważnym elementem jest testowanie: sprawdź, czy aplikacja działa poprawnie w różnych przeglądarkach i na urządzeniach. Regularne aktualizacje i wsparcie zwiększają popularność aplikacji.

Przykłady zastosowania PWA w Angular

Aplikacje PWA zbudowane w Angularze są popularne dzięki wydajności i dostępności. Przykłady pokazują, jak tradycyjne aplikacje przerwać w nowoczesne, oferując lepsze doznania użytkowników.

Przykładowa aplikacja Claim Register, używana do zarządzania roszczeniami, wykorzystuje PWA, oferując działanie offline, co znacząco zwiększa dostępność i wydajność niezależnie od dostępu do sieci internetowej.

Claim Register oferuje:

• Powiadomienia push: Użytkownicy otrzymują aktualizacje o zgłoszeniach,
• Caching: Dzięki Service Workerom aplikacja wykorzystuje cache, przyspieszając ładowanie stron,
• Responsywny interfejs: Automatyczne dostosowanie do różnych ekranów, dla użytkowników mobilnych i desktopowych.

Inne przykłady PWA w Angular obejmują aplikacje e-commerce z zakupami offline oraz informacyjne, poprawiające dostępność treści bez względu na warunki sieciowe – kluczowe w obszarach z niskim zasobem Internetu.

Dzięki PWA aplikacje Angular zyskują na wydajności, polepszając user experience i stając się bardziej konkurencyjnymi w świecie aplikacji webowych.

@Component({
    selector: 'app-claim-registration',
    templateUrl: './claim-registration.component.html',
})
export class ClaimRegistrationComponent {
    claimForm = this.fb.group({
        title: ['', Validators.required],
        description: ['', Validators.required],
    });
    
    constructor(private fb: FormBuilder) {}
}

Inne przykłady i źródła informacji o PWA w Angular

PWA w Angular biją rekordy popularności, oferując użytkownikom dostęp offline i optymalizację na różne platformy. Oto kilka przykładów PWA w Angular oraz pomocne źródła dla deweloperów.

Przykłady PWA w Angular

• Ionic Framework: Ionic wspiera PWA i tworzenie aplikacji mobilnych/webowych w Angularze.
• Angular PWA Starter: Szablon projektu PWA, pozwalający na szybki start.
• News App: Aplikacja do przeglądania wiadomości offline z użyciem cache’u.
• E-commerce App: Aplikacja e-commerce wspierająca zakupy offline i przy słabym dostępie do internetu.

Źródła informacji

• Dokumentacja Angular: Oficjalna dokumentacja obejmuje sekcję o PWA, z radami nt. implementacji i najlepszych praktyk.
• Blogi i artykuły: Medium i inne blogi programistyczne omawiają metody użycia PWA w Angular.
• GitHub: Wiele repozytoriów zawiera przykłady PWA w Angular, jako dobry start.
• Kursy online: Platformy edukacyjne oferują kursy o tworzeniu PWA w Angular, dla lepszego zrozumienia tematu.

Te aplikacje oraz źródła umożliwiają deweloperom nauczenie się, jak skutecznie tworzyć PWA w Angular.

Radosław Kosiński

Hej, jestem webmasterem od 2007 roku i prowadzę swojego bloga, który dotyczy tej tematyki i jej podobnym. Zapraszam do przeglądania mojego bloga i wpisów!