Как запустить PWA

Admin Support

PWA — это прогрессивное веб-приложение. Зачем оно нужно можно узнать из Википедии. Здесь же будет краткое описание, как установить себе на сайт.

Сделать PWA за 5 минут можно руководствуясь инструкцией с сайта pwabuilder.com. Краткая, типовая и рабочая конфигурация будет приведена на этой странице далее.

Подключаем файл manifest

Добавляем в корень сайта файл с манифестом и подключаем его:

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

Содержимое файла манифест:

{
  "name" : "Название",
  "short_name" : "Краткое название",
  "description" : "Описание",
  "start_url" : "https://ploshadka.net/",
  "display" : "standalone",
  "orientation" : "natural",
  "lang" : "Russian",
  "background_color": "#f7f7f7",
  "theme_color": "#f7f7f7",
  "icons": [
    {
      "src": "/wp-content/img/logo-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Добавляем в хедер следующий код:

<script>
// This is the service worker with the combined offline experience (Offline page + Offline copy of pages)

// Add this below content to your HTML page, or add the js file to your page at the very top to register service worker

// Check compatibility for the browser we're running this in
if ("serviceWorker" in navigator) {
    if (navigator.serviceWorker.controller) {
        // console.log("[PWA Builder] active service worker found, no need to register");
    } else {
        // Register the service worker
        navigator.serviceWorker
            .register("pwabuilder-sw1.js", {
                scope: "./"
            })
            .then(function (reg) {
                // console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
            });
    }
}
</script>

Создаем сервис-воркер (Service Workers)

Создаем файл pwabuilder-sw.js и кладем в корень сайта:

Содержимое этого файла:

// This is the service worker with the combined offline experience (Offline page + Offline copy of pages)

const CACHE = "pwabuilder-offline-page";

// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
// const offlineFallbackPage = "ToDo-replace-this-name.html";
const offlineFallbackPage = "/";

// Install stage sets up the offline page in the cache and opens a new cache
self.addEventListener("install", function (event) {
    // console.log("[PWA Builder] Install Event processing");

    event.waitUntil(
        caches.open(CACHE).then(function (cache) {
            // console.log("[PWA Builder] Cached offline page during install");

            if (offlineFallbackPage === "ToDo-replace-this-name.html") {
                return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));
            }

            return cache.add(offlineFallbackPage);
        })
    );
});

// If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener("fetch", function (event) {
    if (event.request.method !== "GET") return;

    event.respondWith(
        fetch(event.request)
            .then(function (response) {
                // console.log("[PWA Builder] add page to offline cache: " + response.url);

                // If request was success, add or update it in the cache
                event.waitUntil(updateCache(event.request, response.clone()));

                return response;
            })
            .catch(function (error) {
                // console.log("[PWA Builder] Network request Failed. Serving content from cache: " + error);
                return fromCache(event.request);
            })
    );
});

function fromCache(request) {
    // Check to see if you have it in the cache
    // Return response
    // If not in the cache, then return the offline page
    return caches.open(CACHE).then(function (cache) {
        return cache.match(request).then(function (matching) {
            if (!matching || matching.status === 404) {
                // The following validates that the request was for a navigation to a new document
                if (request.destination !== "document" || request.mode !== "navigate") {
                    return Promise.reject("no-match");
                }

                return cache.match(offlineFallbackPage);
            }

            return matching;
        });
    });
}

function updateCache(request, response) {
    return caches.open(CACHE).then(function (cache) {
        return cache.put(request, response);
    });
}

На этом PWA готов. Дальнейшая кастомизация сервис-воркеров требует уже большей детальности и для каждого сайта она своя.

Метки:

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Как запустить PWA"