Super Progressive Web Apps

Opis

Progressive Web Apps (PWA) to nowa technologia, która łączy w sobie zalety Internetu mobilnego i aplikacji mobilnych, aby zapewnić użytkownikom doskonałe wrażenia z korzystania z Internetu. Są one instalowane na telefonie jak zwykłe aplikacje (aplikacje webowe) i można uzyskać do nich dostęp z ekranu głównego.

Strona główna | Dokumentacja | Pomoc | Funkcje wersji premium

Użytkownicy mogą powrócić do twojej witryny, uruchamiając aplikację z ekranu głównego i wchodząc z nią w interakcję za pośrednictwem interfejsu przypominającego aplikację. Powracający użytkownicy doświadczą niemal natychmiastowego wczytywania i docenią korzyści płynące z wydajności twojej aplikacji PWA!

Dzięki Super Progressive Web Apps możesz błyskawicznie przekształcić swoją witrynę WordPress w Progressive Web App!

Po zainstalowaniu SuperPWA użytkownicy przeglądający twoją witrynę na obsługiwanym urządzeniu mobilnym zobaczą komunikat „Dodaj do ekranu głównego” (u dołu ekranu) i będą mogli „zainstalować witrynę” na ekranie głównym swojego urządzenia. Każda odwiedzana strona jest przechowywana lokalnie na ich urządzeniu i będzie dostępna do odczytu nawet w trybie offline!

Konfiguracja SuperPWA jest łatwa – konfiguracja aplikacji Progressive Web App zajmuje mniej niż minutę! SuperPWA przeprowadza czystą deinstalację, usuwając wszystkie wpisy i pliki bazy danych, które tworzy. W rzeczywistości żadne z domyślnych ustawień nie jest zapisywane w bazie danych, dopóki nie zapiszesz ich ręcznie za pierwszym razem. Śmiało, wypróbuj!

A co najlepsze? Jeśli kiedykolwiek utkniesz, jesteśmy tu, by ci pomóc! Otwórz zgłoszenie do pomocy technicznej, jeśli masz pytanie lub potrzebujesz funkcji. Nie możemy się doczekać twojej opinii i naprawdę chcemy pomóc ci w stworzeniu najlepszej aplikacji Progressive Web App dla twojej witryny WordPress!

Szybka demonstracja?

• Otwórz SuperPWA.com na obsługiwanym urządzeniu.
• Dodaj witrynę do ekranu głównego za pomocą monitu Dodaj do ekranu głównego (Chrome na Androida) lub z menu przeglądarki.
• Otwórz aplikację na ekranie głównym, a zobaczysz ekran powitalny.
• Wyłącz transmisję danych i Wi-Fi, aby przejść w tryb offline i otworzyć aplikację. Nadal będziesz mógł ją zobaczyć i przeglądać strony, które już odwiedziłeś.
• Przejdź do strony, której jeszcze nie odwiedzałeś. Zostanie wyświetlona strona offline.

Dziękujemy entuzjastom PWA!

Jesteśmy zaszczyceni opiniami społeczności. Dziękujemy wszystkim, którzy w nas uwierzyli i wypróbowali naszą wtyczkę. Wasza opinia była nieoceniona i wiele się z niej nauczyliśmy. Dziękujemy za wasze wsparcie i mamy nadzieję, że odwdzięczymy się wam, dążąc do stworzenia najlepszej w historii wtyczki Progressive Web Apps dla WordPress!

Co jest w pudełku

Oto aktualne funkcje Super Progressive Web Apps:

