Jak vytvořit progresivní webovou aplikaci

Sep 13, 2025
jak

Mobilní nyní účtuje přes polovinu provozu webu a webové aplikace umožňují uživatelům dělat věci v prohlížeči, který soupeřil nativní aplikace, ale je problém: kvalita připojení a zařízení se mění masivně po celém světě.

Catering jak uživatelům na rychlé připojení blesku v Soulu, a uživatelé ve venkovské Indii na zastaralém telefonu, je nejnovější výzva použitelnosti a progresivní webové aplikace jsou řešením.

Pwas Použijte progresivní vylepšení, abyste načtěte nejdůležitější obsah jako první, pak přidat prezentační a funkční doplňky podle potřeby, což znamená, že všechny vaši uživatelé získají stejné základní zkušenosti co nejrychleji. Pokud chcete dosáhnout co nejširší možné publikum, pwas jsou způsob, jak jít.

  • 10 kroků k zapojení uživatelů

Ačkoli progresivní webové aplikace přinášejí mnoho výhod a funkčnosti na webu, nevyžadují přepisování celé aplikace. Jakákoliv aplikace může být převedena na PWA přidáním několika dalších vrstev na něj.

Pro dosažení nejlepších výsledků budete chtít dát silný důraz na výkon od začátku - ale to je pravda pro každou webovou aplikaci. Zde půjdeme kroky, aby vaše aplikace progresivní.

Pokud chcete vytvořit hladké místo, ujistěte se web hosting je na místě a používat slušný Webové stránky Builder. .

01. Podáváme přes https

Buďme upřímní: Měli byste to dělat stejně. SSL přidává další vrstvu zabezpečení na web, což pomáhá svým uživatelům pocit bezpečí při používání vašich stránek. S PWAS, HTTPS je nezbytný pro používání služeb pracovníků a umožňující instalaci domovské obrazovky. Certifikát SSL si můžete zakoupit ze svého registrátora domény na malých nákladech a poté jej nakonfigurujte prostřednictvím hostingové služby.

02. Vytvořit aplikační shell

Váš App Shell je první věc, která načte - první věc, kterou uživatel vidí. Mělo by být existovat výhradně ve vašem indexovém dokumentu HTML, s inline CSS, aby se zajistilo, že se zobrazí co nejrychleji a váš uživatel není zíral na bílou obrazovku déle, než je nutné. Použití Shell je součástí vzoru postupného vylepšení. Vaše aplikace by měla co nejdříve poskytnout uživatelský obsah a postupně jej zvýšit jako více dat (pravděpodobně javascript).

Níže uvedený příklad je převzat z aplikace Reage.js. Uživatel je prezentován s obrysem aplikace a indikátor načítání v index.html. Poté, jakmile je javascript zatížení a reagovat boots nahoru, plná aplikace je vykreslena ve skořepině. 

 & lt;! - index.html - & gt;
& lt; tělo & gt;
& lt, div id = "kořen" & gt;
  & lt, div id = "kontejner" & gt;
  Div Class = "vnitřní kontejner" & gt;
  & lt, div id = "záhlaví" & gt;
  & lt; img src = "/ aktiva / icon.png" alt = "logo" / & gt;
  & lt; h1 & gt; chatu & lt; / h1 & gt;
  & lt; / div & gt;
  & lt, div id = "nakládací kontejner" & gt;
  & lt; img src = "/ aktiva / icon.png" alt = "logo" id = "nakladač" / gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / tělo & gt;
// index.js.
Reagrom.Render (
& lt; app / gt;
Document.getElementbyid ('root')
);

03. Zaregistrujte servisní pracovník

Chcete-li klepnout na plné spektrum pwa dobroty (push oznámení, ukládání do mezipaměti, nainstalovat výzvy) budete potřebovat pracovníka služby.

Naštěstí jsou docela snadno nastavit. Níže zkontrolujeme, zda prohlížeč uživatelů podporuje služební pracovníky. Pak, pokud ano, můžeme se pohybovat dopředu s registrací servisního pracovního souboru, zde nazvaný Service-Worker.js. . Všimněte si, že v tomto souboru v tomto bodě nepotřebujete nic zvláštního - může být prázdný.

V následujícím příkladu však ukážeme, jak využíváme tři klíčové události životního cyklu pracovníků. Jedná se o 'Instalovat', kdy uživatel poprvé navštíví svou stránku; "Aktivovat", těsně před dokončením registrace; a 'FETCH', když aplikace provede požadavek na síti. Poslední je relevantní pro caching a offline schopnost. 

