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 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”: “”,
“display”: “standalone”,
“orientation”: “natural”,
“lang”: “Russian”,
“background_color”: “# f7f7f7”,
“theme_color”: “# f7f7f7”,
“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 ( (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 (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 (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.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *