Progressive Web Apps with JavaScript: A Complete Guide

Jei esate kūrėjas arba tiesiog domitės naujausiomis web technologijomis, tikriausiai jau girdėjote apie progresyvias web programas (PWA). Tai yra modernus požiūris į web programų kūrimą, kuris leidžia sukurti greitas, patikimas ir įrenginiuose nepriklausomas programas. Šiame straipsnyje aptarsime, kaip sukurti progresyvias web programas naudojant JavaScript, ir pateiksime keletą pavyzdžių.

Kas yra progresyvios web programos?

Progresyvios web programos (PWA) yra web aplikacijos, kurios siūlo panašią patirtį kaip natūralios mobiliosios programos, tačiau jų naudojimui nereikia atsisiųsti jokios aplikacijos iš app store. PWA yra pagamintos naudojant paprastus web standartus, tačiau jos sugeba pasiūlyti vartotojams greitą ir patogų naudojimą. Svarbiausi PWA privalumai yra greitis, patikimumas ir galimybė veikti net ir esant silpnam interneto ryšiui.

Kaip JavaScript padeda kuriant PWA?

JavaScript yra pagrindinis kalba kuriant PWA. Jis naudojamas tam, kad aplikacija galėtų reaguoti į vartotojo veiksmus, atnaujinti turinį ir palaikyti gerą našumą. Naudojant JavaScript, PWA gali pasiekti daug funkcionalumo, kurio anksčiau buvo galima tikėtis tik iš natūralių mobiliųjų programų, kaip naršymas be interneto ryšio arba pranešimų siuntimas net ir tada, kai nėra ryšio.

Progresyvių web programų su JavaScript kūrimo pagrindai

Kuriant PWA naudojant JavaScript, reikia suprasti kelis pagrindinius aspektus: Service Workers, Web App Manifests, ir HTTPS. Šie trys komponentai leidžia PWA veikti taip, kaip natūralios mobiliosios programos, suteikiant galimybę dirbti be interneto, rodyti pranešimus ir greitai įkrauti puslapius.

Service Workers

Service Workers yra JavaScript failai, kurie veikia nepriklausomai nuo pagrindinės aplikacijos. Jie leidžia atlikti tokias operacijas kaip turinio užkrovimas iš talpyklos, užtikrinant, kad aplikacija galėtų veikti net ir be interneto ryšio. Service Workers užtikrina, kad jūsų PWA būtų greita ir patikima, nes jie leidžia atlikti užkulisinę funkciją ir pasirūpinti, kad duomenys būtų užkrauti ir saugomi tinkamai.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
  .then(function(registration) {
    console.log('Service Worker registered with scope:', registration.scope);
  })
  .catch(function(error) {
    console.log('Service Worker registration failed:', error);
  });
}

Web App Manifest

Web App Manifest yra JSON failas, kuris nurodo PWA pavadinimą, ikoną, spalvą ir kitus parametrus, kurie padeda vartotojui sukurti patikimą ir atpažįstamą aplikacijos išvaizdą. Manifestas leidžia nustatyti, kaip jūsų programa atrodys, kai ją įdiegs vartotojas į savo įrenginį.

{
  "name": "My Progressive Web App",
  "short_name": "PWA",
  "description": "This is a sample progressive web app",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

HTTPS

Progresyvios web programos turi veikti tik per HTTPS, nes tai užtikrina saugumą ir apsaugą nuo galimų kibernetinių grėsmių. Be to, HTTPS leidžia įgalinti visus PWA funkcionalumus, tokius kaip Service Workers ir Web App Manifests. Tai taip pat užtikrina, kad jūsų vartotojai bus apsaugoti nuo galimų duomenų vagysčių.

Praktiniai pavyzdžiai

Dabar pažvelkime į kelis praktinius pavyzdžius, kaip kurti progresyvias web programas su JavaScript. Pateiksime paprastą aplikaciją, kuri naudoja PWA technologijas ir JavaScript.

Pavyzdys 1: Paprasta PWA su Service Worker

Šiame pavyzdyje mes sukursime paprastą PWA, kuris įkraus turinį iš talpyklos ir leis vartotojui naudotis aplikacija net ir be interneto ryšio. Pirmas žingsnis – sukurti service-worker.js failą.

// service-worker.js

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

Pavyzdys 2: PWA su pranešimais

Naudodami JavaScript ir Service Workers, galite įdiegti pranešimus. Tai leidžia jūsų programai siųsti pranešimus net tada, kai vartotojas nėra aktyvus programoje. Pavyzdžiui, jei norite sukurti pranešimus, kai yra naujų žinučių arba atnaujinimų, tai galite pasiekti šiuo būdu:

if ('Notification' in window && navigator.serviceWorker) {
  Notification.requestPermission().then(function(permission) {
    if (permission === 'granted') {
      navigator.serviceWorker.ready.then(function(registration) {
        registration.showNotification('New Update Available!', {
          body: 'Click here to see the latest changes!',
          icon: '/icon.png'
        });
      });
    }
  });
}

Nauda kuriant PWA

Progresyvios web programos turi daugybę privalumų. Pirma, jos leidžia pasiekti platų vartotojų ratą, nes jos veikia tiek mobiliuosiuose įrenginiuose, tiek stacionariuose kompiuteriuose. Antra, jos pasižymi greitu užkrovimu ir didesniu našumu, nes naudojami Service Workers ir talpyklos mechanizmai. Trečia, PWA užtikrina, kad net ir esant prastam interneto ryšiui, programos veiks be sutrikimų.

Apibendrinimas

Progresyvios web programos su JavaScript yra nuostabi technologija, kuri gali pagerinti vartotojų patirtį ir užtikrinti, kad jūsų aplikacijos būtų greitos, patikimos ir nepriklausomos nuo įrenginio. Naudodami JavaScript, galite pasinaudoti visomis PWA galimybėmis, tokiomis kaip Service Workers, Web App Manifests ir pranešimai. Tai leis jums sukurti itin patrauklias ir funkcionalias programas, kurios pasieks vartotojus visur, bet kada.