Progressiivsed veebirakendused: täielik rakendusjuhend globaalsetele arendajatele

Progressiivsed veebirakendused (PWA-d) esindavad paradigmamuutust veebiarenduses, hägustades piire traditsiooniliste veebisaitide ja natiivsete mobiilirakenduste vahel. Need pakuvad täiustatud kasutajakogemust, mida iseloomustavad usaldusväärsus, installitavus ja kaasahaaravus, muutes need ideaalseks lahenduseks globaalse publiku saavutamiseks, kellel on erinev internetiühendus ja seadmevõimalused.

Mis on progressiivsed veebirakendused?

PWA-d on veebirakendused, mis kasutavad kaasaegseid veebistandardeid, et pakkuda natiivse rakenduse sarnast kogemust. Need on:

Usaldusväärsed: Laadivad koheselt ja töötavad võrguühenduseta või madala kvaliteediga võrkudes, kasutades teenusetöötajaid.
Installitavad: Saab lisada kasutaja avaekraanile, pakkudes natiivse rakenduse sarnast kogemust.
Kaasahaaravad: Kaasavad kasutajaid uuesti funktsioonidega nagu tõuketeated.

Erinevalt natiivsetest rakendustest on PWA-d leitavad otsingumootorite kaudu, kergesti jagatavad URL-ide abil ja ei nõua kasutajatelt rakenduste poest läbikäimist. See teeb neist ligipääsetava ja kulutõhusa lahenduse ettevõtetele, kes soovivad oma haaret laiendada.

PWA-de alustehnoloogiad

PWA-d on üles ehitatud kolmele põhitehnoloogiale:

1. HTTPS

Turvalisus on esmatähtis. PWA-sid tuleb edastada üle HTTPS-i, et vältida pealtkuulamist ja tagada andmete terviklikkus. See on teenusetöötajate toimimiseks fundamentaalne nõue.

2. Teenusetöötajad

Teenusetöötajad on JavaScripti failid, mis töötavad taustal, eraldi peamisest brauseri lõimest. Nad toimivad puhverserveritena veebirakenduse ja võrgu vahel, võimaldades selliseid funktsioone nagu:

Vahemällu salvestamine: Varade (HTML, CSS, JavaScript, pildid) salvestamine, et pakkuda võrguühenduseta juurdepääsu ja kiiremaid laadimisaegu.
Taustasünkroonimine: Lubab toiminguid sooritada isegi siis, kui kasutaja on võrguühenduseta. Näiteks saab kasutaja koostada e-kirja võrguühenduseta ja teenusetöötaja saadab selle automaatselt, kui seade taastab ühenduse.
Tõuketeated: Õigeaegsete uuenduste ja kaasahaarava sisu edastamine kasutajatele, isegi kui nad rakendust aktiivselt ei kasuta.

Teenusetöötaja elutsükkel: Teenusetöötaja elutsükli (registreerimine, paigaldamine, aktiveerimine, uuendused) mõistmine on PWA tõhusaks rakendamiseks ülioluline. Vale haldamine võib põhjustada vahemälu probleeme ja ootamatut käitumist. Uuendusi käsitleme üksikasjalikumalt hiljem.

3. Veebirakenduse manifest

Veebirakenduse manifest on JSON-fail, mis pakub metaandmeid PWA kohta, näiteks:

Nimi: Rakenduse nimi, mida kuvatakse avaekraanil.
Lühike nimi: Nime lühem versioon, mida kasutatakse piiratud ruumi korral.
Ikoonid: Ikoonide komplekt erinevates suurustes erinevate seadmete jaoks.
Algus-URL: URL, mis laaditakse, kui kasutaja käivitab PWA avaekraanilt.
Kuva: Määrab, kuidas PWA-d peaks kuvama (nt standalone, fullscreen, minimal-ui). Iseseisev režiim eemaldab brauseri aadressiriba ja navigeerimisnupud, pakkudes natiivsema rakenduse sarnast kogemust.
Teema värv: Määratleb brauseri aadressiriba ja olekuriba värvi.
Taustavärv: Määrab taustavärvi, mida kasutatakse rakenduse laadimise ajal.

Rakendamise sammud: lihtsa PWA ehitamine

Vaatame läbi lihtsa PWA ehitamise sammud:

Samm 1: Seadistage HTTPS

Veenduge, et teie veebisaiti edastatakse HTTPS-i kaudu. Tasuta SSL-sertifikaadi saate hankida Let's Encryptist.

Samm 2: Looge veebirakenduse manifest (manifest.json)

Looge fail nimega `manifest.json` ja lisage järgmine kood:


{
  "name": "Minu Lihtne 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"
}

Asendage `icon-192x192.png` ja `icon-512x512.png` oma tegelike ikoonifailidega. Peate need ikoonid genereerima erinevates suurustes. Online-tööriistad nagu Real Favicon Generator võivad sellega aidata.

Samm 3: Linkige manifestifail oma HTML-is

Lisage järgmine rida oma `index.html` faili `` jaotisesse:


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

Samm 4: Looge teenusetöötaja (service-worker.js)

Looge fail nimega `service-worker.js` ja lisage järgmine kood:


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) {
  // Teosta paigaldamise sammud
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Avati vahemälu');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Vahemälu tabamus - tagasta vastus
        if (response) {
          return response;
        }

        // TÄHTIS: Kui oleme siin, tähendab see, et päringut ei leitud vahemälust.
        return fetch(event.request).then(
          function(response) {
            // Kontrolli, kas saime kehtiva vastuse
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // TÄHTIS: Klooni vastus. Vastus on voog
            // ja kuna me tahame, et nii brauser kui ka vahemälu
            // tarbiksid vastust, peame selle kloonima, et meil
            // oleks kaks sõltumatut koopiat.
            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);
          }
        })
      );
    })
  );
});

See teenusetöötaja salvestab määratud failid paigaldamise ajal vahemällu ja serveerib neid vahemälust, kui kasutaja on võrguühenduseta või aeglase võrguga.

Samm 5: Registreerige teenusetöötaja oma JavaScriptis

Lisage järgmine kood oma `script.js` faili:


if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js')
      .then(function(registration) {
        // Registreerimine oli edukas
        console.log('ServiceWorkeri registreerimine õnnestus ulatusega: ', registration.scope);
      },
      function(err) {
        // registreerimine ebaõnnestus :(
        console.log('ServiceWorkeri registreerimine ebaõnnestus: ', err);
      });
  });
}

See kood kontrollib, kas brauser toetab teenusetöötajaid ja registreerib `service-worker.js` faili.

Samm 6: Testige oma PWA-d

Avage oma veebisait brauseris, mis toetab PWA-sid (nt Chrome, Firefox, Safari). Avage arendaja tööriistad ja kontrollige vahekaarti "Application", et näha, kas teenusetöötaja on õigesti registreeritud ja manifestifail on laaditud.

Nüüd peaksite oma brauseris nägema viipa "Lisa avaekraanile". Sellele viibale klõpsates installitakse PWA teie seadmesse.

Täpsemad PWA funktsioonid ja kaalutlused

Tõuketeated

Tõuketeated on võimas viis kasutajate uuesti kaasamiseks oma PWA-ga. Tõuketeadete rakendamiseks peate:

Hankige Push API võti: Peate kasutama teenust nagu Firebase Cloud Messaging (FCM) või sarnast teenust tõuketeadete haldamiseks. See nõuab konto loomist ja API võtme hankimist.
Tellige kasutaja: Oma PWA-s peate küsima kasutajalt luba tõuketeadete saamiseks ja seejärel tellima ta oma tõuketeenusele.
Käsitlege tõukesündmusi: Oma teenusetöötajas peate kuulama tõukesündmusi ja kuvama kasutajale teatise.

