Progressiivne täiustamine: JavaScripti funktsioonide tuvastamine ja varulahendused globaalse veebi jaoks

Internet on globaalne platvorm ja veebiarendajatena on meie kohustus luua kogemusi, mis on kõigile juurdepääsetavad ja funktsionaalsed, olenemata nende asukohast, seadmest, brauserist või tehnilistest võimetest. Progressiivne täiustamine koos JavaScripti funktsioonide tuvastamise ja asjakohaste varulahendustega on võimas strateegia selle eesmärgi saavutamiseks.

Mis on progressiivne täiustamine?

Progressiivne täiustamine on veebidisaini strateegia, mis seab esikohale põhisisu ja funktsionaalsuse, tagades, et see on kättesaadav kõigile kasutajatele mis tahes brauseriga. Seejärel lisatakse progressiivselt täiustuste kihte vastavalt kasutaja brauseri võimekusele. Mõelge sellele kui esmalt tugeva vundamendi ehitamisele ja seejärel kaunistuste lisamisele.

Põhiprintsiip on see, et igaühel peaks olema juurdepääs veebisaidi olulisele sisule ja funktsionaalsusele. Kui kasutajal on vanem brauser või ta on JavaScripti keelanud, peaks ta siiski saama saidil navigeerida, teksti lugeda ja põhiülesandeid täita.

Progressiivne täiustamine ei asenda sujuvat taandarengut (graceful degradation). Sujuv taandareng on strateegia, kus esmalt ehitatakse kõige funktsioonirikkam kogemus ja seejärel pakutakse varulahendusi vanematele brauseritele, mis uusimaid funktsioone ei toeta. Sujuva taandarengu fookus on rohkem funktsionaalsusel ja vähem sisul. Seevastu progressiivse täiustamise eesmärk on tagada, et sisu on esmalt olemas.

Miks on progressiivne täiustamine globaalsele publikule oluline?

Mõelge järgmistele teguritele, mis rõhutavad progressiivse täiustamise tähtsust globaalsele publikule:

• Erinev brauseritugi: Erinevates piirkondades on uusimate brauserite kasutuselevõtu tase erinev. Mõned kasutajad võivad kasutada vanemaid brausereid riistvarapiirangute, võrgupiirangute või lihtsalt isiklike eelistuste tõttu.
• Mitmekesised seadmed: Kasutajad kasutavad veebi laias valikus seadmetel, alates tippklassi nutitelefonidest kuni lihtsate nuputelefonideni. Progressiivne täiustamine tagab, et teie veebisait töötab neil kõigil hästi.
• Võrgutingimused: Võrgukiirused ja töökindlus varieeruvad maailmas suuresti. Progressiivne täiustamine võimaldab teie veebisaidil kiiresti laadida ja toimida isegi aeglastel või katkendlikel ühendustel.
• JavaScripti saadavus: Mõned kasutajad võivad JavaScripti turvalisuse kaalutlustel või jõudlusprobleemide tõttu keelata. Progressiivselt täiustatud veebisait peaks olema kasutatav ka ilma JavaScriptita.
• Juurdepääsetavus: Progressiivne täiustamine aitab tagada, et teie veebisait on juurdepääsetav puuetega kasutajatele, kes võivad tugineda abitehnoloogiatele.

JavaScripti funktsioonide tuvastamine

JavaScripti funktsioonide tuvastamine on protsess, mille käigus tehakse kindlaks, kas konkreetne brauser toetab teatud JavaScripti funktsiooni või API-d. See võimaldab teil koodi tingimuslikult käivitada vastavalt brauseri võimekusele.

Vältige brauseri nuuskimist (Browser Sniffing): On ülioluline vältida brauseri nuuskimist, mis tugineb brauseri tuvastamisele selle kasutajaagendi (user agent) stringi alusel. Kasutajaagendi stringe saab kergesti võltsida ja need ei peegelda täpselt brauseri võimekust. Funktsioonide tuvastamine on palju usaldusväärsem lähenemine.

