{"id":815761,"date":"2020-06-22T04:38:23","date_gmt":"2020-06-22T04:38:23","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=805654\/"},"modified":"2022-08-13T12:01:14","modified_gmt":"2021-02-22T14:48:55","slug":"woocommerce-pwa-mobile-app-user-manual","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/pl\/instrukcja-obslugi\/woocommerce-pwa-mobile-app-user-manual\/","title":{"rendered":"WooCommerce PWA Mobile App – User Manual"},"content":{"rendered":"

<\/head><\/p>\n

1.0 Wprowadzenie<\/h2>\n

Ta gotowa wtyczka zosta\u0142a zaprojektowana i opracowana przez KnowBand w celu przekszta\u0142cenia dzia\u0142aj\u0105cego sklepu WooCommerce w bogat\u0105 w funkcje progresywn\u0105 aplikacj\u0119 internetow\u0105. Po przekszta\u0142ceniu sklepu eCommerce w Aplikacj\u0119 PWA, za ka\u017cdym razem, gdy dowolny u\u017cytkownik otworzy adres URL sklepu w przegl\u0105darce mobilnej, zainteresowana osoba zostanie poproszona o \u201eDodaj PWA do ekranu g\u0142\u00f3wnego\u201d. Po dodaniu aplikacji mobilnej WooCommerce PWA do ekranu g\u0142\u00f3wnego urz\u0105dzenia mobilnego, u\u017cytkownik mo\u017ce przegl\u0105da\u0107 sklep w aplikacji jak ka\u017cd\u0105 inn\u0105 aplikacj\u0119. Aplikacja mobilna WooCommerce PWA to aplikacja internetowa, kt\u00f3ra w rzeczywisto\u015bci nie opiera si\u0119 na publikacji aplikacji w Google Play i Apple App Store. U\u017cytkownicy mog\u0105 po prostu doda\u0107 Progressive Web App do urz\u0105dzenia mobilnego i u\u017cywa\u0107 jak ka\u017cdej innej aplikacji.<\/p>\n

1.1 Przekonuj\u0105ce funkcje do wyboru WooCommerce PWA:<\/h3>\n

– Szybsze \u0142adowanie i szybka wydajno\u015b\u0107 – W pe\u0142ni konfigurowalny ekran g\u0142\u00f3wny z edytorem DIY – Obs\u0142uga wszystkich metod wysy\u0142ki i p\u0142atno\u015bci w witrynie – Przyjazny dla u\u017cytkownika interfejs – Brak zale\u017cno\u015bci od sklep\u00f3w z aplikacjami – W pe\u0142ni oznaczony mark\u0105 Twojego sklepu – E-mail i logowanie spo\u0142eczno\u015bciowe (Google i Facebook ) – Obs\u0142uga wielu j\u0119zyk\u00f3w i RTL – Praca w trybie offline – Synchronizacja na \u017cywo czarno-bia\u0142a strona internetowa i aplikacja – Kompatybilny zar\u00f3wno z Androidem, jak i iOS – Jednostronna kasa – Lekka aplikacja – Zarz\u0105dzanie stronami CMS<\/p>\n

1.2 Zobacz demo PWA WooCommerce<\/h3>\n

Poznaj funkcje modu\u0142u i aplikacji PWA z poni\u017cszych link\u00f3w demonstracyjnych:<\/p>\n

Panel administracyjny modu\u0142u:<\/strong> https:\/\/wcdemo1.knowband.com\/pwa\/wp-login.php<\/a>
\nAplikacja demonstracyjna PWA:<\/strong> https:\/\/wcdemo1.knowband.com\/pwa\/pwa-app\/<\/a>
\nUwaga-<\/strong>\ufffdSkopiuj i wklej adres URL w przegl\u0105darce mobilnej i \u201eDodaj do ekranu g\u0142\u00f3wnego\u201d.<\/p>\n

[IMP] Uwagi dla iOS:<\/h4>\n

\ufffd> Urz\u0105dzenia z systemem iOS nie oferuj\u0105 wbudowanego monitu \u201eDodaj do ekranu g\u0142\u00f3wnego\u201d, wi\u0119c u\u017cytkownicy musz\u0105 r\u0119cznie doda\u0107 aplikacj\u0119 mobiln\u0105 PWA do ekranu g\u0142\u00f3wnego iPhone’a lub iPada. \ufffd> iOS nie obs\u0142uguje powiadomie\u0144 web push. St\u0105d powiadomienia push nie b\u0119d\u0105 odbierane na PWA zainstalowanym na iPhonie lub iPadzie.<\/p>\n

[NOWA AKTUALIZACJA]\ufffdWooCommerce\ufffdPWA obs\u0142uguje skrypty j\u0119zyka RTL:<\/h4>\n

Kreator progresywnej aplikacji internetowej WooCommerce obs\u0142uguje teraz wszystkie j\u0119zyki na ca\u0142ym \u015bwiecie, w tym j\u0119zyki RTL (od prawej do lewej), takie jak arabski, hebrajski, perski itp. Administrator sklepu mo\u017ce teraz nawet dodawa\u0107 j\u0119zyki RTL w aplikacji mobilnej WooCommerce PWA.<\/p>\n

Ekrany panelu administracyjnego 2.0:<\/h2>\n

Poznaj wszystkie ustawienia w Panelu Administracyjnym aplikacji mobilnej WooCommerce PWA i sprawd\u017a, jak dzia\u0142aj\u0105, korzystaj\u0105c z poni\u017cszych szczeg\u00f3\u0142owych zrzut\u00f3w ekranu:<\/p>\n

2.1 Ustawienia og\u00f3lne:<\/h3>\n

\"Og\u00f3lne-settings\"<\/p>\n

a) Poka\u017c\/ukryj podgl\u0105d:<\/strong> Dotknij przycisku oka, aby wy\u015bwietli\u0107\/ukry\u0107 podgl\u0105d telefonu w panelu administracyjnym.
\nb) W\u0142\u0105cz\/Wy\u0142\u0105cz:<\/strong> W\u0142\u0105cz modu\u0142 do pracy PWA na urz\u0105dzeniach mobilnych.
\nc) W\u0142\u0105cz raportowanie dziennika \u017c\u0105da\u0144:<\/strong> W\u0142\u0105cz dziennik b\u0142\u0119d\u00f3w na urz\u0105dzeniu mobilnym.
\nd) Przekieruj na stron\u0119 koszyka po dodaniu do koszyka:<\/strong> Kontroluj przekierowywanie przycisku Dodaj do koszyka za ka\u017cdym razem, gdy dowolny u\u017cytkownik kliknie przycisk Dodaj do koszyka.
\ne) Wy\u015bwietl kr\u00f3tki opis:<\/strong> W\u0142\u0105cz i wy\u015bwietl kr\u00f3tki opis produktu (je\u015bli zosta\u0142 dodany na stronie produktu w witrynie).
\nf) Wy\u015bwietl wyskakuj\u0105ce okienko Dodaj do ekranu g\u0142\u00f3wnego:<\/strong> Zaoferuj wyskakuj\u0105cy komunikat \u201eDodaj do ekranu g\u0142\u00f3wnego\u201d i zezw\u00f3l u\u017cytkownikom na dodanie aplikacji PWA na urz\u0105dzeniach mobilnych.
\ng) W\u0142\u0105cz logo:<\/strong> Dodaj logo swojej marki w nag\u0142\u00f3wku aplikacji mobilnej WooCommerce PWA.<\/p>\n

