How to start PWA

PWA is a progressive web application. Why you need it can be found on Wikipedia. There will also be a brief description of how to install on your site.

Make PWA in 5 minutes using the instructions from the site pwabuilder.com. A brief, typical, and operational configuration will be given later on this page.

We include the manifest file

Add the manifest file to the root of the site and connect it:

Manifest file contents:

{
“name”: “Name”,
“short_name”: “Short name”,
“description”: “Description”,
“start_url”: “https://ploshadka.net/”,
“display”: “standalone”,
“orientation”: “natural”,
“lang”: “Russian”,
“background_color”: “# f7f7f7”,
“theme_color”: “# f7f7f7”,
“icons”:[[
{
“src”: “/wp-content/img/logo-512×512.png”,
“sizes”: “512×512”,
“type”: “image / png”
}
]
}

Add the following code to the header:

Create a Service Worker

Create a file pwabuilder-sw.js and put in the root of the site:

The contents of this file are:

// 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);
});
}

At this PWA is ready. Further customization of service workers requires more detail and it is different for each site.