Kuidas funktsioonide tuvastamist rakendada

Siin on mõned levinumad tehnikad JavaScripti funktsioonide tuvastamiseks:

• Operaator `typeof`: Kasutage operaatorit `typeof`, et kontrollida, kas globaalne objekt või omadus on olemas.

            if (typeof window.localStorage !== 'undefined') {
  // localStorage on toetatud
  localStorage.setItem('myKey', 'myValue');
} else {
  // localStorage ei ole toetatud
  console.log('localStorage pole selles brauseris saadaval.');
}

            

              
                Copy
              
            
          

• Objekti omaduste kontrollimine: Kontrollige, kas objektil on konkreetne omadus või meetod.

            if ('geolocation' in navigator) {
  // Geolokatsiooni API on toetatud
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log('Laiuskraad: ' + position.coords.latitude);
    console.log('Pikkuskraad: ' + position.coords.longitude);
  }, function(error) {
    console.error('Viga geolokatsiooni hankimisel:', error);
  });
} else {
  // Geolokatsiooni API ei ole toetatud
  console.log('Geolokatsioon pole selles brauseris saadaval.');
}

            

              
                Copy
              
            
          

• Modernizr'i kasutamine: Modernizr on populaarne JavaScripti teek, mis lihtsustab funktsioonide tuvastamist. See pakub laia valikut teste erinevate brauseri funktsioonide jaoks ja lisab `` elemendile klasse, mis näitavad, millised funktsioonid on toetatud.

            <!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <title>Modernizr'i näide</title>
  <script src="modernizr.js"></script>
</head>
<body>

  <p>See näide kasutab Modernizr'i, et tuvastada, kas brauser toetab WebGL-i.</p>

  <script>
    if (Modernizr.webgl) {
      console.log('WebGL on toetatud!');
      // Initsialiseeri WebGL siin
    } else {
      console.log('WebGL ei ole toetatud.');
      // Paku varulahendus
    }
  </script>

</body>
</html>

            

              
                Copy
              
            
          

Varulahenduste pakkumine

Kui olete tuvastanud, et brauser ei toeta teatud funktsiooni, on oluline pakkuda varulahendus. Varulahendus on alternatiivne rakendus, mis pakub sarnast funktsionaalsust, kasutades teistsuguseid tehnikaid.

Varulahenduste tüübid

• Polüfillid (Polyfills): Polüfill on JavaScripti kood, mis pakub uuema funktsiooni funktsionaalsust vanemates brauserites. Näiteks saate kasutada polüfilli, et pakkuda `fetch` API tuge vanemates brauserites, mis seda loomulikult ei toeta.

            // Näide fetch polüfilli kasutamisest
if (!('fetch' in window)) {
  // Kaasa fetch polüfill
  var script = document.createElement('script');
  script.src = 'fetch.js';
  document.head.appendChild(script);

  script.onload = function() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data));
  };
} else {
  // Kasuta natiivset fetch API-t
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));
}

            

              
                Copy
              
            
          

• Alternatiivne sisu: Kui brauser ei toeta teatud meediaformaati (nt WebP pildid), saate pakkuda alternatiivset formaati (nt JPEG või PNG).

            <picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Minu pilt">
</picture>

            

              
                Copy
              
            
          

• Lihtsustatud funktsionaalsus: Kui funktsiooni ei toetata, saate pakkuda funktsionaalsuse lihtsustatud versiooni. Näiteks, kui brauser ei toeta täiustatud CSS-animatsioone, saate selle asemel kasutada lihtsaid JavaScripti animatsioone.

• Serveripoolne renderdamine: Kui JavaScript on keelatud või ei lae, saab serveripoolne renderdamine tagada, et põhisisu on endiselt juurdepääsetav. See hõlmab HTML-i genereerimist serveris ja selle saatmist brauserile.

