Przekształć swoją witrynę w PWA o wysokiej jakości

Przekształcenie witryny internetowej w w pełni funkcjonalną aplikację PWA (progresywną aplikację internetową) można zrobić w porze lunchu! W tym artykule poprowadzimy cię przez proces od początku do końca.

Krok 1. Tworzenie karty raportu w narzędziu PWA Builder

Najpierw należy sprawdzić, czy witryna internetowa ma funkcje i metadane, których potrzebują doskonałe narzędzia PWA.

1. Przejdź do PWA Builder
2. Wprowadź adres URL witryny internetowej, którą chcesz przekonwertować na aplikację PWA, a następnie kliknij przycisk Rozpocznij
3. Narzędzie PWA Builder wyświetli kartę raportu PWA, która wskazuje, jakie funkcje ma i jakich brakuje Twojej witrynie.

Krok 2. Przeglądanie karty raportu programu PWA

Karta raportu PWA zawiera wynik witryny internetowej z maksymalnego wyniku 100. Wyniki są oparte na trzech kategoriach funkcji.

Manifest

Aplikacja PWA ocenia manifest aplikacji internetowej witryny internetowej, jeśli jest dostępny, i identyfikuje pola lub wartości, które są wymagane, zalecane i opcjonalne. Możesz poprawić swój wynik, dodając brakujące wartości, edytując i ponownie publikując plik manifestu lub używając edytora manifestu online.

Ostrzeżenie

Zmiany wprowadzone w edytorze manifestu online nie zostaną opublikowane w witrynie internetowej. Wprowadzone zmiany będą używane tylko przez program PWA Builder podczas tworzenia aplikacji PWA.

Wymagane wartości muszą być obecne, w przeciwnym razie twórca PWA nie będzie mógł utworzyć PWA. Wymagane pola obejmują po prostu manifest, ikony, nazwę, krótką nazwę i start_url.

zalecane pola nie są wymagane, ale są ważne dla doświadczenia użytkownika aplikacji PWA. Zdecydowanie zaleca się podanie wszystkich zalecanych wartości, mimo że PWA Builder może utworzyć PWA bez nich. Zalecane wartości obejmują tryb wyświetlania, kolor tła ekranu powitalnego, opis, orientację, zrzuty ekranu, ikonę wysokiej rozdzielczości, ikonę maskowalne, kategorie i skróty.

Pola opcjonalne nie są wymagane, ale można je określić w razie potrzeby. Opcjonalne pola obejmują klasyfikację wieku i powiązane aplikacje.

Pracownik serwisowy

Proces roboczy usługi działa w tle, aby włączyć zaawansowane funkcje aplikacji internetowej, w których w przeciwnym razie wystąpią błędy 404. Narzędzie PWA Builder wymaga pracownika serwisowego do utworzenia PWA, ale jeśli go nie masz, możesz użyć jednego z kilku wstępnie utworzonych pracowników serwisowych udostępnianych przez PWA Builder. Aby użyć wstępnie utworzonego procesu roboczego usługi:

1. Wybierz kartę Opcje procesu roboczego usługi w menu.
2. Wybierz odpowiedniego pracownika serwisowego z kuratorowanej listy. Należy pamiętać, że istnieje wiele wstępnie utworzonych opcji; upewnij się, że wybierzesz najbardziej odpowiedni service worker dla konkretnego przypadku użycia.
3. Po wybraniu pracownika usługi, którego chcesz użyć, nastąpi powrót do raportu karty PWA.

Bezpieczeństwo

Wszystkie narzędzia PWA utworzone za pomocą narzędzia PWA Builder wymagają trzech protokołów zabezpieczeń.

1. Witryna musi używać protokołu HTTPS.

2. Witryna musi mieć odpowiedni certyfikat HTTPS.

   Jeśli witryna internetowa nie ma certyfikatu HTTPS, możesz opublikować go na platformie Azure, aby uzyskać wbudowaną obsługę protokołu HTTPS. Alternatywnie istnieją bezpłatne narzędzia innych firm, takie jak Letsencrypt , które umożliwiają bezpłatne uzyskanie certyfikatu HTTPS.

3. Witryna nie może zawierać zawartości mieszanej. Zawartość mieszana jest wtedy, gdy strona obsługiwana za pośrednictwem protokołu HTTPS zawiera zasoby załadowane za pośrednictwem protokołu HTTP. Mieszana zawartość narusza bezpieczeństwo protokołu HTTPS i aplikacji PWA.

Krok 3. Zbieranie ważnych informacji z Centrum partnerskiego

Do utworzenia aplikacji PWA będzie potrzebnych kilka informacji z konta Centrum partnerskiego. Jeśli nie masz konta MSA, kliknij tutaj, aby uzyskać instrukcje dotyczące rozpoczynania pracy. Należy również zarejestrować się w programie deweloperów systemu Windows.

Jeśli jeszcze tego nie zrobiłeś, musisz utworzyć aplikację PWA, rezerwując nową nazwę. Po zarezerwowaniu nazwy kliknij przycisk Rozpocznij przesyłanie, aby utworzyć nowe zgłoszenie aplikacji.

Następnie kliknij kartę Zarządzanie produktami i wybierz pozycję Tożsamość produktu. Strona tożsamości produktu będzie zawierała identyfikatora pakietu, identyfikatora wydawcy i nazwę wyświetlaną wydawcy. Zapisz te wartości i wróć do narzędzia PWA Builder.

Krok 4: Generowanie aplikacji PWA za pomocą PWA Builder

Teraz masz wszystko, czego potrzebujesz, aby utworzyć aplikację PWA w programie PWA Builder. Wróć do witryny narzędzia PWA Builder i kliknij przycisk Wygeneruj.

Generator PWA poprosi o podanie informacji uzyskanych z Centrum Partnerskiego w kroku 3. Wypełnij wartości i kliknij Wygeneruj.

Po utworzeniu PWA przez PWA Builder, przeglądarka automatycznie go pobierze. Twoja PWA jest pakowana w pliku .zip zawierającym sześć plików.

Plik msix jest głównym pakietem aplikacji PWA. Ten plik zainstaluje aplikację PWA na komputerze użytkownika.

Pakiet aplikacji appx jest klasycznym pakietem aplikacji. Służy do instalowania programu PWA w starszych wersjach systemu Windows. Aby uzyskać więcej informacji, zobacz Pakiety aplikacji klasycznych .

Krok 5. Przesyłanie pakietów aplikacji do sklepu Microsoft Store

Te pakiety można przesyłać do Sklepu Microsoft w taki sam sposób, jak każda inna aplikacja spakowana jako plik MSIX. Aby uzyskać dalsze instrukcje dotyczące przesyłania pakietów PWA do sklepu, zobacz Przesyłanie aplikacji.