V mém předchozím článku (který se díky vám stal nejlepším článkem týdne) jsem diskutoval o tom, jak vytvořit aplikaci počasí pomocí ReactJS. V tomto článku se dozvíte, co jsou progresivní webové aplikace a jak aplikaci počasí nasadit do obchodu PWA.
Úvod do PWA
Progresivní webové aplikace jsou webové stránky, které přinášejí webové funkce do prostředí podobné aplikaci. V zásadě to znamená, že místo toho, abyste museli vytvářet samostatnou mobilní aplikaci pro vaši společnost nebo obchodní zájmy, můžete pouze vytvořit progresivní webovou aplikaci a využívat webové i nativní funkce. Aby to bylo ještě jednodušší, představte si PWA jako nejlepší kombinaci webových a mobilních aplikací.
Výhody PWA :
- Progresivní webové aplikace jsou neuvěřitelně rychlé.
- Snazší návštěva webových stránek než instalace aplikace.
- Nativní aplikace jsou dobře integrovány a konfigurovány pro operační systémy, což poskytuje lepší výkon.
- Přístup offline.
- Nízká spotřeba dat.
Začínáme
Při vytváření aplikace počasí jsme veškerou naši pozornost zaměřili na src složku. Při budování naší PWA aplikace se můžeme soustředit na veřejnost složku. Začněme tím, že vyčistíme nepořádek v této složce, dokud nebude pouze index.html soubor zůstane.
Začněme vytvořením Service Worker v index.html. Service worker je skript, který běží na pozadí webové stránky. To může být velmi užitečné, protože může běžet i po ukončení naší aplikace, a proto může doručovat upozornění a pracovat offline. Nového servisního pracovníka lze vytvořit pomocí následujícího kódu v index.html soubor těsně pod div s root id.
<script>
if('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./serviceworker.js')
.then(reg => console.log(reg.scope))
.catch(err => console.log(err))
})
}
</script>
Vytvořte serviceworker.js soubor ve veřejné složce. Do této složky vložte následující kód:
const CACHE = "dev";
const URL = ["index.html", "offline.html"];
const self = this;
Jak jsem již zmínil, PWA jsou extrémně rychlé. Důvodem je, že udržují mezipaměť. Vytvoříme tedy proměnnou CACHE a dát tomu jméno. Poté v proměnné URL poskytujeme adresy URL, které se mají uložit do mezipaměti.
Nyní jsou v tomto souboru tři události, které je třeba provést:
- Instalace servisního pracovníka
Přidejte adresy URL do mezipaměti.
self.addEventListener("install", (e) => {
e.waitUntil(
caches.open(CACHE).then((cache) => {
return cache.addAll(URL);
})
);
- Poslouchejte požadavky
Porovnejte požadavek, který stránka obdrží, a vraťte požadavek, pokud je načtení úspěšné, jinak vykreslete offline stránku.
self.addEventListener("fetch", (e) => {
e.respondWith(
caches.match(e.request).then(() => {
return fetch(e.request).catch(() => caches.match("offline.html"));
})
);
});
- Aktivujte servisního pracovníka
Odstraňte starou mezipaměť a uložte novou.
self.addEventListener("activate", (e) => {
const newCache = [];
newCache.push(CACHE);
e.waitUntil(
caches.keys().then((cacheNames) =>
Promise.all(
cacheNames.map((cacheName) => {
if (!newCache.includes(cacheName)) {
return caches.delete(cacheName);
}
})
)
)
);
});
Pokud se chcete dozvědět více o ukládání do mezipaměti, přejděte na tento odkaz.
Abychom se ujistili, že testujeme tento hit npm start na svém terminálu přejděte do konzole pro vývojáře Chrome a vyberte Aplikace a na kartě Servisní pracovníci Panel nezapomeňte zaškrtnout Aktualizovat při opětovném načtení a poté na Vymazat úložiště stiskněte panel Vymazat data webu .
Je čas vytvořit náš offline.html strana. Pro tuto stránku budu používat minimální styly, ale neváhejte, aby tato offline stránka vypadala mimořádně.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap" rel="stylesheet">
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
background-image: linear-gradient( to right, rgba(255, 100, 0, 0.52), rgba(0, 195, 255, 0.73) );
display: flex;
font-size: 30px;
color: white;
font-family: 'Balsamiq Sans', cursive;
align-items: center;
text-align: center;
justify-content: center;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #fff;
opacity: 1;
margin: -120px 170px;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="lds-ripple"><div></div><div></div></div>
<span>You are currently offline. Please go online to check the weather.</span>
</body>
</html>
Nyní znovu načtěte stránku a sledujte úložiště mezipaměti. Pokud to vypadá jako na obrázku níže, gratulujeme! Právě jste uložili své webové stránky do mezipaměti pro rychlejší a offline přístup.
Pro další testování přejděte na Síť a vyberte Offline .
Nyní znovu načtěte stránku, abyste viděli soubor offline.html uložený v mezipaměti stránku.
Manifest
Soubor manifestu je jednoduchý soubor JSON, který poskytuje informace o aplikaci. Vytvořte tedy manifest.json soubor a vložte tam tento kus kódu.
{
"name": "Weather App PWA",
"short_name": "Weather App",
"icons": [
{
"src": "./logo.png",
"type": "image/png",
"sizes": "1024x1024"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Chcete-li se dozvědět více o souborech manifestu, podívejte se na tento odkaz.
Maják
Lighthouse je nástroj pro hodnocení kvality webových aplikací. Nainstalujte jej a poté ve vývojářské konzoli Chrome klikněte na Vygenerovat přehled . Nyní se podívejme, jak si naše aplikace vede:
No, máme docela dobré skóre podle Majáku . Jak vidíte, existuje jeden test, který stále neprošel a který je zodpovědný za udržení našeho výkonu skóre nízké.
Nasazení aplikace
Abychom překonali chybu nepřesměrování HTTP provozu na HTTPS, budeme muset naši aplikaci nasadit.
Přejděte k terminálu a zadejte npm run build vytvořit složku sestavení v adresáři projektu.
Vytvořte si účet na Netlify a na hlavním panelu, který vypadá asi takto:
Jednoduše přetáhněte složku sestavení na tuto obrazovku a to je vše, co potřebujete k nasazení aplikace online na netlify.
Kliknutím na vygenerovanou adresu URL zobrazíte svou aplikaci skutečně na internetu, zkuste se odpojit od internetu, abyste viděli i offline stránku.
Výsledek
Nyní spusťte test Lighthouse na naší nasazené aplikaci:
Úžasný! To je skvělé skóre pro naši aplikaci PWA.
Nyní, pokud jste udělali vše správně, měli byste vidět + vedle ikony záložky na vyhledávací liště adresy URL v prohlížeči Chrome.
Nyní je to tlačítko, které vám umožní nainstalovat tuto aplikaci do vašeho zařízení. Klikněte na + ikonu a nainstalujte aplikaci.
Chcete-li zobrazit stránku offline, odpojte připojení k internetu.
To je opravdu úžasné. Aplikace je nyní nativní pro váš systém a můžete ji používat i na svém mobilu.
Nyní k té nejúžasnější části – publikování aplikace v obchodě PWA. Přejděte do obchodu PWA a zaregistrujte se. Po přihlášení přejděte na stránku svého profilu a klikněte na ikonu hamburgeru zcela vpravo a klikněte na malé + symbol. Zadejte všechny podrobnosti o své aplikaci včetně názvu, popisu, snímků obrazovky atd. Nakonec spusťte kontrolu Lighthouse PWA. Po získání všech tří zaškrtnutí jej můžete odeslat ke kontrole.
Voila! A je to. Po kontrole bude vaše aplikace zveřejněna v obchodě PWA a po nějaké době ji najdete pod Objevit sekce.
Byl to dlouhý článek, přesto informativní. Doufám, že jste pochopili každý kousek toho, co je progresivní webová aplikace, jak ji můžete vytvořit, otestovat ji pomocí nástroje Lighthouse a také nasadit aplikaci PWA.
V případě jakýchkoliv dotazů mě neváhejte kontaktovat na mém LinkedIn. Kód je k dispozici na mém Github.