Näide: Vormi valideerimine

Kujutage ette vormi, millel on kliendipoolne valideerimine JavaScripti abil. Kui JavaScript on keelatud, peaks valideerimine siiski toimuma serveri poolel.

            <form action="/submit" method="post" id="myForm">
  <label for="email">E-post:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Esita</button>
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', function(event) {
    const emailInput = document.getElementById('email');
    if (!emailInput.checkValidity()) {
      event.preventDefault(); // Takista vormi esitamist
      alert('Palun sisestage kehtiv e-posti aadress.');
    }
  });
</script>

            

              
                Copy
              
            
          

Selles näites valideerib kliendipoolne JavaScript e-posti aadressi enne vormi esitamist. Kui aga JavaScript on keelatud, `checkValidity()` meetodit ei käivitata. Seetõttu peate rakendama ka serveripoolse valideerimise, et tagada e-posti aadressi kehtivus enne vormiandmete töötlemist.

Näide: Interaktiivne kaart

Oletame, et soovite lisada interaktiivse kaardi, kasutades JavaScripti kaarditeeki nagu Leaflet või Google Maps. Kui JavaScript on keelatud, saate varulahendusena pakkuda staatilist pilti kaardist.

            <div id="map">
  <noscript>
    <img src="map-static.png" alt="Asukoha kaart">
  </noscript>
</div>

<script>
  // Initsialiseeri kaart, kui JavaScript on lubatud
  if (document.getElementById('map')) {
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([51.5, -0.09]).addTo(map)
      .bindPopup('Ilus CSS3 hüpikaken.<br> Lihtsalt kohandatav.')
      .openPopup();
  }
</script>

            

              
                Copy
              
            
          

Selles näites sisaldab silt `<noscript>` kaardi staatilist pilti, mida kuvatakse, kui JavaScript on keelatud. Kui JavaScript on lubatud, initsialiseerib skript Leafleti abil interaktiivse kaardi.

Progressiivse täiustamise parimad tavad

• Alusta põhisisust: Keskenduge esmalt olulise sisu ja funktsionaalsuse pakkumisele. Veenduge, et see on juurdepääsetav ilma JavaScriptita.
• Kasutage semantilist HTML-i: Kasutage sisu struktureerimiseks semantilisi HTML-elemente. See muudab teie veebisaidi juurdepääsetavamaks ja lihtsamini hooldatavaks.
• Mittepealetükkiv JavaScript: Hoidke oma JavaScripti kood HTML-struktuurist eraldi. See muudab teie veebisaidi hooldatavamaks ja lihtsamini uuendatavaks.
• Testige erinevates brauserites ja seadmetes: Testige oma veebisaiti põhjalikult erinevates brauserites, seadmetes ja võrgutingimustes, et veenduda selle ootuspärases toimimises. Tööriistad nagu BrowserStack või Sauce Labs võivad aidata brauseritevahelisel testimisel.
• Eelistage juurdepääsetavust: Järgige juurdepääsetavuse juhiseid (nt WCAG), et tagada teie veebisaidi juurdepääsetavus puuetega kasutajatele.
• Jälgige ja korrake: Jälgige pidevalt oma veebisaidi jõudlust ja kasutajakogemust. Kasutage analüütikat, et tuvastada parendusvaldkondi ning korrata oma disaini ja rakendust.
• Sisu ennekõike: Struktureerige sisu nii, et see oleks loetav ka siis, kui CSS ja JavaScript pole laaditud.
• Kasutage CSS-i täiustamiseks: Kasutage CSS-i oma veebisaidi visuaalse ilme progressiivseks täiustamiseks. Näiteks saate kasutada CSS3 funktsioone nagu gradientid, varjud ja üleminekud, et lisada oma disainile visuaalset sära. Kuid veenduge alati, et põhipaigutus ja sisu on ilma nende täiustusteta juurdepääsetavad.