\"ustawienia-og\u00f3lne-2\"<\/p>\n

h) Kolor t\u0142a ekranu powitalnego:<\/strong> Wybierz i ustaw kolor ekranu powitalnego WooCommerce Progressive Web App.
\ni) Nazwa aplikacji PWA:<\/strong> Wprowad\u017a \u017c\u0105dan\u0105 nazw\u0119 aplikacji WooCommerce PWA. Zostanie wy\u015bwietlony, gdy u\u017cytkownik doda aplikacj\u0119 na urz\u0105dzeniach mobilnych.
\nj) Obraz ikony aplikacji:<\/strong> Dodaj obraz ikony aplikacji w panelu administracyjnym.
\nk) Wybierz czcionk\u0119 aplikacji:<\/strong> Wybierz czcionk\u0119 dla swojej aplikacji mobilnej WooCommerce PWA.
\nl) Wybierz uk\u0142ad strony g\u0142\u00f3wnej:<\/strong> Wybierz spo\u015br\u00f3d wst\u0119pnie dodanego uk\u0142adu ekranu g\u0142\u00f3wnego dla aplikacji WooCommerce PWA.<\/p>\n

\"ustawienia-og\u00f3lne-3\"<\/p>\n

m) Kolor przycisku aplikacji:<\/strong> Wybierz kolor przycisku dla aplikacji mobilnej PWA.
\nn) Kolor motywu aplikacji:<\/strong> Wybierz kolor motywu dla aplikacji PWA.
\no) Kolor t\u0142a aplikacji:<\/strong> Wybierz kolor t\u0142a dla aplikacji PWA.
\np) W\u0142\u0105cz pasek kart:<\/strong> W\u0142\u0105cz pasek kart na dole aplikacji PWA, aby szybko i \u0142atwiej nawigowa\u0107.
\nq) Niestandardowy CSS:<\/strong> Wprowad\u017a kod CSS, aby poprawi\u0107 wygl\u0105d i dzia\u0142anie stron internetowych aplikacji PWA, takich jak p\u0142atno\u015bci za wy\u015bwietlanie stron internetowych, strony CMS itp.<\/p>\n

