2
view-button 108
İstənilən saytı PWA tətbiqinə çevirmək

Yazı haqqında xəbər ver

Əgər yazıda qeyri etik və ya təhqir xarakerli sözlər varsa bizə xəbər verməyiniz rica olunur.

İstənilən saytı PWA tətbiqinə çevirmək

elvinhuseynov

Müasir veb texnologiyası bizə imkan verirki istənilən veb saytı krosplatform proqrama çevirək. Buna nail olmaq üçün isə möhtəşəm PWA texnologiyasını layihənizə qoşmaq kifayətdir.

Saytınızda PWA texnologiyasını aktivləşdirmək üçün 3 fayl kifayətdir:

  1. manifest.json
  2. pwa.js
  3. sw.js

1. Manifest.json

İlk öncə manifest.json adlı faylımızı yaradırıq və kod redaktorunda aşağıdakı kodu kopyalıyıb yapışdırırq:

{
  "short_name": "CODEX",
  "name": "Codex Layihəsi",
  "description": "Proqramçılar üçün məlumat resursu",
  "icons": [
    {
      "src": "images/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "images/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

Sonra faylı vebsaytın <header> hissəsində manifest.json faylına gedən yolu göstərməklə qoşuruq:

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

QEYD: Json məlumatlarını öz layihəniz üçün dəyişin və mütləq icon fayllarını manifest.json faylının yanında bir images adlı qovluq yaradaraq ora kopyalayın.

2. PWA.js

Sonra ikinci faylımız olan pwa.js bağlanan <body> taqından öncə yerləşdiririk:

<script src="/assets/pwa/pwa.js"></script>
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    // Stash the event so it can be triggered later.
    deferredPrompt = e;
    const btnAdd = document.getElementById('save-as-app')
    btnAdd.style.display = 'block';

    if(btnAdd){
        btnAdd.addEventListener('click', (e) => {
            // e.preventDefault()
            // hide our user interface that shows our A2HS button
            btnAdd.style.display = 'none';
            console.log('before prompt')
            // Show the prompt
            deferredPrompt.prompt()
            .then(res => console.log(res))
            .catch(error => { console.log(`----> ${error}`) })

            // Wait for the user to respond to the prompt
            deferredPrompt.userChoice
            .then((choiceResult) => {
              if (choiceResult.outcome === 'accepted') {
                console.log('User accepted the A2HS prompt');
              } else {
                console.log('User dismissed the A2HS prompt');
              }
              deferredPrompt = null;
            });
        });
    }
});

3. Service Worker sw.js

Və nəhayət service workerimizi qoşuruq. Bu faylı mütləq saytın root qovluğuna index.php faylın yanında yerləşdirin. Adını sw.js kimi təyin etdikdən sonra daxilinə aşağıdakı kodu yapışdırın:

self.addEventListener('install', function(event) {
    console.log('installed sw')
});

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

Sözügedən service workerimizi işə salmaq üçün pwa.js faylın önündə aşağıdakı kodu kopyalayın:

<script>
    if('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/sw.js')
                 .then(function() { console.log("Service worker registered"); });
     }
 </script>

Elvin Huseynov

CodeX layihəsinin təsisçisi. PM

Rəylər

0 comments
Rəy yazan olmayıb
Rəy yazmaq üçün lütfən sayta Telegram hesabınızla daxil olun