Přeměna webu na vysoce kvalitní PWA

Přeměna webu na plně funkční vysoce kvalitní PWA (progresivní webová aplikace) lze provést v obědové pauzě! V tomto článku vás provedeme kompletním procesem.

Krok 1: Vytvořte vysvědčení v PWA Builderu

Nejprve budete chtít zkontrolovat, jestli váš web obsahuje funkce a metadata, které velké PWA potřebují.

1. Přejděte na PWA Builder.
2. Zadejte adresu URL webu, který chcete převést na PWA, a klikněte na Spustit
3. Tvůrce PWA zobrazí kartu sestavy PWA ukazující funkce, které váš web má a které ne.

Krok 2: Prohlédněte si své vysvědčení PWA

Zpráva PWA obsahuje skóre vašeho webu, a to z maximálního možného skóre 100. Skóre jsou založená na třech kategoriích funkcí.

Manifest

PWA vyhodnotí manifest webové aplikace webu, pokud je k dispozici, a identifikuje pole nebo hodnoty, které jsou povinné, doporučené a volitelné. Skóre můžete vylepšit přidáním chybějících hodnot, a to buď úpravou a opětovným publikováním souboru manifestu, nebo pomocí online editoru manifestu.

Varování

Změny provedené v online editoru manifestu nebudou publikovány na váš web. Změny, které provedete, bude používat jenom tvůrce PWA při vytváření aplikace PWA.

Požadované hodnoty musí být přítomny, jinak nebude možné pomocí tvůrce PWA vytvořit vaši aplikaci PWA. Povinná pole zahrnují jednoduše manifest, ikony, název, krátký název a start_url.

doporučená pole nejsou povinná, ale jsou důležitá pro uživatelské prostředí PWA. Důrazně doporučujeme zadat všechny doporučené hodnoty, i když PWA Builder může bez nich vytvořit PWA. Mezi doporučené hodnoty patří režim zobrazení, barva pozadí úvodní obrazovky, popis, orientace, snímky obrazovky, ikona s vysokým rozlišením, ikona maskovatelné, kategorie a klávesové zkratky.

nepovinná pole nejsou povinná, ale v případě potřeby je možné zadat. Volitelná pole zahrnují věkové hodnocení a související aplikace.

Služební pracovník

služební pracovník běží na pozadí, aby umožnil bohaté funkce webových aplikací, kde by jinak docházelo k chybám 404. PWA Builder vyžaduje service worker pro vytvoření PWA, ale pokud žádný nemáte, můžete použít jeden z několika předem připravených service workerů poskytovaných PWA Builderem. Pro použití předem připraveného služebního pracovníka:

1. V nabídce vyberte kartu Možnosti pracovníka služby.
2. V seznamu přednastavených služeb vyberte odpovídajícího servisního pracovníka. Všimněte si, že existuje mnoho předem připravených možností; nezapomeňte vybrat pracovníka služeb, který je nejvhodnější pro váš konkrétní případ použití.
3. Po výběru service workeru, který chcete použít, se vrátíte na PWA výkazovou kartu.

Bezpečnost

Všechny PWA vytvořené pomocí PWA Builderu vyžadují tři protokoly zabezpečení.

1. Váš web musí používat PROTOKOL HTTPS.

2. Váš web musí mít odpovídající certifikát HTTPS.

   Pokud váš web nemá k dispozici certifikát HTTPS, můžete publikovat do Azure, abyste získali integrovanou podporu HTTPS. Alternativně existují bezplatné nástroje třetích stran, jako je Letsencrypt, které vám umožní zdarma získat certifikát HTTPS.

3. Web nesmí obsahovat smíšený obsah. Smíšený obsah je, když stránka obsluhovaná přes PROTOKOL HTTPS obsahuje prostředky načtené přes PROTOKOL HTTP. Smíšený obsah ohrožuje zabezpečení HTTPS a vašeho PWA.

Krok 3: Shromažďování důležitých informací z Partnerského centra

K vytvoření PWA budete potřebovat několik informací z účtu Partnerského centra. Pokud nemáte MSA, klikněte sem pro instrukce, jak začít. Budete se také muset zaregistrovat do programu Windows Developer Program.

Pokud jste to ještě neudělali, budete muset vytvořit aplikaci PWA tak, že si rezervujete nový název. Jakmile si rezervujete svoje jméno, klikněte na tlačítko Zahájit odeslání a vytvořte nové odeslání aplikace.

Dále klikněte na kartu Product Management a vyberte Product Identity. Na stránce s identitou produktu se zobrazí ID balíčku vašeho produktu, ID vydavatele a zobrazovaný název vydavatele. Uložte tyto hodnoty a vraťte se do APLIKACE PWA Builder.

Krok 4: Vygenerování PWA v aplikaci PWA Builder

PWA Builderu

Teď máte všechno, co potřebujete k vytvoření PWA v APLIKACI PWA Builder. Vraťte se na web PWA Builder a klikněte na Vygenerovat.

Tvůrce PWA vás vyzve k zadání informací, které jste získali z Partnerského centra v kroku 3. Vyplňte hodnoty a klikněte na Vygenerovat.

Jakmile PWA Builder vytvoří vaši PWA, váš prohlížeč ji automaticky stáhne. Váš PWA je zabalený do .zip souboru, který obsahuje šest souborů.

Soubor msix je hlavní balíček aplikace PWA. Tento soubor nainstaluje aplikaci PWA na počítač uživatele.

Soubor appx je klasický balíček aplikace. Slouží k instalaci aplikace PWA ve starších verzích Windows. Další informace najdete v tématu balíčky klasických aplikací.

Krok 5: Odeslání balíčků aplikací do Microsoft Storu

Tyto balíčky je možné odeslat do Microsoft Storu stejným způsobem jako jakýkoli jiný soubor MSIX. Další pokyny pro odesílání balíčků PWA do obchodu najdete v tématu Odeslání aplikace.