2.2 Ustawienia powiadomie\u0144 push<\/h3>\n

Powiadomienia push to najlepsze narz\u0119dzie marketingowe dla aplikacji PWA dla WooCommerce. Administrator sklepu mo\u017ce po prostu promowa\u0107 produkty i oferty sklepu w\u015br\u00f3d u\u017cytkownik\u00f3w aplikacji oraz zwi\u0119ksza\u0107 sprzeda\u017c i przychody. Wprowad\u017a wszystkie szczeg\u00f3\u0142y w ustawieniach powiadomie\u0144 push, tworz\u0105c projekt Firebase:<\/p>\n

Jak za\u0142o\u017cy\u0107 konto Firebase?<\/strong><\/p>\n

Krok 1:<\/strong>\ufffdZaloguj si\u0119 do Google Firebase<\/p>\n

\"baza<\/p>\n

Krok 2:<\/strong>\ufffdUtw\u00f3rz nowy projekt Gdy klikniesz na Dodaj projekt, pojawi si\u0119 nast\u0119puj\u0105ce okno dialogowe:<\/p>\n

\"tworzenie-projektu\"
\nUtworzenie projektu zajmie kilka sekund. Gdy projekt b\u0119dzie gotowy, kliknij kontynuuj.<\/p>\n

\"kontynuuj-projekt\"<\/p>\n

Krok 3:<\/strong>\ufffdZarz\u0105dzaj ustawieniami projektu Po utworzeniu projektu kliknij Ustawienia projektu.<\/p>\n

\"ustawienia<\/p>\n

Krok 4:<\/strong>\ufffdPrzejd\u017a do opcji uwierzytelniania:<\/p>\n

\"opcje
\nKrok 5:<\/strong>\ufffdZnajd\u017a klucze Firebase W ustawieniach projektu kliknij Ustawienia wiadomo\u015bci w chmurze. St\u0105d mo\u017cesz bezpo\u015brednio uzyska\u0107 klucz serwera.<\/p>\n

\"klawisz
\nKrok 6:<\/strong>\ufffdDodaj swoj\u0105 aplikacj\u0119 internetow\u0105 do Firebase<\/p>\n

\"web-aplikacja-do-firebase\"<\/p>\n

\"web-aplikacja-do-firebase\"<\/p>\n

Krok 7:<\/strong>\ufffdPobierz inne szczeg\u00f3\u0142y zwi\u0105zane z Firebase i wklej je w panelu administracyjnym modu\u0142u PWA.<\/p>\n

\"firebase-szczeg\u00f3\u0142y\"<\/p>\n

Krok 8:<\/strong>\ufffdPobierz klucz serwera Firebase z karty wiadomo\u015bci w chmurze w Ustawieniach:<\/p>\n

\"klawisz<\/p>\n

Krok 9:<\/strong>\ufffdDodaj swoj\u0105 domen\u0119 do uwierzytelniania>>zaloguj si\u0119.<\/p>\n

\"klucz-serwera-firebase\"<\/p>\n

\"klucz-serwera-firebase\"<\/p>\n

A) Powiadomienie push o pomy\u015blnym zam\u00f3wieniu:<\/h4>\n

W\u0142\u0105cz\/wy\u0142\u0105cz automatyczne powiadomienia push, kt\u00f3re maj\u0105 by\u0107 wysy\u0142ane do u\u017cytkownik\u00f3w aplikacji za ka\u017cdym razem, gdy z\u0142o\u017c\u0105 udane zam\u00f3wienie z aplikacji WooCommerce PWA.<\/p>\n

\"Powiadomienie<\/p>\n

B) Powiadomienie push o aktualizacji statusu zam\u00f3wienia:<\/h4>\n

