{"id":29534,"date":"2020-01-22T07:21:30","date_gmt":"2020-01-22T06:21:30","guid":{"rendered":"https:\/\/nearshore-it.eu\/artykuly\/angular-zrobmy-swoja-progressive-web-application\/"},"modified":"2024-11-07T13:51:27","modified_gmt":"2024-11-07T12:51:27","slug":"angular-zrobmy-swoja-progressive-web-application","status":"publish","type":"post","link":"https:\/\/nearshore-it.eu\/pl\/artykuly\/angular-zrobmy-swoja-progressive-web-application\/","title":{"rendered":"Angular \u2013 zr\u00f3bmy swoj\u0105 PWA (Progressive Web App)"},"content":{"rendered":"\n
\n

Przejd\u017a do:<\/p>\n

    \n
  1. 1. Co to\u00a0jest PWA?<\/a><\/li>\n
  2. 2. Progressive Web App \u2013 czy\u00a0warto?<\/a><\/li>\n
  3. 3. PWA\u2013\u00a0narz\u0119dzia dla developera<\/a><\/li>\n
  4. 4. Dodanie Progressive Web App do\u00a0Angulara<\/a><\/li>\n
  5. 5. Jak sprawdzi\u0107 dzia\u0142anie PWA?<\/a><\/li>\n
  6. 6. Mamy PWA \u2013 co dalej?<\/a><\/li>\n
  7. 7. Podsumowanie<\/a><\/li>\n <\/ol>\n<\/div>\n\n\n

    Co to jest PWA?<\/strong><\/h2>\n\n\n\n

    Aplikacja PWA (Progressive Web App) jest stron\u0105 internetow\u0105, kt\u00f3ra zachowuje si\u0119 jak aplikacja mobilna. Upraszczaj\u0105c, aplikacja PWA od „zwyk\u0142ej” strony internetowej z JavaScript r\u00f3\u017cni si\u0119 w zasadzie tym, \u017ce posiada service worker oraz plik manifest json. Z punktu widzenia u\u017cytkownika dzia\u0142a niemal jak natywna aplikacja mobilna, poniewa\u017c service worker umo\u017cliwia dzia\u0142anie w trybie offline, a plik manifest json odpowiada za jej wizualne podobie\u0144stwo. Z punktu widzenia developera aplikacja PWA daje mo\u017cliwo\u015bci stworzenia lepszego do\u015bwiadczenia dla u\u017cytkownika ko\u0144cowego. W tym kr\u00f3tkim artykule postaram si\u0119 opisa\u0107 konfiguracj\u0119 PWA przy u\u017cyciu Angulara, kt\u00f3ra jest bardzo prosta dzi\u0119ki natywnemu wsparciu przez Angular CLI. Sama konfiguracja service workera nie ogranicza nas jednak tak naprawd\u0119 do u\u017cycia okre\u015blonego frameworka JavaScript, typu React Angular czy Vue.js.<\/p>\n\n\n\n

    Progressive Web App \u2013 czy warto?<\/strong><\/h2>\n\n\n\n

    Ponad po\u0142owa internaut\u00f3w w Polsce korzysta ze stron internetowych za pomoc\u0105 urz\u0105dze\u0144 mobilnych, a posiadanie responsywnej, szybko \u0142aduj\u0105cej si\u0119 strony to obecnie by\u0107 albo nie by\u0107 w e-commerce. Wykorzystanie poprawnie zbudowanej aplikacji PWA znacznie u\u0142atwia spe\u0142nienie wymaga\u0144 i zalece\u0144 optymalizacyjnych Google\u2019a, przek\u0142ada si\u0119 te\u017c na konkretne rezultaty \u2013 w niekt\u00f3rych przypadkach PWA pozwoli\u0142a podnie\u015b\u0107 wsp\u00f3\u0142czynnik konwersji o 70%<\/a>.<\/p>\n\n\n\n

    Korzystanie z aplikacji PWA u\u0142atwia mo\u017cliwo\u015b\u0107 jej instalacji na pulpicie urz\u0105dzenia ko\u0144cowego (nie wymaga pobierania z Google Play\/ App Store). U\u017cytkownik mo\u017ce korzysta\u0107 z aplikacji w trybie offline (dane zsynchronizuj\u0105 si\u0119 w momencie nawi\u0105zania po\u0142\u0105czenia). PWA to r\u00f3wnie\u017c funkcjonalno\u015b\u0107 powiadomie\u0144 push, kt\u00f3re znacz\u0105co zwi\u0119kszaj\u0105 zaanga\u017cowanie i s\u0105 skuteczn\u0105 metod\u0105 odzyskiwania utraconych koszyk\u00f3w w e-commerce.<\/p>\n\n\n\n

    Koszt rozwoju i utrzymania aplikacji PWA jest niepor\u00f3wnywalnie mniejszy ni\u017c w przypadku aplikacji natywnych. Nie wymaga akceptacji procesu aktualizacji po stronie sklepu z aplikacjami, co znacznie usprawnia szybko\u015b\u0107 wdra\u017cania kolejnych wersji, u\u0142atwia te\u017c analiz\u0119 danych i raportowanie.<\/p>\n\n\n\n

    Progressive Web Apps \u2013<\/strong> narz\u0119dzia dla developera<\/strong><\/h2>\n\n\n\n

    Istniej\u0105 liczne strony takie jak https:\/\/whatwebcando.today\/<\/a>, <\/u>kt\u00f3re zapewniaj\u0105 wsparcie dla developer\u00f3w. W prosty spos\u00f3b mo\u017cna uzyska\u0107 dost\u0119p do komponent\u00f3w poprzez JavaScript i service workera. Warto tutaj wspomnie\u0107, \u017ce pe\u0142ne wsparcie komponent\u00f3w posiada jedynie Google Chrome na systemie Android. Niestety, iPhone z Safari ogranicza nas w niekt\u00f3rych miejscach. Wsparcie komponent\u00f3w tak dynamicznie si\u0119 zmienia, \u017ce nie warto tutaj porusza\u0107 tematu r\u00f3\u017cnic mi\u0119dzy przegl\u0105darkami. W pierwszej cz\u0119\u015bci artyku\u0142u postaram si\u0119 wyt\u0142umaczy\u0107, jak w pe\u0142ni skonfigurowa\u0107 oraz przetestowa\u0107 nasz\u0105 aplikacj\u0119. W dalszej cz\u0119\u015bci skupi\u0119 si\u0119 na innych komponentach, jak tryb offline, notyfikacje, geolokalizacja czy dost\u0119p do plik\u00f3w. Gotowi na przygod\u0119 z PWA? Zacznijmy!<\/p>\n\n\n\n

    Dodanie Progressive Web App do Angulara<\/strong><\/h2>\n\n\n\n

    Zaczynamy od zainstalowania aplikacji angularowej przez Angular CLI. Nast\u0119pnie nale\u017cy wywo\u0142a\u0107 komend\u0119 ng add @angular\/pwa<\/strong><\/p>\n\n\n

    \n
    \"PWA<\/figure>\n<\/div>\n\n\n
    <\/div>\n\n\n\n

    Dzi\u0119ki temu w naszym folderze zostaje dodanych kilka plik\u00f3w potrzebnych do uruchomienia PWA:<\/p>\n\n\n\n

    ngsw-config.json<\/strong> \u2013 plik konfiguracyjny, kt\u00f3ry pozwala na ustawienie regu\u0142 cache\u2019owania danych. Wi\u0119cej informacji o strategiach cache\u2019owania mo\u017cna znale\u017a\u0107 tutaj: https:\/\/serviceworke.rs\/caching-strategies.html<\/a><\/p>\n\n\n

    \n
    \"PWA<\/figure>\n<\/div>\n\n\n
    <\/div>\n\n\n\n

    Na konfiguracji tego pliku skupimy si\u0119 w kolejnej cz\u0119\u015bci artyku\u0142u.<\/em><\/p>\n\n\n\n

    manifest.webmanifest<\/strong> \u2013 plik konfiguracyjny, kt\u00f3ry pozwala na ustawienie zachowania naszej aplikacji po zapisaniu przez u\u017cytkownika (orientacja, kolory, ikony).<\/p>\n\n\n

    \n
    \"PWA<\/figure>\n<\/div>\n\n\n
    <\/div>\n\n\n\n

    *.png<\/strong> \u2013 domy\u015blne ikony, kt\u00f3re b\u0119d\u0105 wy\u015bwietla\u0107 si\u0119 u\u017cytkownikowi po zapisaniu aplikacji na pulpicie ekranu.<\/p>\n\n\n\n

    Dodatkowo zostan\u0105 zaktualizowane pliki:<\/p>\n\n\n\n

    angular.json<\/strong> (ustawiona flaga ServiceWorker: true),<\/p>\n\n\n\n

    index.html<\/strong> \u2013 dodana linijka do wczytania manifestu,<\/p>\n\n\n\n

    app.module.ts<\/strong><\/p>\n\n\n

    \n
    \"PWA<\/figure>\n<\/div>\n\n\n
    <\/div>\n\n\n\n

    Dzi\u0119ki temu nasza aplikacja wie, \u017ce gdy uruchomimy j\u0105 w trybie produkcyjnym, service worker powinien zosta\u0107 zarejestrowany do naszej przegl\u0105darki.<\/p>\n\n\n\n

    Jak sprawdzi\u0107 dzia\u0142anie PWA?<\/h2>\n\n\n\n

    Niestety samo uruchomienie aplikacji przez Angular CLI nie pozwoli nam sprawdzi\u0107, czy service worker dzia\u0142a poprawnie. Mo\u017cemy jednak w \u0142atwy spos\u00f3b to obej\u015b\u0107, uruchamiaj\u0105c zbudowan\u0105 przez siebie aplikacj\u0119 lokalnie. Mo\u017cna to zrobi\u0107 \u0142atwo w dw\u00f3ch krokach.<\/p>\n\n\n\n

      \n
    1. Budujemy aplikacj\u0119 w trybie produkcyjnym: ng build –prod<\/strong><\/li>\n\n\n\n
    2. Uruchamiamy http-server (je\u017celi nie mamy zainstalowanego lokalnie, to najpierw: npm i http-server -g<\/strong>) komenda: http-server .\/dist\/pwa-test -o<\/strong><\/li>\n<\/ol>\n\n\n\n

      Pami\u0119tajmy, \u017ce po dist<\/strong> nale\u017cy wprowadzi\u0107 swoj\u0105 nazw\u0119 aplikacji. Po wpisaniu komendy powinna uruchomi\u0107 si\u0119 nasza strona internetowa. Aby sprawdzi\u0107 poprawno\u015b\u0107 service workera i manifestu, u\u017cyjemy wbudowanych narz\u0119dzi w Google Chrome. Po uruchomieniu Developers Tools przechodzimy do zak\u0142adki Application.<\/strong><\/p>\n\n\n\n

      <\/div>\n\n\n
      \n
      \"PWA<\/figure>\n<\/div>\n\n\n
      <\/div>\n\n\n\n

      W menu bocznym Service Worker<\/strong> powinni\u015bmy zobaczy\u0107 informacj\u0119, \u017ce nasz service worker zosta\u0142 odnaleziony i jest poprawnie zainstalowany.<\/p>\n\n\n\n

      W zak\u0142adce Manifest<\/strong> znajdziemy z kolei informacj\u0119, czy domy\u015blna konfiguracja (kolory, ikony oraz nazwa) jest zaimportowana poprawnie.<\/p>\n\n\n\n

      <\/div>\n\n\n
      \n
      \"PWA<\/figure>\n<\/div>\n\n\n
      <\/div>\n\n\n\n

      Wszystkie te dane s\u0105 zaczytywane z plik\u00f3w, kt\u00f3re zosta\u0142y wygenerowane przez Angular CLI po zbudowaniu aplikacji. Znajduj\u0105 si\u0119 one w folderze \/dist\/NazwaAplikacji.<\/strong><\/p>\n\n\n\n

      <\/div>\n\n\n
      \n
      \"PWA<\/figure>\n<\/div>\n\n\n
      <\/div>\n\n\n\n

      Dzi\u0119ki pozytywnemu wgraniu manifestu oraz service workera nasza aplikacja pozwala na korzystanie w pe\u0142ni z komponent\u00f3w na urz\u0105dzeniu mobilnym czy komputerze.<\/p>\n\n\n\n

      Mamy PWA \u2013 co dalej?<\/h2>\n\n\n\n

      Dzi\u0119ki domy\u015blnej konfiguracji mo\u017cemy jedynie zapisa\u0107 nasz\u0105 aplikacj\u0119 na telefonie czy komputerze. Aby to zrobi\u0107, na komputerze wystarczy klikn\u0105\u0107 ikon\u0119 plusika obok adresu strony internetowej.<\/p>\n\n\n\n

      <\/div>\n\n\n
      \n
      \"PWA<\/figure>\n<\/div>\n\n\n
      <\/div>\n\n\n\n

      Nazwa oraz ikona s\u0105 pobierane z pliku manifest.<\/strong><\/p>\n\n\n\n

      Po zapisaniu nasza strona internetowa b\u0119dzie zachowywa\u0107 si\u0119 jak aplikacja, a u\u017cytkownik nie jest \u015bwiadomy, \u017ce uruchamia stron\u0119 internetow\u0105 w przegl\u0105darce. Po uruchomieniu aplikacji (po zapisaniu) powinno nam si\u0119 wy\u015bwietli\u0107 tak wygl\u0105daj\u0105ce okno:<\/p>\n\n\n\n

      <\/div>\n\n\n
      \n
      \"PWA<\/figure>\n<\/div>\n\n\n
      <\/div>\n\n\n\n

      Jak wida\u0107 na zdj\u0119ciu, znik\u0142 ca\u0142y g\u00f3rny pasek z adresem, dodatkami oraz zak\u0142adkami. U\u017cytkownik nie jest \u015bwiadomy, \u017ce aplikacja uruchomi\u0142a si\u0119 w przegl\u0105darce.<\/em><\/p>\n\n\n\n

      Uda\u0142o nam si\u0119 skonfigurowa\u0107 aplikacj\u0119 startow\u0105 w Angularze, tak aby zachowywa\u0142a si\u0119 jak Progressive Web Application. U\u017cytkownik korzystaj\u0105cy z naszej strony mo\u017ce na razie jedynie j\u0105 zapisa\u0107. W kolejnych krokach mo\u017cemy doda\u0107 troch\u0119 kodu do naszej aplikacji, tak aby poinformowa\u0107 u\u017cytkownika o nowych wersjach naszej strony czy umo\u017cliwi\u0107 korzystanie z niej w trybie offline. W kolejnych artyku\u0142ach rozwin\u0119 temat PWA, pisz\u0105c o tym, jak rozwin\u0105\u0107 nasz\u0105 nowo powsta\u0142\u0105 aplikacj\u0119 o nowe funkcjonalno\u015bci.<\/p>\n\n\n\n

      Podsumowanie<\/h2>\n\n\n\n

      Stworzenie i konfiguracja PWA nie s\u0105 trudne. W sieci pojawia si\u0119 coraz wi\u0119cej publikacji o mo\u017cliwo\u015bciach technologii, kt\u00f3ra ju\u017c teraz jest nazywana frontendow\u0105 rewolucj\u0105. Nic dziwnego \u2013 Progressive Web Application pozwa\u0142a w \u0142atwy spos\u00f3b stworzy\u0107 przyjazn\u0105 i szybko \u0142aduj\u0105c\u0105 si\u0119 stron\u0119. Dla developer\u00f3w to sygna\u0142, \u017ce wykorzystuj\u0105c technologi\u0119 PWA, wdra\u017caj\u0105 rozwi\u0105zanie, kt\u00f3re przyniesie konkretne, mierzalne rezultaty.<\/p>\n\n\n\n

      Czytaj r\u00f3wnie\u017c: Kt\u00f3ry framework frontendowy jest najlepszy?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

      Wraz z rozwojem rynku e-commerce ro\u015bnie rola i popularno\u015b\u0107 Progressive Web Apps. Aplikacja PWA pozwala stworzy\u0107 szybko \u0142aduj\u0105c\u0105 si\u0119 stron\u0119 w formie aplikacji mobilnej, kt\u00f3ra dzia\u0142a w trybie offline. Dodatkowo mo\u017cna liczy\u0107 tak\u017ce na docenienie przez roboty indeksuj\u0105ce Google\u2019a, zgodnie z polityk\u0105 mobile first i offline first, oraz dopracowane do\u015bwiadczenie u\u017cytkownika. W artykule poka\u017c\u0119, jak samodzielnie krok po kroku z pomoc\u0105 Angulara stworzy\u0107, a nast\u0119pnie skonfigurowa\u0107 i przetestowa\u0107 swoj\u0105 PWA.<\/p>\n","protected":false},"author":134,"featured_media":29563,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"iawp_total_views":263,"footnotes":""},"categories":[1,582],"tags":[572,570],"offering":[513],"class_list":["post-29534","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artykuly","category-technologie","tag-e-commerce","tag-javascript-pl","offering-application-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/29534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/users\/134"}],"replies":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/comments?post=29534"}],"version-history":[{"count":8,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/29534\/revisions"}],"predecessor-version":[{"id":33853,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/29534\/revisions\/33853"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/media\/29563"}],"wp:attachment":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/media?parent=29534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/categories?post=29534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/tags?post=29534"},{"taxonomy":"offering","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/offering?post=29534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}