• Wygeneruj manifest dla swojej witryny i dodaj go do nagłówka witryny.
• Ustaw ikonkę aplikacji dla Progressive Web App.
• Ustaw kolor tła ekranu powitalnego swojej aplikacji Progressive Web App.
• Twoja witryna internetowa wyświetli komunikat „Dodaj do ekranu głównego”, gdy otworzysz ją w obsługiwanej przeglądarce.
• Agresywne buforowanie stron przy użyciu interfejsu API CacheStorage.
• Strony, które zostały już zapisane w pamięci podręcznej, są wyświetlane nawet wtedy, gdy użytkownik jest offline.
• Ustaw własną stronę trybu offline: Wybierz stronę, którą użytkownik będzie widział, gdy uzyska dostęp do strony, której nie ma w pamięci podręcznej, a użytkownik będzie offline.
• Nowość w wersji 1.2: Obsługa meta właściwości „motyw-kolor”. Zmień kolor paska adresu w przeglądarkach Chrome, Firefox OS i Opera, aby dopasować go do kolorów swojej witryny.
• Nowość w wersji 1.2: Teraz można edytować nazwę aplikacji i skróconą nazwę aplikacji.
• Nowość w wersji 1.2: Ustaw stronę startową swojej aplikacji PWA.
• Nowość w wersji 1.2: Ustaw wersję Accelerated Mobile Pages (AMP) strony startowej. Obsługiwane wtyczki: AMP dla WordPressa, AMP dla WP, Better AMP, AMP Supremacy, WP AMP.
• Nowość w wersji 1.3: Dodano obsługę wysokiej jakości ekranu powitalnego. Możesz teraz ustawić ikonkę 512×512 dla ekranu powitalnego swojej aplikacji Progressive Web App.
• Nowość w wersji 1.3: Super Progressive Web Apps uwzględnia teraz aktualizacje treści i będzie aktualizować pamięć podręczną podczas aktualizacji witryny.
• Nowość w wersji 1.3: Ulepszona obsługa aktualizacji pracownika usługi w przeglądarce.
• Nowość w wersji 1.4: Możesz teraz ustawić domyślną orientację swojej aplikacji PWA. Wybierz spośród opcji „dowolna” (zgodnie z orientacją urządzenia), „pionowa” i „pozioma”.
• Nowość w wersji 1.4: Można teraz ustawić właściwość theme_color w manifeście.
• Nowość w wersji 1.5: Integracja OneSignal z powiadomieniami push.
• Nowość w wersji 1.6: Zgodność z siecią stron WordPress.
• Nowość w wersji 1.7: Dodatki do SuperPWA już dostępne! W zestawie znajduje się dodatek do śledzenia UTM, który śledzi wizyty z twojej aplikacji PWA.
• Nowość w wersji 1.8: Problemy ze zgodnością z OneSignal zostały rozwiązane!
• Nowość w wersji 1.8: Nowy dodatek: Ikonki dodatkowe Apple, który ustawia ikonki aplikacji jako ikonki Apple Touch.
• Nowość w wersji 2.0: SuperPWA jest teraz zgodne z WordPressem zainstalowanym w podfolderze.
• Nowość w wersji 2.0: Teraz możesz ustawić właściwość wyświetlania w ustawieniach SuperPWA.
• Nowość w wersji 2.1.1: SuperPWA obsługuje teraz ikonki maskowalne.
• Nowość w wersji 2.1.15: SuperPWA obsługuje teraz ikony czarno-białe.
• Pełny dziennik zmian

Nadchodzące funkcje

• Powiadomienie o wskaźniku offline.

Wersja PRO obsługuje dodatkowe funkcje zaawansowane
* Wezwanie do działania (CTA) Więcej informacji
* Generator aplikacji APK na Androida Więcej informacji
* Analiza danych Więcej informacji
* Wczesne wczytywanie Więcej Informacje
* Skróty aplikacji Więcej informacji
* Generator kodów QR Więcej informacji

Minimalne wymagania aplikacji Progressive Web App

Aplikacje Progressive Web Apps wymagają, aby twoja witryna WordPress była obsługiwana z bezpiecznego źródła, tj. twoja witryna powinna obsługiwać protokół HTTPS, a nie HTTP. Jeśli twoja witryna nie obsługuje protokołu HTTPS, skontaktuj się z usługodawcą hostingowym w tej sprawie. Możesz również skontaktować się z nami, jeśli potrzebujesz pomocy.

Obsługa urządzeń i przeglądarek dla aplikacji PWA

Progresywne aplikacje internetowe wymagają przeglądarek obsługujących manifesty i mechanizmy Service Workers. Obecnie głównymi przeglądarkami obsługującymi PWA są Google Chrome (wersja 57+), Chrome na Androida (62), Mozilla Firefox (57) i Firefox na Androida (58).

Lista ta szybko się powiększa i prawdopodobnie będzie obsługiwana przez większość najważniejszych przeglądarek do końca tego roku.

Jak przekształcić witrynę WordPress w aplikację internetową typu Progressive Web App

Instalacja WordPress

• Odwiedź kokpit administracyjny WordPress > Wtyczki > Dodaj nową
• Wyszukaj „Super Progressive Web Apps”
• Kliknij „Zainstaluj”, a następnie „Włącz” Super Progressive Web Apps

Aby zainstalować ręcznie:

• Prześlij folder super-progressive-web-apps do katalogu /wp-content/plugins/ na swoim serwerze
• Przejdź do kokpitu administracyjnego WordPress > Wtyczki
• Włącz wtyczkę Super Progressive Web Apps z listy.

Dostosowywanie aplikacji Progressive Web App