W\u0142\u0105cz\/wy\u0142\u0105cz automatyczne powiadomienia push wysy\u0142ane za ka\u017cdym razem, gdy status zam\u00f3wienia z aplikacji zostanie zaktualizowany. U\u017cytkownicy aplikacji mobilnej WooCommerce PWA mog\u0105 mie\u0107 na oku szczeg\u00f3\u0142y poprzednich zam\u00f3wie\u0144.<\/p>\n

\"status-aktualizacji-zam\u00f3wienia\"<\/p>\n

C) Powiadomienie push o porzuconym koszyku:<\/h4>\n

W\u0142\u0105cz\/wy\u0142\u0105cz automatyczne powiadomienia push wysy\u0142ane do u\u017cytkownik\u00f3w porzucaj\u0105cych produkty w koszyku bez udanego zakupu. To powiadomienie push zostanie wys\u0142ane do u\u017cytkownik\u00f3w automatycznie po wprowadzonym przedziale czasu.<\/p>\n

\"Powiadomienie<\/p>\n

2.3 Historia powiadomie\u0144 push<\/h3>\n

Tutaj b\u0119dzie widoczna pe\u0142na historia powiadomie\u0144 push o pomy\u015blnie wys\u0142anych powiadomieniach push. Administrator sklepu mo\u017ce st\u0105d \u015bledzi\u0107 wcze\u015bniej wys\u0142ane powiadomienia push.<\/p>\n

A) Wy\u015blij powiadomienie:<\/h4>\n

Personalizuj i r\u0119cznie wysy\u0142aj powiadomienia push do u\u017cytkownik\u00f3w aplikacji PWA zgodnie z potrzebami. Administrator sklepu mo\u017ce samodzielnie skonfigurowa\u0107 te powiadomienia i wys\u0142a\u0107 je do u\u017cytkownik\u00f3w aplikacji WooCommerce PWA.<\/p>\n

\"wy\u015blij-push-powiadomienie\"<\/p>\n

Uk\u0142ad strony g\u0142\u00f3wnej 2.4:<\/h3>\n

Aplikacja mobilna WooCommerce PWA oferuje konfigurowalny ekran g\u0142\u00f3wny, kt\u00f3rego uk\u0142ad mo\u017cna zaprojektowa\u0107 z panelu administracyjnego za pomoc\u0105 kilku klikni\u0119\u0107 mysz\u0105 i przeci\u0105gania. Atrakcyjny uk\u0142ad wed\u0142ug festiwalu, wyprzeda\u017cy, okazji itp. Z pewno\u015bci\u0105 mo\u017ce pom\u00f3c w poprawie sprzeda\u017cy za po\u015brednictwem aplikacji mobilnych WooCommerce PWA.<\/p>\n

\"uk\u0142ad-strony-g\u0142\u00f3wnej\"<\/p>\n

Dodaj nowy uk\u0142ad z tej zak\u0142adki lub edytuj poprzednio dodane. Ustawienia konfiguracji strony g\u0142\u00f3wnej oferuj\u0105 nast\u0119puj\u0105ce elementy:<\/p>\n

a) Najlepsze kategorie:\ufffd<\/strong><\/p>\n

\"najlepsze<\/p>\n

b) Kwadratowy sztandar:\ufffd<\/strong><\/p>\n

\"kwadrat-baner\"<\/p>\n

c) Poziomy baner przesuwny:\ufffd<\/strong><\/p>\n

\"poziomo-przesuwny-baner\"<\/p>\n

d) Banery siatki:\ufffd<\/strong><\/p>\n

\"banner-siatka\"<\/p>\n

e) Baner odliczania czasu:\ufffd<\/strong><\/p>\n

\"baner<\/p>\n

f) Produkty kwadratowe:\ufffd<\/strong><\/p>\n

\"kwadratowy<\/p>\n

g) Produkty przesuwne:\ufffd<\/strong><\/p>\n

\"produkty-przesuwne\"<\/p>\n

h) Produkty sieciowe:\ufffd<\/strong><\/p>\n

\"siatka-produkt\"<\/p>\n

2.5 Strony informacyjne:<\/h3>\n

Dodaj strony CMS w aplikacji i oferuj tre\u015bci informacyjne u\u017cytkownikom WooCommerce PWA Mobile App.<\/p>\n

\"strony<\/p>\n

Jak uzyska\u0107 szczeg\u00f3\u0142owe informacje o aplikacji Facebook?<\/h3>\n