Rahvusvahelistamise (i18n) ja lokaliseerimise (l10n) kaalutlused

Globaalsele publikule veebisaitide loomisel on ülioluline arvestada rahvusvahelistamise (i18n) ja lokaliseerimisega (l10n). Rahvusvahelistamine on teie veebisaidi kujundamise ja arendamise protsess viisil, mis muudab selle hõlpsasti kohandatavaks erinevatele keeltele ja piirkondadele. Lokaliseerimine on teie veebisaidi kohandamise protsess konkreetsele keelele ja piirkonnale.

• Keelevalik: Pakkuge kasutajatele võimalust valida oma eelistatud keel. Seda saab teha navigeerimismenüüs oleva keelelüliti kaudu või tuvastades kasutaja keele automaatselt tema brauseri seadete põhjal.
• Teksti suund: Toetage nii vasakult paremale (LTR) kui ka paremalt vasakule (RTL) teksti suundi. Mõned keeled, näiteks araabia ja heebrea, kirjutatakse paremalt vasakule.
• Kuupäeva ja kellaaja vormindamine: Vormindage kuupäevad ja kellaajad vastavalt kasutaja lokaadile. Erinevates piirkondades on kuupäevade ja kellaaegade vormindamiseks erinevad tavad.
• Valuuta vormindamine: Vormindage valuutad vastavalt kasutaja lokaadile. Erinevates piirkondades on erinevad valuutasümbolid ja vormindamistavad.
• Numbrite vormindamine: Vormindage numbrid vastavalt kasutaja lokaadile. Erinevates piirkondades on numbrite vormindamiseks erinevad tavad, näiteks komade ja punktide kasutamine.
• Tõlkimine: Tõlkige kogu tekstisisu sihtkeeltesse. Kasutage professionaalseid tõlkijaid, et tagada tõlgete täpsus ja kultuuriline sobivus.
• Märgikodeering: Kasutage UTF-8 märgikodeeringut, et toetada laia valikut märke erinevatest keeltest.

Praktilisi näiteid progressiivsest täiustamisest

• Reageerivad pildid: Kasutage elementi `<picture>` ja atribuuti `srcset`, et pakkuda erinevaid pildisuurusi erinevatele ekraanisuurustele. Brauserid, mis neid funktsioone ei toeta, kasutavad varulahendusena elementi `<img>`.
• CSS Grid Layout: Kasutage keerukate paigutuste loomiseks CSS Grid Layout'i. Brauserid, mis ei toeta CSS Grid Layout'i, kasutavad varulahendusena vanemaid paigutustehnikaid nagu floats või flexbox.
• Web Animations API: Kasutage jõudluspõhiste animatsioonide loomiseks Web Animations API-d. Brauserid, mis ei toeta Web Animations API-d, saavad varulahendusena kasutada CSS-üleminekuid või JavaScripti animatsioone.

Kokkuvõte

Progressiivne täiustamine on väärtuslik strateegia kaasavate ja juurdepääsetavate veebikogemuste loomiseks globaalsele publikule. Seades esikohale põhisisu ja funktsionaalsuse, kasutades JavaScripti funktsioonide tuvastamist ja pakkudes asjakohaseid varulahendusi, saate tagada, et teie veebisait töötab hästi kõigi jaoks, olenemata nende asukohast, seadmest, brauserist või tehnilistest võimetest. Progressiivse täiustamise omaksvõtmine mitte ainult ei paranda juurdepääsetavust, vaid aitab kaasa ka tugevama ja vastupidavama veebi loomisele kõigi jaoks.

Ärge unustage oma veebisaiti põhjalikult testida erinevates brauserites ja seadmetes ning pidevalt jälgida selle jõudlust ja kasutajakogemust. Neid parimaid tavasid järgides saate luua veebisaidi, mis on tõeliselt juurdepääsetav ja nauditav kasutajatele üle kogu maailma.