KURS HTML5, CSS3 I NOWOCZESNY JAVASCRIPT (ES6)
Intensywny, 24-godzinny kurs tworzenia nowoczesnych stron i aplikacji internetowych. Uczestnicy poznają aktualne standardy HTML5, stylowanie interfejsów w CSS3 oraz praktyczne zastosowanie JavaScript i ES6. Szkolenie łączy teorię z warsztatami, dzięki czemu każdy moduł kończy się praktycznym projektem lub ćwiczeniami.
Kurs przygotowuje do samodzielnego tworzenia semantycznych stron, interaktywnych komponentów oraz prostych aplikacji webowych działających również w trybie offline.
Moduł 7 — Tryb Offline i pamięć przeglądarki (2 godz.)
1. Manifest aplikacji
- Tworzenie pliku manifestu dla aplikacji offline.
- Definiowanie zasobów do buforowania w przeglądarce.
- Automatyczne ładowanie strony bez połączenia z internetem.
2. sessionStorage i localStorage
- Przechowywanie danych tymczasowych (sessionStorage) i trwałych (localStorage).
- Odczyt, zapis i usuwanie danych w JavaScript.
- Przykłady zastosowań: zapis ustawień użytkownika, koszyk zakupów, ostatnie odwiedzone strony.
3. Obsługa trybu Offline
- Detekcja stanu połączenia za pomocą
navigator.onLine. - Wyświetlanie komunikatów o braku internetu i przechowywanie danych lokalnie.
- Synchronizacja danych po przywróceniu połączenia.
Moduł 7 — Tryb Offline i pamięć przeglądarki (2 godz.)
Moduł uczy tworzenia aplikacji, które mogą działać w trybie offline oraz wykorzystywać pamięć przeglądarki do przechowywania danych tymczasowych i trwałych.
1. Manifest aplikacji
Plik manifestu pozwala określić, które zasoby mają być buforowane w przeglądarce, aby aplikacja mogła działać bez połączenia z internetem.
Oznacza to, że strona lub aplikacja może działać nawet, gdy komputer lub telefon nie ma połączenia z siecią.
Manifest to osobny plik tekstowy (np. app.manifest), który zawiera listę plików do zapisania lokalnie.
W pliku HTML manifest wskazujemy w atrybucie manifest w tagu <html>, np. <html lang="pl" manifest="app.manifest">.
CACHE MANIFEST # ------------------------------- # Nagłówek CACHE MANIFEST # Musi być na samej górze pliku. # Informuje przeglądarkę, że to plik manifestu dla trybu offline. # ------------------------------- # Lista zasobów do buforowania (dostępnych offline) index.html # główny plik HTML strony style.css # arkusz stylów CSS script.js # plik JavaScript sterujący logiką strony images/logo.png # obrazy/logo używane na stronie # ------------------------------- # NETWORK: # Sekcja NETWORK definiuje pliki, które zawsze wymagają połączenia z internetem. # Znak * oznacza, że wszystkie inne pliki poza powyższymi # będą próbowały się ładować z internetu. # ------------------------------- NETWORK: * # ------------------------------- # Instrukcja dla początkujących krok po kroku: # 1. Umieść plik manifestu (app.manifest) w tym samym katalogu co index.html. # 2. W HTML dodaj: . # 3. Każda zmiana w plikach offline wymaga zmiany manifestu (np. komentarz # v1.1), # żeby przeglądarka pobrała nowe wersje. # 4. Manifest działa najlepiej na serwerze HTTP/HTTPS, nie zawsze lokalnie z dysku. # 5. Dzięki temu strona będzie działać offline, a użytkownik zobaczy poprawnie wszystkie zbuforowane pliki. # -------------------------------
2. sessionStorage i localStorage
JavaScript umożliwia przechowywanie danych bezpośrednio w przeglądarce użytkownika. Dzięki temu strona może zapamiętać różne informacje, np. nazwę użytkownika, ustawienia strony, koszyk zakupów czy identyfikator sesji. Dane są zapisywane w pamięci przeglądarki w postaci pary klucz – wartość. Oznacza to, że każda zapisana informacja ma swoją nazwę (klucz) oraz przypisaną do niej wartość.
W HTML5 dostępne są dwa mechanizmy przechowywania danych:
localStorage – dane są zapisywane na stałe w przeglądarce i pozostają tam nawet po zamknięciu przeglądarki lub ponownym uruchomieniu komputera.
sessionStorage – dane są przechowywane tylko podczas jednej sesji przeglądarki.
Po zamknięciu karty lub przeglądarki wszystkie dane z sessionStorage zostają automatycznie usunięte.
// -------------------------------
// ZAPIS DANYCH W PRZEGLĄDARCE
// -------------------------------
// zapisanie danych w localStorage
// pierwszy parametr to nazwa danych (klucz)
// drugi parametr to wartość, którą zapisujemy
localStorage.setItem("username", "Greg");
// zapisanie danych w sessionStorage
// dane będą dostępne tylko w czasie trwania sesji przeglądarki
sessionStorage.setItem("sessionID", "12345");
// -------------------------------
// ODCZYT DANYCH
// -------------------------------
// pobranie zapisanej wartości z localStorage
// getItem odczytuje dane na podstawie klucza
console.log(localStorage.getItem("username"));
// pobranie zapisanej wartości z sessionStorage
console.log(sessionStorage.getItem("sessionID"));
// -------------------------------
// USUWANIE DANYCH
// -------------------------------
// usunięcie konkretnej wartości z localStorage
// podajemy nazwę klucza, który chcemy usunąć
localStorage.removeItem("username");
// usunięcie wszystkich danych zapisanych w sessionStorage
// metoda clear() czyści całą pamięć sesji
sessionStorage.clear();
// -------------------------------
// PRZYKŁAD PRAKTYCZNY
// -------------------------------
// zapamiętanie preferencji użytkownika
localStorage.setItem("theme", "dark");
// odczytanie preferencji przy ponownym wejściu na stronę
let theme = localStorage.getItem("theme");
console.log("Wybrany motyw:", theme);
// -------------------------------
// PODSUMOWANIE
// -------------------------------
// localStorage
// dane pozostają w przeglądarce nawet po zamknięciu strony
// sessionStorage
// dane są przechowywane tylko do momentu zamknięcia karty lub przeglądarki
Mechanizmy localStorage i sessionStorage służą do zapisywania niewielkich ilości danych bezpośrednio w przeglądarce użytkownika. Dzięki temu strona internetowa może zapamiętać pewne informacje bez konieczności zapisywania ich na serwerze lub w bazie danych.
Najczęściej używa się ich do przechowywania ustawień użytkownika, tymczasowych danych formularzy, preferencji wyglądu strony lub informacji o aktualnej sesji użytkownika. Dane są zapisywane w przeglądarce w postaci pary klucz – wartość, czyli nazwy danych oraz przypisanej do niej wartości.
localStorage stosujemy wtedy, gdy chcemy, aby dane były zapamiętane na dłużej. Informacje zapisane w localStorage pozostają w przeglądarce nawet po zamknięciu strony, zamknięciu przeglądarki lub ponownym uruchomieniu komputera. Przykładem może być zapamiętanie wybranego motywu strony (jasny lub ciemny), języka interfejsu lub zapisanie danych koszyka w sklepie internetowym.
sessionStorage używamy wtedy, gdy dane mają być przechowywane tylko podczas jednej wizyty użytkownika na stronie. Po zamknięciu karty przeglądarki wszystkie dane zapisane w sessionStorage zostają automatycznie usunięte. Przykładem może być tymczasowe zapamiętanie danych formularza, identyfikatora sesji lub informacji o aktualnym kroku w formularzu wieloetapowym.
Podsumowując: localStorage służy do przechowywania danych długoterminowych w przeglądarce użytkownika, natomiast sessionStorage przechowuje dane tylko w czasie jednej sesji przeglądarki. Oba mechanizmy są bardzo przydatne w nowoczesnych aplikacjach internetowych, ponieważ pozwalają przechowywać dane po stronie użytkownika bez użycia bazy danych.
3. Obsługa trybu Offline
Nowoczesne strony internetowe mogą sprawdzać, czy komputer lub telefon użytkownika ma połączenie z internetem. Dzięki temu aplikacja może odpowiednio reagować – na przykład poinformować użytkownika o utracie połączenia lub zapisać dane do późniejszej synchronizacji.
JavaScript umożliwia wykrywanie momentu, w którym połączenie z internetem zostaje utracone lub ponownie przywrócone. W tym celu wykorzystuje się tzw. zdarzenia (events), które informują przeglądarkę o zmianie stanu połączenia.
// wykrycie momentu, gdy internet ponownie zacznie działać
window.addEventListener('online', () => {
console.log("Połączenie przywrócone");
});
// wykrycie momentu utraty połączenia z internetem
window.addEventListener('offline', () => {
console.log("Brak połączenia - tryb offline");
});
W powyższym przykładzie przeglądarka „nasłuchuje” dwóch zdarzeń. Pierwsze z nich (online) uruchamia się, gdy urządzenie ponownie uzyska dostęp do internetu. Drugie zdarzenie (offline) pojawia się wtedy, gdy połączenie z siecią zostanie utracone.
Dzięki temu programista może na przykład wyświetlić komunikat dla użytkownika, zapisać dane w pamięci przeglądarki lub ponownie wysłać dane do serwera po przywróceniu połączenia.
Po ukończeniu modułu uczestnicy będą potrafili tworzyć aplikacje działające offline, zarządzać pamięcią przeglądarki oraz synchronizować dane po ponownym uzyskaniu połączenia z internetem.