Как запустить 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"