Twoja aplikacja Progressive Web App powinna być gotowa do testowania z domyślnymi ustawieniami po aktywacji. Możesz ją dodatkowo spersonalizować i uczynić ją naprawdę swoją.

• Przejdź do kokpitu administracyjnego WordPress > SuperPWA
• Ustaw kolor tła ekranu powitalnego, który będzie wyświetlany po otwarciu aplikacji PWA na urządzeniu mobilnym.
• Ustaw ikonkę aplikacji. Będzie to ikonka twojej aplikacji PWA po dodaniu jej do ekranu głównego na urządzeniu mobilnym. Ikonka musi być obrazkiem PNG i mieć rozmiar dokładnie 192×192 pikseli.
• Ustaw stronę offline. Ta strona będzie wyświetlana, gdy użytkownik będzie offline, a żądana przez niego strona nie jest już zapisana w pamięci podręcznej. Najlepiej byłoby utworzyć specjalną stronę WordPress i ustawić ją tutaj. Na utworzonej stronie możesz dodać notatkę: „Wygląda na to, że jesteś offline, a żądana strona jest obecnie niedostępna. Sprawdź ponownie, gdy będziesz online”.
• Kliknij „Zapisz ustawienia”

Testowanie progresywnej aplikacji internetowej

• Otwórz obsługiwaną przeglądarkę na obsługiwanym urządzeniu (np. Chrome dla systemu Android (wersja 62 lub nowsza) na telefonie z systemem Android)
• Wejdź na swoją stronę i poczekaj, aż się w pełni wczyta
• Powinno pojawić się okienko z ikoną aplikacji i przyciskiem „DODAJ DO EKRANU GŁÓWNEGO”.
• Kliknij, a twoja aplikacja PWA zostanie dodana do ekranu głównego. Poczekaj na zakończenie instalacji.
• Przejdź do ekranu głównego i otwórz aplikację PWA. Jeśli chcesz, przejrzyj kilka stron. Zamknij aplikację.
• Rozłącz się z Internetem i ponownie otwórz aplikację PWA. Powinny być widoczne wszystkie strony, które wcześniej przeglądałeś.
• Spróbuj odwiedzić stronę, której wcześniej nie odwiedzałeś. Powinna pojawić się strona ustawiona jako „Strona offline” w ustawieniach SuperPWA.

Rozwiązywanie problemów z aplikacją internetową Progressive Web App

Ojej. Twoja aplikacja PWA nie działa zgodnie z oczekiwaniami? Nie widzisz komunikatu „Dodaj do ekranu głównego”?

• Upewnij się, że twoja witryna ma zainstalowany certyfikat SSL. tzn. adres twojej witryny powinien zaczynać się od https, a nie od http (np. https://twoja-domena.com).
• Upewnij się, że używasz obsługiwanego urządzenia i obsługiwanej przeglądarki. Zapoznaj się z powyższą listą „Obsługa urządzeń i przeglądarek dla aplikacji PWA”.
• Upewnij się, że ikonka aplikacji oraz ikonka ekranu powitalnego mają format PNG i odpowiednio rozmiar 192×192 pikseli i 512×512 pikseli.
• Wyczyść pamięć podręczną przeglądarki i spróbuj ponownie. W Chrome na Androida przejdź do Ustawienia > Prywatność > „Wyczyść dane przeglądania”.
• Jeśli ikonka aplikacji nie zaktualizuje się po pierwszej instalacji, usuń aplikację PWA z telefonu, wyczyść pamięć podręczną przeglądarki i zainstaluj ją ponownie. (Pracujemy nad ulepszeniem tej funkcji).
• Utwórz nowy bilet pomocy technicznej i udostępnij link do swojej witryny. Sprawdzimy to i pomożemy ci znaleźć rozwiązanie.

Prośby o funkcje, problemy, oczekiwania

Oto nasze repozytorium na GitHub. Prześlij nam swoje pull requesty, prośby o funkcje lub zgłoszenia, jeśli takie istnieją.

O nas

Jesteśmy duetem, który z entuzjazmem przyjął ten pomysł. Nasza misja jest prosta: pomóc ci stworzyć niesamowitą aplikację PWA, którą twoi użytkownicy będą chcieli mieć na swoim ekranie głównym.

Kiedy po raz pierwszy usłyszeliśmy o PWA, chcieliśmy dowiedzieć się o nim wszystkiego. Poświęciliśmy niezliczone godziny na naukę i chcemy podzielić się tą wiedzą ze światem.

Prosimy o konstruktywne uwagi i wsparcie.