WAP Žaidimai

Žingsnis 1

Sukurkite Web App Manifestą

Manifesto failas (manifest.json) yra būtinas PWA komponentas. Jame nurodomas programėlės pavadinimas, piktogramos, spalvos ir kitos nuostatos, kurias naudos operacinė sistema, kai vartotojas įdiegs jūsų svetainę.

1. Sukurkite `manifest.json`

Sukurkite failą pavadinimu manifest.json ir įklijuokite žemiau esantį kodą. Pakeiskite reikšmes pagal savo poreikius.

manifest.json

{
  "name": "WDB Katalogas",
  "short_name": "WDB",
  "start_url": "/index.php",
  "display": "fullscreen",
  "orientation": "any",
  "background_color": "#000000",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/images/192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Parametrų paaiškinimai:

name: Pilnas programėlės pavadinimas. Bus rodomas diegimo metu arba programėlių parduotuvėje.
short_name: Trumpas pavadinimas, kuris bus matomas po piktograma įrenginio pagrindiniame ekrane.
display: Kontroliuoja, kaip programėlė bus rodoma. Galimos reikšmės: "fullscreen" (per visą ekraną), "standalone" (kaip atskira programa, dažniausias pasirinkimas), "minimal-ui" (su minimaliais naršyklės valdikliais), arba "browser" (įprastame naršyklės lange).
orientation: Nurodo pageidaujamą programėlės ekrano orientaciją, pvz., "portrait" (vertikali), "landscape" (horizontali), arba "any" (bet kokia).
background_color: Fono spalva, kuri bus rodoma krovimosi lange (splash screen), kol programėlė kraunasi.
icons: Programėlės piktogramos. Svarbu nurodyti bent dvi skirtingas rezoliucijas (192x192 ir 512x512), kad piktograma gerai atrodytų įvairiuose įrenginiuose. Šios piktogramos bus naudojamos įrenginio darbalaukyje, programėlių sąraše ir krovimosi lange.

2. Prijunkite manifestą prie svetainės

Įklijuokite šią eilutę į savo pagrindinio puslapio (pvz., index.php) <head> skiltį.

HTML

<link rel="manifest" href="/manifest.json">

Žingsnis 2

Sukurkite Service Worker

Service Worker (sw.js) yra technologija, veikianti fone, kuri yra būtina, kad naršyklė leistų įdiegti svetainę kaip PWA. Šioje konfigūracijoje mes nenaudosime Service Worker failų išsaugojimui (angl. caching), todėl programėlė neveiks atsijungus nuo interneto, bet atitiks PWA diegimo reikalavimus.

Sukurkite `sw.js` failą

Sukurkite failą pavadinimu sw.js pagrindiniame svetainės kataloge ir įklijuokite šį kodą. Jis yra būtinas PWA funkcionalumui.

sw.js

self.addEventListener('install', event => {
  self.skipWaiting();
});

self.addEventListener('fetch', event => {
  event.respondWith(fetch(event.request));
});

Žingsnis 3

Užregistruokite Service Worker

Paskutinis žingsnis – nurodyti naršyklei, kad ji turi pradėti naudoti jūsų sukurtą Service Worker. Tai padaroma įterpiant trumpą JavaScript kodą į jūsų pagrindinį puslapį.

Pridėkite registracijos kodą

Įklijuokite šį JavaScript kodą į savo pagrindinio puslapio <script> žymą, geriausia prieš pat uždarant </body>.

JavaScript

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      })
      .catch(error => {
        console.log('ServiceWorker registration failed: ', error);
      });
  });
}

Žingsnis 4

Kaip Vartotojai Įdiegs Programėlę?

Sėkmingai paruošus svetainę, vartotojai ją gali įdiegti skirtinguose įrenginiuose. Procesas šiek tiek skiriasi priklausomai nuo operacinės sistemos ir naršyklės. Štai kaip tai veikia populiariausiose platformose:

Stacionarūs Kompiuteriai (Chrome, Edge)

Atidarius svetainę, adreso juostos dešinėje pusėje vartotojai turėtų ieškoti diegimo piktogramos (dažniausiai monitorius su rodykle žemyn). Vartotojui tereikia paspausti šią piktogramą ir patvirtinti diegimą.

Android (Chrome Naršyklė)

Apsilankius svetainėje, kai kurie įrenginiai ekrano apačioje gali parodyti automatinį pasiūlymą įdiegti programėlę. Jei pasiūlymas neatsiranda, vartotojas gali paspausti trijų taškų meniu mygtuką viršuje dešinėje ir pasirinkti Įdiegti programą (Install app).

iOS (Safari Naršyklė)

Apple įrenginiuose procesas visada yra rankinis. Vartotojas turi atidaryti svetainę per Safari naršyklę, paspausti "Dalintis" (Share) mygtuką (kvadratas su rodykle į viršų) ir iš meniu pasirinkti Pridėti į pradinį ekraną (Add to Home Screen).

(Pasirenkama) Žingsnis 5

Sukurkite Individualų Pasikrovimo Ekraną

Standartinis PWA pasikrovimo ekranas (splash screen) yra gana paprastas – jis rodo tik fono spalvą ir piktogramą. Jei norite, kad vartotoją pasitiktų pilno dydžio paveikslėlis ar logotipas, galite sukurti specialų pasikrovimo puslapį.

1. Sukurkite `splash.html`

Sukurkite naują failą pavadinimu splash.html ir įklijuokite šį kodą. Nepamirškite pakeisti /images/splash-image.jpg į kelią iki jūsų norimo paveikslėlio.

splash.html

<!DOCTYPE html>
<html lang="lt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kraunasi...</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #000000;
        }
        #splash-image {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            object-fit: cover; 
            z-index: -1;
        }
    </style>
</head>
<body>
    <img id="splash-image" src="/images/splash-image.jpg" alt="Pasikrovimo ekranas">

    <script>
        setTimeout(() => {
            window.location.href = '/index.php';
        }, 3000);
    </script>
</body>
</html>

2. Atnaujinkite `manifest.json`

Dabar reikia nurodyti, kad PWA startuotų iš jūsų sukurto splash.html puslapio. Atidarykite manifest.json ir pakeiskite start_url reikšmę:

manifest.json (pakeitimas)

"start_url": "/splash.html",

Atlikus šiuos pakeitimus, įdiegus ir paleidus PWA, vartotojui pirmiausia bus parodytas jūsų paveikslėlis per visą ekraną, o po 3 sekundžių jis bus nukreiptas į pagrindinį svetainės puslapį.

Ar ši informacija buvo naudinga?

Paverskite savo svetainę programėle (PWA)