Aplikacj\u0119 Facebook mo\u017cna utworzy\u0107, wykonuj\u0105c poni\u017csze czynno\u015bci:-<\/p>\n

Krok 1:<\/strong>\ufffdId\u017a do danego\ufffdURL: https:\/\/developers.facebook.com\/apps\/<\/p>\n

Krok 2:<\/strong>\ufffdKliknij przycisk \u201eDodaj now\u0105 aplikacj\u0119\u201d.<\/p>\n

\"dodaj-nowa-aplikacja\"<\/a><\/p>\n

Krok 3 i 4:<\/strong>Wprowad\u017a nazw\u0119 swojej aplikacji i identyfikator e-mail, a nast\u0119pnie kliknij przycisk \u201eUtw\u00f3rz identyfikator aplikacji\u201d.<\/p>\n

\"utw\u00f3rz<\/a><\/p>\n

Krok 5 i 6:<\/strong>\ufffdPo klikni\u0119ciu Create App ID b\u0119dziesz musia\u0142\ufffd przej\u015b\u0107 kontrol\u0119 bezpiecze\u0144stwa, jak pokazano:<\/p>\n

\"utw\u00f3rz<\/a><\/p>\n

Krok 7:<\/strong>\ufffdKliknij na zak\u0142adk\u0119 \u201eUstawienia\u201d.<\/p>\n

\"ustawienie<\/a><\/p>\n

Krok 8-13:<\/strong>\ufffdDwie opcje b\u0119d\u0105 dost\u0119pne na li\u015bcie rozwijanej, Podstawowe i Zaawansowane, kliknij \u201ePodstawowe\u201d. Nast\u0119pnie wprowad\u017a swoj\u0105 \u201eDomen\u0119 aplikacji\u201d,\ufffd\u201eKontaktowy adres e-mail\u201d, \u201ePrywatno\u015b\u0107\ufffdURL\u201d, \u201eZasady i warunki\ufffdURL\u201d, \u201eDodaj logo\u201d, \u201eWybierz kategori\u0119\u201d i kliknij przycisk \u201eZapisz zmiany\u201d. Domeny aplikacji: twojadomena.com jest\ufffdpoprawna twojadomena.com\/store jest\ufffdnieprawid\u0142owa www.domena.com jest\ufffdnieprawid\u0142owa<\/p>\n

\"identyfikator-aplikacji<\/a><\/p>\n

Krok 14:<\/strong>\ufffdTeraz kliknij \u201e+Dodaj platform\u0119\u201d.<\/p>\n

\"dodaj<\/a>
\nKrok 15:\ufffd<\/strong>I wybierz Witryn\u0119 jako Platform\u0119.<\/p>\n

\"wybierz<\/a><\/p>\n

Krok 16:<\/strong>\ufffdTeraz wprowad\u017a adres URL swojej witryny.<\/p>\n

\"enter-strony-url\"<\/a>
\nKrok 17 i 18:<\/strong>\ufffdKliknij \u201eProdukty+\u201d i wybierz login Facebook.<\/p>\n

\"Nazwa<\/a>
\nKrok 19:<\/strong>\ufffdWybierz sie\u0107 jako platform\u0119 aplikacji.<\/p>\n

\"wybierz<\/a><\/p>\n

Krok 20:<\/strong>\ufffdTeraz kliknij Zapisz.<\/p>\n

\"facebook<\/a>
\nKrok 21 i 22:\ufffd<\/strong>Kliknij Ustawienia i dodaj prawid\u0142owe identyfikatory URI przekierowania OAuth. Prawid\u0142owe identyfikatory URI przekierowania OAuth: https:\/\/example.com\/pwa-app\/login<\/p>\n

\"przekierowanie-URL\"<\/a><\/p>\n

Krok 23 i 24:<\/strong>\ufffdKliknij \u201ePrzegl\u0105d aplikacji\u201d. I zaznacz \u201eUstaw \u201eNazw\u0119 swojej aplikacji\u201d jako publiczn\u0105\u201d na Tak.<\/p>\n

\"recenzja<\/a>
\nOstatni krok:<\/strong>\ufffdSkopiuj identyfikator aplikacji i klucz tajny aplikacji i wklej je w pola w module.<\/p>\n

\"ostatni<\/a><\/p>\n

Jak uzyska\u0107 szczeg\u00f3\u0142owe informacje o aplikacji Google?<\/h3>\n