W artykule:
Uczynienie witryny WordPress przyjazną dla urządzeń mobilnych nie kończy się na responsywnym projekcie. Użytkownik coraz częściej wybiera przeglądanie swoich ulubionych publikacji online za pośrednictwem aplikacji, a Ty możesz osiągnąć to samo uczucie w swojej witrynie WordPress, wykonując kilka kroków, aby przekształcić ją w progresywną aplikację internetową.
W moim ostatnim poście zaproponowałem rozwiązanie biznesowe, dzięki któremu Twoja witryna stanie się progresywną aplikacją internetową:
- Lepsza wydajność-nawet na pulpicie!
- Możliwość Offline
- Brak potrzeby stosowania złożonych języków programowania
- Zwiększenie wsparcia ze strony gigantów technologicznych
Wydaje się, że istnieje pewne zamieszanie co do tego, co dokładnie jest progresywną aplikacją internetową. Popieram Jeremy ’ ego Keitha, który twierdzi, że każda strona internetowa może stać się PWA z tylko tymi trzema cechami:
- Bezpieczna dostawa przez HTTPS
- Plik manifestu internetowego
- Pracownik serwisu
W tym poście dowiesz się trochę o tych wszystkich rzeczach i jak przetestować swoją witrynę przed arbitrami PWAness.
Zabezpieczanie Strony
Szanse są bardzo dobre, że twój Hosting ma już lub jest zajęty konwersją adresu URL witryny ze zwykłego starego HTTP na bezpieczny protokół HTTPS. Główny powód: Google wycofuje się, w tym niebezpieczne witryny z wyników wyszukiwania. Powód #2: Jeśli masz zamiar mieć kod wyświetlający Twoją witrynę na innych urządzeniach, połączenie między nimi powinno być bezpieczne. Wreszcie, jest to minimalny krok, aby chronić swoją witrynę i odwiedzających. Chociaż istnieją uzasadnione argumenty za utrzymaniem starszych witryn i możliwością wyszukiwania w celach historycznych i badawczych, jasne jest, że strony muszą chronić czytelników przed złowrogimi programistami i innymi złoczyńcami.
Jeśli chcesz zabezpieczyć swoją witrynę przed hostem, Jenni McKinnon napisała doskonały samouczek na ten temat. W międzyczasie zapytaj swojego hosta, jaki jest ich plan i harmonogram migracji do HTTPS. Jeśli ich odpowiedź cię nie zadowoli, łatwo jest znaleźć hosta, który zaoferuje to bezpieczeństwo.
Pisanie manifestu internetowego
Czas, aby dostać się do prawdziwych rzeczy tworzenia aplikacji.
Plik manifest to plik tekstowy JSON, który opisuje metadane związane z aplikacją, a także może oferować elementy projektu dla PWA na ekranie głównym urządzenia. Chociaż nie jest to wymagane przez standard, dobrym pomysłem jest użycie *.rozszerzenie webmanifest dla tego pliku.
Wszystko, co musisz mieć w pliku manifestu, to nazwa aplikacji, opis i co najmniej jedna ikona do wyświetlenia. Najprawdopodobniej będziesz chciał dodać krótką nazwę, pewien rodzaj schematu kolorów i adres URL witryny, aby uruchomić aplikację. Nazywa się to ” Start URL.”
Opcje wyświetlania są niezbędne do opisania podstawowego wyglądu aplikacji na każdym urządzeniu. Wybierz jedną z tych opcji:
- Pełny ekran: Gdy użytkownik kliknie aplikację, wypełnia ekran i nie wygląda na okno przeglądarki.
- Samodzielny: Twoja aplikacja będzie wyglądać i czuć się jak natywna aplikacja mobilna. W tym trybie aplikacja może wyglądać inaczej niż Twoja witryna, jeśli chcesz. Będzie miał własną ikonę w programie uruchamiającym aplikacje, zamiast ogólnej ikony internetowej. Jako samodzielny agent użytkownika (przeglądarka) zastąpi elementy nawigacji, aby korzystać z natywnych narzędzi do poruszania się. Możesz dołączyć inne standardowe elementy interfejsu WWW, takie jak pasek stanu.
- Minimal-ui: Aplikacja będzie wyglądać i czuć się jak samodzielna aplikacja, ale użytkownik może przewijać się z minimalnym zestawem elementów interfejsu użytkownika do sterowania nawigacją. Elementy będą się różnić w zależności od przeglądarki.
- Przeglądarka: Aplikacja otwiera się w zwykłej karcie przeglądarki lub nowym oknie, w zależności od przeglądarki i platformy. Jest to wartość domyślna.
Orientation używa eksperymentalnego interfejsu API orientacji ekranu W3C, aby umożliwić programistom zdefiniowanie sposobu wyświetlania tej aplikacji na ekranie:
- Portret: You know this: Always taller than it is wide
- Krajobraz: Ty też o tym wiesz: zawsze szerszy niż wysoki
- Dowolny: Ustaw to przed zdefiniowaniem orientacji podstawowej i wtórnej
- Naturalne: Niezależnie od tego, co platforma urządzenia określa jako ” naturalne.”
- Krajobraz-podstawowy: Wyświetla w ten sposób, jeśli platforma definiuje „naturalny” jako krajobraz, a użytkownik trzyma urządzenie w pozycji pionowej i obraca je zgodnie z ruchem wskazówek zegara o 90 stopni.
- Krajobraz-wtórny: Jeśli aplikacja naturalnie pozioma jest obrócona o 180 stopni lub aplikacja naturalnie pionowa jest obrócona o 90 stopni w kierunku przeciwnym do ruchu wskazówek zegara, wyświetla się jako poziomo-Drugorzędna
- Portret-podstawowy: Jeśli aplikacja naturalnie portretowa jest obrócona o 90 stopni zgodnie z ruchem wskazówek zegara, wyświetla to samo.
- Portret-drugorzędny: Jeśli aplikacja naturalnie portretowa jest obrócona o 180 stopni lub naturalna aplikacja krajobrazowa jest obrócona o 90 stopni w kierunku przeciwnym do ruchu wskazówek zegara, wyświetla się jako drugorzędna aplikacja portretowa
Mozilla Developer Network oferuje pełną listę właściwości manifestu na stronie manifestu aplikacji internetowych.
Użyj generatora manifestu aplikacji internetowej, aby wpisać kilka podstawowych opcji i wygenerować prosty manifest.plik json jak ten:
Po utworzeniu pliku manifest, link do niego w nagłówku witryny. Wiele motywów pozwala umieszczać elementy w sekcji HEAD bez obawy o nadpisanie przy każdej aktualizacji motywu. Sprawdź ustawienia motywu lub skontaktuj się z twórcą motywu, aby potwierdzić, że będziesz w stanie to zrobić bezpiecznie.
Dodawanie pracownika serwisu
Pracownicy usług są sercem każdego PWA, ponieważ uzyskujesz poprawę wydajności w porównaniu ze standardowymi stronami i aplikacjami internetowymi, online lub offline. Co równie ważne, masz również możliwość uruchomienia w trybie offline na pulpicie lub gdy połączenia mobilne są słabe do nieistniejących (jak to się zdarza).
Te bity są również najtrudniejszym elementem PWA do skonstruowania. Napisano o nich całe książki. Więc nie oczekuj wiele w sposób szczegóły tutaj. Ale mogę ci pomóc.
Mozilla tak opisuje pracowników usług:
„PRACOWNICY USŁUG działają zasadniczo jako serwery proxy, które znajdują się między aplikacjami internetowymi, przeglądarką i siecią (jeśli są dostępne). Mają one między innymi umożliwić tworzenie efektywnych doświadczeń offline, przechwytywanie żądań sieci i podejmowanie odpowiednich działań w zależności od dostępności sieci, a także aktualizować zasoby znajdujące się na serwerze. Umożliwią również dostęp do powiadomień push i interfejsów API synchronizacji w tle.”
Najpopularniejszy pracownik serwisowy zapewnia dostęp offline do Twojej aplikacji. Możesz wygenerować plik Javascript service worker w PWABuilder, projekcie społeczności do budowania PWAs od Microsoft. Daj im adres URL swojej witryny, a oni wykonują trochę magii, aby utworzyć niezbędny kod.
Ale gdzie w tym wszystkim jest WordPress? Ten półgodzinny film z konferencji programistów Google Chrome 2017 zawiera Dan Walmsley z Automattic i inżynier Google Chrome Das Surma przedstawia kroki do stworzenia PWA za pomocą WordPress.
Sekcja Surmy na temat budowania pracownika usług dostępu offline zaczyna się około 23 minut. W swoim temacie zawiera service workera, ale zauważa, że odpowiednie service workery muszą znajdować się na stronie głównej. Dopóki WordPress core nie będzie w stanie przechowywać pracownika usług w całej witrynie, ten kod powinien działać.
Dzięki ciągłemu zaangażowaniu Automattic do współpracy z Google nad rozwojem PWA, prawdopodobnie wkrótce można spodziewać się lepszego wsparcia dla pracowników usług i innych elementów PWA. Najprawdopodobniej stanie się to po stabilnym edytorze postów Gutenberga.
Testy i nauka
Po zakończeniu konwersji witryny na PWA nadszedł czas, aby ją przetestować. Są to krytyczne Pakiety testowe:
- Latarnia morska: To narzędzie jest zawarte w narzędziu Google Chrome DevTools i zasila Pakiet audytu.
- Sonarwhal: Ta strona, sponsorowana przez Javascript Foundation, oprócz testów pod kątem wielu innych problemów z wydajnością i bezpieczeństwem, testuje dwa komponenty PWA: ikonę Apple (dla Twojej aplikacji offline) i plik manifestu internetowego.
Po uruchomieniu testu na którejkolwiek z tych witryn możesz być zaskoczony, że żadna z nich nie daje odpowiedzi Tak lub nie na pytanie ” Czy zrobiłem progresywną aplikację internetową?”Zamiast tego otrzymasz wynik, wskazujący, jak daleko na drodze do nirwany PWA znajduje się Twoja aplikacja.
Jednym z kluczy do zrozumienia tej ścieżki jest przegląd listy kontrolnej Google PWA.
Dopóki nie osiągniesz nirwany PWA, bądź bezpieczny w wiedzy o stworzeniu trzech komponentów PWA (HTTPS, web Manifest, Service Worker).
Wnioski i zasoby
Teraz masz podstawy tworzenia nowoczesnej progresywnej aplikacji internetowej dla swojej witryny WordPress. Dopóki nie osiągniesz nirwany PWA, bądź bezpieczny w wiedzy o stworzeniu trzech komponentów PWA (HTTPS, web Manifest, Service Worker). Obyś szybko czerpał korzyści.
Dowiedz się więcej o progresywnych aplikacjach internetowych tutaj. Otwieranie ich za pomocą urządzenia z Androidem może być zabawne:
Google Web Fundamentals PWA Developer site
Ogromny, może nawet niesamowity stos zasobów PWA w sieci
PWA Rocks, inspirująca kolekcja istniejących PWA
Zbiór zasobów programistycznych PWA Mozilli
Więcej o Jetpack i PWAs
Tagi:
