M

MLOG

Lietuvių

Išsamus vadovas, kaip diegti progresyviąsias žiniatinklio programėles (PWA), apimantis pagrindines koncepcijas, „service workers“, manifestų failus, tiesioginius pranešimus ir geriausias praktikas pasaulinei auditorijai.

Progresyviosios žiniatinklio programėlės: išsamus diegimo vadovas pasaulio programuotojams

Progresyviosios žiniatinklio programėlės (PWA) reiškia paradigmos pokytį žiniatinklio kūrime, ištrindamos ribas tarp tradicinių svetainių ir savųjų mobiliųjų programėlių. Jos siūlo patobulintą vartotojo patirtį, pasižyminčią patikimumu, įdiegiamumu ir įtraukimu, todėl yra idealus sprendimas pasiekti pasaulinę auditoriją su skirtingu interneto ryšiu ir įrenginių galimybėmis.

Kas yra progresyviosios žiniatinklio programėlės?

PWA yra žiniatinklio programėlės, kurios naudoja šiuolaikinius žiniatinklio standartus, kad suteiktų savajai programėlei panašią patirtį. Jos yra:

Skirtingai nuo savųjų programėlių, PWA yra atrandamos per paieškos sistemas, lengvai dalijamos per URL ir nereikalauja, kad vartotojai eitų per programėlių parduotuves. Dėl to jos yra prieinamas ir ekonomiškas sprendimas įmonėms, siekiančioms išplėsti savo pasiekiamumą.

Pagrindinės PWA technologijos

PWA yra sukurtos remiantis trimis pagrindinėmis technologijomis:

1. HTTPS

Saugumas yra svarbiausia. PWA privalo būti teikiamos per HTTPS, kad būtų išvengta pasiklausymo ir užtikrintas duomenų vientisumas. Tai yra pagrindinis reikalavimas, kad „service workers“ veiktų.

2. Service Workers

„Service workers“ yra JavaScript failai, veikiantys fone, atskirai nuo pagrindinės naršyklės gijos. Jie veikia kaip tarpiniai serveriai (proxy) tarp žiniatinklio programėlės ir tinklo, įgalindami tokias funkcijas kaip:

„Service Worker“ gyvavimo ciklas: Norint efektyviai įdiegti PWA, labai svarbu suprasti „service worker“ gyvavimo ciklą (registracija, diegimas, aktyvavimas, atnaujinimai). Neteisingas valdymas gali sukelti spartinančiosios atmintinės problemų ir netikėtą elgseną. Atnaujinimus išsamiau aptarsime vėliau.

3. Žiniatinklio programėlės manifestas (Web App Manifest)

Žiniatinklio programėlės manifestas yra JSON failas, kuriame pateikiami metaduomenys apie PWA, pavyzdžiui:

Diegimo žingsniai: paprastos PWA kūrimas

Panagrinėkime paprastos PWA kūrimo žingsnius:

1 žingsnis: Nustatykite HTTPS

Įsitikinkite, kad jūsų svetainė teikiama per HTTPS. Nemokamą SSL sertifikatą galite gauti iš „Let's Encrypt“.

2 žingsnis: Sukurkite žiniatinklio programėlės manifestą (manifest.json)

Sukurkite failą pavadinimu `manifest.json` ir pridėkite šį kodą:


{
  "name": "Mano paprasta PWA",
  "short_name": "PWA",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Pakeiskite `icon-192x192.png` ir `icon-512x512.png` savo tikrais piktogramų failais. Jums reikės sugeneruoti šias piktogramas įvairiais dydžiais. Tam gali padėti internetiniai įrankiai, pavyzdžiui, „Real Favicon Generator“.

3 žingsnis: Susiekite manifesto failą savo HTML

Pridėkite šią eilutę į savo `index.html` failo `` sekciją:


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

4 žingsnis: Sukurkite „Service Worker“ (service-worker.js)

Sukurkite failą pavadinimu `service-worker.js` ir pridėkite šį kodą:


const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/script.js',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

self.addEventListener('install', function(event) {
  // Atliekami diegimo veiksmai
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Atidaryta spartinančioji atmintinė');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Rastas atitikmuo spartinančiojoje atmintinėje - grąžinamas atsakymas
        if (response) {
          return response;
        }

        // SVARBU: Jei esame čia, tai reiškia, kad užklausa nebuvo rasta spartinančiojoje atmintinėje.
        return fetch(event.request).then(
          function(response) {
            // Patikriname, ar gavome galiojantį atsakymą
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // SVARBU: Klonuokite atsakymą. Atsakymas yra srautas,
            // ir kadangi norime, kad naršyklė sunaudotų atsakymą,
            // o taip pat ir spartinančioji atmintinė, turime jį klonuoti, 
            // kad turėtume dvi nepriklausomas kopijas.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Šis „service worker“ diegimo metu išsaugo nurodytus failus spartinančiojoje atmintinėje ir pateikia juos iš jos, kai vartotojas yra neprisijungęs arba tinkle su lėtu ryšiu.

5 žingsnis: Užregistruokite „Service Worker“ savo JavaScript faile

Pridėkite šį kodą į savo `script.js` failą:


if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js')
      .then(function(registration) {
        // Registracija pavyko
        console.log('ServiceWorker registracija sėkminga, aprėptis: ', registration.scope);
      },
      function(err) {
        // registracija nepavyko :(
        console.log('ServiceWorker registracija nepavyko: ', err);
      });
  });
}

Šis kodas patikrina, ar naršyklė palaiko „service workers“, ir užregistruoja `service-worker.js` failą.

6 žingsnis: Išbandykite savo PWA

Atidarykite savo svetainę naršyklėje, kuri palaiko PWA (pvz., „Chrome“, „Firefox“, „Safari“). Atidarykite kūrėjo įrankius ir patikrinkite „Application“ (Programėlė) skirtuką, kad pamatytumėte, ar „service worker“ yra teisingai užregistruotas ir ar manifest failas yra įkeltas.

Dabar naršyklėje turėtumėte matyti raginimą „Pridėti į pagrindinį ekraną“. Paspaudus šį raginimą, PWA bus įdiegta jūsų įrenginyje.

Išplėstinės PWA funkcijos ir aspektai

Tiesioginiai pranešimai (Push Notifications)

Tiesioginiai pranešimai yra galingas būdas iš naujo įtraukti vartotojus į jūsų PWA. Norėdami įdiegti tiesioginius pranešimus, turėsite:

  1. Gauti „Push API“ raktą: Jums reikės naudoti paslaugą, pvz., „Firebase Cloud Messaging“ (FCM) ar panašią, kad galėtumėte tvarkyti tiesioginius pranešimus. Tam reikia susikurti paskyrą ir gauti API raktą.
  2. Užprenumeruoti vartotoją: Savo PWA turėsite paprašyti vartotojo leidimo gauti tiesioginius pranešimus ir tada užprenumeruoti jį savo tiesioginių pranešimų paslaugoje.
  3. Apdoroti tiesioginius įvykius (Push Events): Savo „service worker“ faile turėsite klausytis tiesioginių įvykių ir rodyti pranešimą vartotojui.

Pavyzdys (supaprastintas - naudojant „Firebase“):

Jūsų `service-worker.js` faile:


// Importuojamos Firebase bibliotekos
importScripts('https://www.gstatic.com/firebasejs/9.6.11/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.6.11/firebase-messaging-compat.js');

// Inicijuojama Firebase
const firebaseConfig = {
  apiKey: "JŪSŲ_API_RAKTAS",
  authDomain: "JŪSŲ_AUTENTIFIKACIJOS_DOMENAS",
  projectId: "JŪSŲ_PROJEKTO_ID",
  storageBucket: "JŪSŲ_SAUGYKLOS_SEGMENTAS",
  messagingSenderId: "JŪSŲ_PRANEŠIMŲ_SIUNTĖJO_ID",
  appId: "JŪSŲ_PROGRAMĖLĖS_ID",
  measurementId: "JŪSŲ_MATAVIMO_ID"
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Gautas fono pranešimas ', payload);
  // Čia pritaikykite pranešimą
  const notificationTitle = 'Fono pranešimo pavadinimas';
  const notificationOptions = {
    body: 'Fono pranešimo tekstas.',
    icon: '/icon-512x512.png'
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

Svarbu: Pakeiskite rezervuotų vietų reikšmes savo tikraisiais „Firebase“ konfigūracijos duomenimis. Šis pavyzdys demonstruoja fono pranešimų tvarkymą. Prenumeratos logiką turėsite įdiegti savo pagrindiniame JavaScript kode.

Fono sinchronizavimas (Background Sync)

Fono sinchronizavimas leidžia jūsų PWA atlikti užduotis net tada, kai vartotojas yra neprisijungęs. Tai naudinga scenarijuose, kaip antai:

Norėdami naudoti fono sinchronizavimą, turėsite užsiregistruoti `sync` įvykiui savo „service worker“ faile ir apdoroti sinchronizavimo logiką.

Neprisijungusio režimo palaikymo strategijos

Yra keletas strategijų, kaip teikti neprisijungusio režimo palaikymą jūsų PWA:

Geriausia strategija priklauso nuo konkrečių jūsų programėlės reikalavimų.

PWA atnaujinimai

„Service worker“ atnaujinimai yra esminė PWA priežiūros dalis. Kai naršyklė aptinka pakeitimą jūsų `service-worker.js` faile (net vieno baito pakeitimą), ji pradeda atnaujinimo procesą. Naujas „service worker“ įdiegiamas fone, bet jis neaktyvuojamas tol, kol vartotojas kitą kartą neapsilankys jūsų PWA arba kol nebus uždaryti visi esami skirtukai, kuriuos valdo senasis „service worker“.

Galite priversti atlikti neatidėliotiną atnaujinimą, iškviesdami `self.skipWaiting()` savo naujojo „service worker“ `install` įvykyje ir `clients.claim()` `activate` įvykyje. Tačiau tai gali sutrikdyti vartotojo patirtį, todėl naudokite atsargiai.

SEO aspektai PWA

PWA paprastai yra draugiškos SEO, nes iš esmės tai yra svetainės. Tačiau yra keletas dalykų, kuriuos reikia turėti omenyje:

Suderinamumas su įvairiomis naršyklėmis

Nors PWA yra pagrįstos žiniatinklio standartais, naršyklių palaikymas gali skirtis. Svarbu išbandyti savo PWA skirtingose naršyklėse ir įrenginiuose, kad įsitikintumėte, jog ji veikia teisingai. Naudokite funkcijų aptikimą, kad grakščiai sumažintumėte funkcionalumą naršyklėse, kurios nepalaiko tam tikrų funkcijų.

PWA derinimas (Debugging)

PWA derinimas gali būti sudėtingas dėl asinchroninio „service workers“ pobūdžio. Naudokite naršyklės kūrėjo įrankius, kad patikrintumėte „service worker“ registraciją, spartinančiąją atmintinę ir tinklo užklausas. Atidžiai stebėkite konsolės žurnalus ir klaidų pranešimus.

PWA pavyzdžiai visame pasaulyje

Daugybė įmonių visame pasaulyje sėkmingai įdiegė PWA. Štai keletas įvairių pavyzdžių:

Išvada: pasitinkant žiniatinklio ateitį

Progresyviosios žiniatinklio programėlės siūlo patrauklią alternatyvą tradicinėms svetainėms ir savosioms mobiliosioms programėlėms. Jos suteikia geresnę vartotojo patirtį, pagerintą našumą ir didesnį įsitraukimą, todėl yra vertingas įrankis įmonėms, siekiančioms pasiekti pasaulinę auditoriją. Suprasdami pagrindines koncepcijas ir vadovaudamiesi šiame vadove pateiktais diegimo žingsniais, programuotojai gali sukurti PWA, kurios yra patikimos, įdiegiamos ir įtraukiančios, suteikdamos konkurencinį pranašumą šiandieniniame, į mobiliuosius įrenginius orientuotame pasaulyje. Pasitikite žiniatinklio ateitį ir pradėkite kurti savo progresyviąsias žiniatinklio programėles jau šiandien!