& lt; scénář a gt;
  Pokud ('serviceworker' v navigátoru) {
  window.addeventListener ('load', funkce () {
  navigátor.Serviceworker.register ('Service-Worker.js'). Pak (funkce (registrace) {
  // Registrace byla úspěšná
  console.log ('registrovaný!');
  }, funkce (err) {
  // registrace selhala :(
  console.log ("registrace služby Serviceworker selhala:", Err);
  }). Úlovek (funkce (funkce (err) {
  console.log (err);
  });
  });
  } else {
  konzole.log ("servisní pracovník není podporován");
  }
  & lt; / script & gt;
// Service-Worker.js
self.addeventlistener ('Instalovat', funkce () {
  console.log ('Instalovat!');
});
self.addeventlistener ("aktivovat", událost = & gt; {
  console.log ('aktivace!');
});
self.addeventlistener ('fetch', funkce (událost) {
  console.log ('fetch!', event.request);
});

04. Přidat push oznámení

Pracovníci servisu umožňují svým uživatelům přijímat oznámení o push API. Chcete-li k němu přistupovat, můžete klepnout na self.registration.pushManager. Ze servisního pracovního souboru. Vzhledem k tomu, že odesílání push oznámení se silně spoléhá na vaše nastavení backend, nebudeme se do něj ponořit.

Pokud začínáte aplikaci od nuly, služba Firebase Google je dodávána s Firebase Cloud Messaging pro relativně bezbolestné push oznámení (nezapomeňte: Ujistěte se, že uchováváte své designové soubory v bezpečí cloudové úložiště) . Níže uvedený kód ukazuje, jak se zaregistrovat pro oznámení push pomocí tlačítka API. 

 navigátor.serviceworker.ready.then (funkce (registrace) {
  Pokud (!!! registrace.pushManager) {
    výstraha ("Žádná podpora oznámení.");
    vrátit false;
  }
  // Přihlásit se `push notification` z push manager
  registration.pushManager.Subscribe ({
  uservisibleonly: true // vždy zobrazit oznámení, když obdržíte
  })
  .then (funkce (předplatné) {
  console.log ('upsáno.');
  })
  .catch (funkce (chyba) {
  console.log (chyba předplatného: ', chyba);
  });
})

05. Přidat webovou aplikaci Manifest

Aby byla vaše aplikace instalovatelná, musíte zahrnout a manifest.json. v kořenovém adresáři aplikace. Můžete si na to myslet jako popis vaší aplikace, podobné tomu, co byste mohli předložit do App Store. Obsahuje ikony, úvodní obrazovku, jméno a popis.

K dispozici je také nějaká konfigurace, jak se zobrazí vaše aplikace, když je spuštěna z domovské obrazovky uživatele: Chcete zobrazit panel adresy v prohlížeči nebo ne? Jakou barvu chcete stavový řádek? A tak dále. Všimněte si, že správné manifest.json. Měly by obsahovat celé spektrum velikostí ikon pro různá zařízení. Níže uvedený kód je náhledem některých vlastností, které vaše manifest může zahrnovat. 

 {
  "Short_name": "Chat",
  "Jméno": "Chat",
  "Ikony": [
  {
  "SRC": "/ aktiva / icon.png",
  "Velikosti": "192x192",
  "Typ": "Image / png"
  }
  Zaujatý
  "Start_URL": "/? Utm_source = HomeScreen",
  "background_color": "# e05a47",
  "Theme_Color": "# E05A47",
  "Display": "samostatný"
}

06. Konfigurace výzvy nainstalace

Když uživatel navštíví PWA se servisním pracovníkem a manifestem, chrom se je automaticky vyzve k instalaci do jejich domácích obrazovky, vzhledem k následujícím: Uživatel musí navštívit web dvakrát s pěti minutami mezi návštěvami.

Myšlenka zde je počkat, až uživatel demonstruje zájem o vaši aplikaci, a pak je požádat, aby bylo upevnění jejich zařízení (to je v ostrém kontrastu k nativnímu přístupu aplikace, který požádá o tuto investici up-front).

Mohou však existovat případy, kdy chcete zobrazit výzvu nainstalovat v různých situacích, například poté, co uživatel má určitou užitečnou akci. Abych to udělali, zachytíme předinstallPromt. Událost a uložte jej později, pak nasadíte výzvu, když vidíme FIT. 

 window.AddEventListener ('workstallprompt', e = & gt; {
  console.log ('předtím předinstalovat událost ");
  e.preventdefault ();
  // Stash událost, takže může být spuštěna později.
  Tento end.deferredprompt = E;
  vrátit false;
  });
// Když chcete vyvolat výzvu:
TentoFerredprompt.Prompt ();
  TentoFerredprompt.userchoice.then (volba = & gt; {
  console.log (volba);
  });
TentoFerredprompt = null;

07. Analyzujte výkon své aplikace

Výkon je srdcem a duší pwas. Vaše aplikace by měla být rychlá pro uživatele ve všech síťových podmínkách. Schopnost ukládání do mezipaměti a offline pomáhá hodně, ale na konci dne by vaše aplikace měla být rychlá, i když uživatel nemá prohlížeč na podporu technologie servisní pracovníka. Jedná se o definici progresivního vylepšení - poskytovat velké zkušenosti pro každého, bez ohledu na modernost zařízení nebo síťových podmínek.

K tomu je užitečná sada metrik je železniční systém. Železnička je to, co Google volá "uživatelský výkonový model" - soubor pokynů pro měření výkonu aplikace.

Zkratka stojí za odpověď (jak dlouho trvá pro vaši aplikaci reagovat na akce uživatele), animace (udržení rychlosti animace na 60fps), nečinný (pomocí času, kdy vaše aplikace nedělá nic jiného načíst a mezipaměti další aktiva) a Zatížení (načítání aplikace do jedné nebo méně).

Zde je stůl smysluplných referenčních měřítek pro nakládání aplikací, jak je dodáváno společností Meggin Kearney, Tech Writer At Základy Google Web. .

delay and user reaction

Kliknutím na ikonu v pravém horním zvětšení zvětšíte obrázek

08. Audit APP APP S Lighthouse

Google je největším šampiónem tlačí progresivní webové aplikace jako budoucnost webu. Jako takový dodal užitečný nástroj pro vedení vašeho vývoje PWA.

Dříve volal maják a dodávaný jako chromový prodloužení, jak chrom 60 je součástí chrome devtools, v části "Audity". Jaký maják provozuje vaši žádost za různých podmínek a měří jeho odpověď a úspěch podle pokynů PWA. To pak vám dává skóre ze 100. To může také skóre vaší aplikace na webové osvědčené postupy současně.

Následující text je uveden seznam hodnot Lighthouse. Použití také zobrazuje popisy.

  • Registruje servisní pracovník
  • Reaguje s 200, pokud je to offline
  • Obsahuje nějaký obsah, když JavaScript není k dispozici
  • Používá https.
  • Přesměrování HTTP provoz na HTTPS
  • Zatížení stránky je dostatečně rychlé na 3G
  • Uživatel může být vyzván k instalaci webové aplikace
  • Nakonfigurován pro vlastní úvodní obrazovku
  • Adresní panel odpovídá barvám značky
  • Má & lt; meta název = "výřez" & gt; tag with. šířka nebo počáteční stupnice
  • Obsah je správně dimenzován pro výřez

Tento článek se původně objevil ve Web Designer; Přihlásit se zde .

Související články:

  • Pwas: Vítejte v mobilní revoluci
  • Jak používat animaci v mobilních aplikacích
  • 9 Úžasné tajemství Pwa

jak - Nejoblíbenější články

Jak čistit štětce: Definitivní průvodce

jak Sep 13, 2025

(Image Credit: Sonny Flanaghan) Naučit se čistit štětce správně je důležitou dovedností. Jak se říká: Pok..

Jak nakreslit vlk

jak Sep 13, 2025

Pokud jste zvládli Jak nakreslit psa Měli byste být odpuštěni, abyste si mysleli, že bys mohl být také schopen kreslit vlka. Zatímc..

Jak skrýt kód JavaScriptu z zobrazení Zdroj

jak Sep 13, 2025

Pokud neberete preventivní opatření s vaším kódem JavaScript, děláte život pro každého, kdo se chce klonovat. Pokud v�..

Průvodce webovým nástrojům Google

jak Sep 13, 2025

Strana 1 z 5: Zobrazit a změnit HTML, CSS & AMP; JS. Zobrazit a změ..

Jak vytvořit digitální olejomalbu pomocí ARTRAGE

jak Sep 13, 2025

Malování digitálně pomocí a Kreslení tabletu a kreslení softwaru ARTRAGE. Využití na grafické tablety ne..

Master velkoplošné prostředí v 3ds max

jak Sep 13, 2025

Cílem tohoto díla bylo vytvořit kus 3D umění To je připraveno jít přímo z rámu vyrovnávací paměti, s ..

Jak vyskakovat přesvědčivé oči v Zbrushu

jak Sep 13, 2025

Když sochařství realistické 3D lidské oko přidat do vaší knihovny hotových aktiv, nezapomeňte, že žádné dva oči ne..

Vytvořit 3D oblečení s realistickými záhyby a záhyby

jak Sep 13, 2025

Provádění realistického virtuálního oblečení je jedním z nejnáročnějších úkolů od inovací animace CG. Oblečení..

Kategorie