Näide (lihtsustatud - kasutades Firebase'i):

Oma `service-worker.js` failis:


// Impordi Firebase'i teegid
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');

// Initsialiseeri Firebase
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Saadi taustsõnum ', payload);
  // Kohanda teatist siin
  const notificationTitle = 'Taustsõnumi pealkiri';
  const notificationOptions = {
    body: 'Taustsõnumi sisu.',
    icon: '/icon-512x512.png'
  };

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

Tähtis: Asendage kohatäite väärtused oma tegeliku Firebase'i konfiguratsiooniga. See näide demonstreerib taustsõnumite käsitlemist. Peate rakendama tellimisloogika oma peamises JavaScripti koodis.

Taustasünkroonimine

Taustasünkroonimine võimaldab teie PWA-l teha ülesandeid isegi siis, kui kasutaja on võrguühenduseta. See on kasulik stsenaariumide puhul nagu:

Vormide saatmine: Lubades kasutajatel esitada vorme isegi siis, kui nad on võrguühenduseta. Teenusetöötaja salvestab vormi andmed ja esitab need, kui seade taastab ühenduse.
Andmete värskendamine: Andmete sünkroonimine serveriga taustal.

Taustasünkroonimise kasutamiseks peate registreeruma `sync` sündmusele oma teenusetöötajas ja käsitlema sünkroonimisloogikat.

Võrguühenduseta toe strateegiad

Võrguühenduseta toe pakkumiseks teie PWA-s on mitu strateegiat:

Esmalt vahemälu: Proovige sisu serveerida esmalt vahemälust. Kui sisu pole vahemälus, hankige see võrgust ja salvestage see edaspidiseks kasutamiseks vahemällu. See on strateegia, mida kasutatakse ülaltoodud põhinäites.
Esmalt võrk: Proovige sisu hankida esmalt võrgust. Kui võrk pole saadaval, serveerige sisu vahemälust. See on kasulik sisu jaoks, mida sageli värskendatakse.
Ainult vahemälu: Serveerige sisu ainult vahemälust. See on kasulik staatiliste varade jaoks, mis harva muutuvad.
Ainult võrk: Serveerige sisu ainult võrgust. See on kasulik sisu jaoks, mis peab alati olema ajakohane.

Parim strateegia sõltub teie rakenduse konkreetsetest nõuetest.

PWA uuendused

Teenusetöötaja uuendused on PWA hoolduse oluline osa. Kui brauser tuvastab muutuse teie `service-worker.js` failis (isegi ühe baidi muutus), käivitab see uuendusprotsessi. Uus teenusetöötaja paigaldatakse taustal, kuid see ei muutu aktiivseks enne, kui kasutaja järgmine kord teie PWA-d külastab või kõik vana teenusetöötaja kontrolli all olevad olemasolevad vahelehed on suletud.

Saate sundida kohest uuendust, kutsudes oma uue teenusetöötaja `install` sündmuses välja `self.skipWaiting()` ja `activate` sündmuses `clients.claim()`. See võib aga kasutaja kogemust häirida, seega kasutage seda ettevaatlikult.

SEO kaalutlused PWA-de jaoks

PWA-d on üldiselt SEO-sõbralikud, kuna need on sisuliselt veebisaidid. Siiski on mõned asjad, mida meeles pidada:

Veenduge, et teie PWA on leitav: Veenduge, et teie veebisait on otsingumootoritele roomatav.
Kasutage semantilist HTML-i: Kasutage oma sisu struktureerimiseks sobivaid HTML-märgiseid.
Optimeerige mobiilile: Veenduge, et teie PWA on reageeriv ja pakub head kasutajakogemust mobiilseadmetes.
Kasutage kirjeldavaid pealkirju ja metakirjeldusi: Aidake otsingumootoritel mõista, millest teie PWA räägib.
Rakendage struktureeritud andmete märgistust: Pakkuge otsingumootoritele lisateavet oma sisu kohta.

Platvormideülene ühilduvus

Kuigi PWA-d põhinevad veebistandarditel, võib brauserite tugi erineda. On oluline testida oma PWA-d erinevates brauserites ja seadmetes, et tagada selle korrektne toimimine. Kasutage funktsioonide tuvastamist, et funktsionaalsust graatsiliselt vähendada brauserites, mis teatud funktsioone ei toeta.

PWA-de silumine

PWA-de silumine võib olla keeruline teenusetöötajate asünkroonse olemuse tõttu. Kasutage brauseri arendaja tööriistu, et kontrollida teenusetöötaja registreerimist, vahemällu salvestamist ja võrgupäringuid. Pöörake erilist tähelepanu konsooli logidele ja veateadetele.

PWA näited üle maailma

Arvukad ettevõtted üle maailma on edukalt rakendanud PWA-sid. Siin on mõned mitmekesised näited:

Twitter Lite: PWA, mis säästab andmeid ja pakub kiiremat kogemust aeglastel ühendustel, mis on eriti kasulik arengumaade kasutajatele.
Starbucks: Pakub võrguühenduseta menüü sirvimise ja tellimise kogemust, parandades klientide ligipääsetavust ja mugavust kogu maailmas.
Tinder: PWA, mis tõi kaasa kiiremad laadimisajad ja suurema kaasatuse, jõudes laiema publikuni sõltumata võrgutingimustest.
AliExpress: Parandas konversioonimäärasid ja kasutajate kaasatust, pakkudes installitavat rakenduse sarnast kogemust otse veebist.
MakeMyTrip (India): PWA, mis suurendas märkimisväärselt konversioonimäärasid ja vähendas lehe laadimisaegu, lahendades piirkonna ebajärjekindla internetiühenduse väljakutseid.

Kokkuvõte: Veebi tuleviku omaksvõtmine

Progressiivsed veebirakendused pakuvad köitvat alternatiivi traditsioonilistele veebisaitidele ja natiivsetele mobiilirakendustele. Need pakuvad paremat kasutajakogemust, paremat jõudlust ja suuremat kaasatust, muutes need väärtuslikuks tööriistaks ettevõtetele, kes soovivad jõuda globaalse publikuni. Mõistes põhimõisteid ja järgides selles juhendis kirjeldatud rakendamise samme, saavad arendajad luua PWA-sid, mis on usaldusväärsed, installitavad ja kaasahaaravad, pakkudes tänapäeva mobiilikeskses maailmas konkurentsieelist. Võtke omaks veebi tulevik ja alustage oma progressiivsete veebirakenduste ehitamist juba täna!