• Login
  • Register
en
afsqam ar hy az eu be bn bs bg ca ceb ny zh-CN zh-TWco hr cs da nl en eo et tl fi fr fy gl ka de el gu ht ha haw iw hi hmn hu is ig id ga it ja jw kn kk km ko ku ky lo la lv lt lb mk mg ms ml mt mi mr mn my ne no ps fa pl pt pa ro ru sm gd sr st sn sd si sk sl so es su sw sv tg ta te th tr uk ur uz vi cy xh yi yo zu
Victor Mochere
No Result
View All Result
  • Business
  • Finance
    Top 10 oldest currencies in the world

    Top 10 oldest currencies in the world 2023

    Top 20 largest endowment funds in the world

    Top 20 largest endowment funds in the world 2023

    Criteria banks use to issue business loans

    Criteria banks use to issue business loans

    Top 20 largest bond markets in the world

    Top 20 largest bond markets in the world 2023

    Top 10 cities with the most millionaires in Africa

    Top 10 cities with the most millionaires in Africa 2023

    Top 10 countries with the most millionaires in Africa

    Top 10 countries with the most millionaires in Africa 2023

    How to become a millionaire

    How to become a millionaire

    How to simplify your finances using technology

    How to simplify your finances using technology

    Top 10 best personal finance apps

    Top 10 best personal finance apps 2023

    Guide to altcoins for beginners

    Guide to altcoins for beginners

    Things to consider when choosing a forex broker

    Things to consider when choosing a forex broker

    Top 20 cities with the most millionaires in the world

    Top 20 cities with the most millionaires in the world 2023

    Top 10 richest YouTubers in the world

    Top 10 richest YouTubers in the world 2023

    MrBeast Net Worth

    MrBeast Net Worth 2023

    Top 10 fastest growing economies in Africa

    Top 10 fastest growing economies in Africa 2023

    Top 10 richest real estate billionaires in the world

    Top 10 richest real estate billionaires in the world 2023

    Top 10 richest media billionaires in the world

    Top 10 richest media billionaires in the world 2023

    Sundar Pichai Net Worth

    Sundar Pichai Net Worth 2023

    Top 10 richest retail billionaires in the world

    Top 10 richest retail billionaires in the world 2023

    Rishi Sunak Net Worth

    Rishi Sunak Net Worth 2023

  • Education
    E-learning tools that address learning challenges

    E-learning tools that address learning challenges

    Top 10 best success books

    Top 10 best success books 2023

    Types of insurance to consider for college students

    Types of insurance to consider for college students

    Best self-guided tech courses

    Best self-guided tech courses 2023

    How to check for plagiarism

    How to check for plagiarism

    Benefits of poetry

    Benefits of poetry

    How to introduce education to your child with ADHD

    How to introduce education to your child with ADHD

    Reasons to practice creative writing

    Reasons to practice creative writing

    How to write a good essay for TOEFL

    How to write a good essay for TOEFL

    How learning leads to healthy living

    How learning leads to healthy living

    Top 10 best data science books

    Top 10 best data science books 2023

    Best quotes from PLO Lumumba

    Best quotes from PLO Lumumba

    Best quotes from Amin Maalouf

    Best quotes from Amin Maalouf

    How to write a good thesis

    How to write a good thesis

    Best quotes from Michael Faraday

    Best quotes from Michael Faraday

    Top 20 greatest minds of all time

    Top 20 greatest minds of all time

    Best quotes from Voltaire

    Best quotes from Voltaire

    Best quotes from Chinua Achebe

    Best quotes from Chinua Achebe

    How language skills increase your net worth

    How language skills increase your net worth

    How to get free textbooks

    How to get free textbooks

  • Travel
  • Technology
    How to tell if your phone is SIM locked

    How to tell if your phone is SIM locked

    Things to consider when buying a laptop

    Things to consider when buying a laptop

    How to improve your smartphone battery life

    How to improve your smartphone battery life

    How to create a successful social media strategy

    How to create a successful social media strategy

    How to stay relevant on social media

    How to stay relevant on social media

    How to make money with AI

    How to make money with AI

    How to make money with ChatGPT

    How to make money with ChatGPT

    Common SEO mistakes

    Common SEO mistakes

    How to optimize your WordPress website

    How to optimize your WordPress website

    Top 10 best nursing apps

    Top 10 best nursing apps 2023

    Benefits of digital PR

    Benefits of digital PR

    Facets of digital marketing

    Facets of digital marketing

    Digital marketing strategies for beginners

    Digital marketing strategies for beginners

    How to check supported sleep states on Windows

    How to check supported sleep states on Windows

    How to make your Windows PC boot quicker

    How to make your Windows PC boot quicker

    Guide to Python OCR for beginners

    Guide to Python OCR for beginners

    Different types of internet connections

    Different types of internet connections

    History and evolution of DAOs

    History and evolution of DAOs

    How to secure your online accounts

    How to secure your online accounts

    Future of content writing with AI technology

    Future of content writing with AI technology

  • Living
    Top 20 fastest fighter jets in the world

    Top 20 fastest fighter jets in the world 2023

    Top 20 most densely populated countries in the world

    Top 20 most densely populated countries in the world 2023

    Top 20 most racially diverse countries in the world

    Top 20 most racially diverse countries in the world 2023

    Top 20 most LGBTQ-friendly countries in the world

    Top 20 most LGBTQ-friendly countries in the world 2023

    Top 10 largest uranium reserves in the world

    Top 10 largest uranium reserves in the world 2023

    Top 10 largest uranium mines in the world

    Top 10 largest uranium mines in the world 2023

    How to prevent electronics from blowing up

    How to prevent electronics from blowing up

    How to increase your Fuliza limit

    How to increase your Fuliza limit

    Understanding the eagle mentality

    Understanding the eagle mentality

    Understanding the lion mentality

    Understanding the lion mentality

    How to boost your self-confidence

    How to boost your self-confidence

    Top 10 saddest countries in Africa

    Top 10 saddest countries in Africa 2023

    Top 20 saddest countries in the world

    Top 20 saddest countries in the world 2023

    Top 10 happiest countries in Africa

    Top 10 happiest countries in Africa 2023

    Top 20 happiest countries in the world

    Top 20 happiest countries in the world 2023

    Things to consider when buying an equestrian estate

    Things to consider when buying an equestrian estate

    Things to consider when choosing a dog groomer

    Things to consider when choosing a dog groomer

    Top 10 greatest engineers of all time

    Top 10 greatest engineers of all time

    Types of women that can ruin your marriage

    Types of women that can ruin your marriage

    7 C's of success

    7 C’s of success

  • Entertainment
    Top 20 best-selling video games of all time

    Top 20 best-selling video games of all time

    Top 20 most complex movies of all time

    Top 20 most complex movies of all time

    Best quotes from Whitney Houston

    Best quotes from Whitney Houston

    Top 10 most rewatchable movies

    Top 10 most rewatchable movies 2023

    Best quotes from Denzel Washington

    Best quotes from Denzel Washington

    Snack ideas for an online gaming night

    Snack ideas for an online gaming night

    Best quotes from Frank Sinatra

    Best quotes from Frank Sinatra

    Roku vs Amazon Fire Stick: Which is better?

    Roku vs Amazon Fire Stick: Which is better?

    Top 20 highest paid entertainers in the world

    Top 20 highest paid entertainers in the world 2023

    Best quotes from Shonda Rhimes

    Best quotes from Shonda Rhimes

    Best poker tips for beginners

    Best poker tips for beginners

    Top 10 best budget wireless headphones

    Top 10 best budget wireless headphones 2023

    Best quotes from Betty White

    Best quotes from Betty White

    History of the slot machine

    History of the slot machine

    The art of gambling

    The art of gambling

    Free internet TV channels you can watch online

    Free internet TV channels you can watch online

    Top 10 most Grammy Awards nominees of all time

    Top 10 most Grammy Awards nominees of all time

    Top 10 most Grammy Awards winners of all time

    Top 10 most Grammy Awards winners of all time

    Why casino whales prefer to play online baccarat

    Why casino whales prefer to play online baccarat

    Benefits of using an online video editor for your vlog

    Benefits of using an online video editor for your vlog

  • Governance
    Members of Parliament in Kenya

    Members of Parliament in Kenya 2023

    Principal Secretaries in Kenya

    Principal Secretaries in Kenya 2023

    Cabinet Secretaries in Kenya

    Cabinet Secretaries in Kenya 2023

    Top 10 ruthless African warlords of all time

    Top 10 ruthless African warlords of all time

    Best quotes from Kwame Nkrumah

    Best quotes from Kwame Nkrumah

    What you need to know about IEBC forms

    What you need to know about IEBC forms

    Top 20 largest empires of all time

    Top 20 largest empires of all time

    Diplomatic number plates in Kenya

    Diplomatic number plates in Kenya

    Best quotes from Marcus Aurelius

    Best quotes from Marcus Aurelius

    Best quotes from Vladimir Lenin

    Best quotes from Vladimir Lenin

    Best quotes from John Magufuli

    Best quotes from John Magufuli

    Best quotes from Volodymyr Zelenskyy

    Best quotes from Volodymyr Zelenskyy

    Best quotes from Vladimir Putin

    Best quotes from Vladimir Putin

    Best quotes from Angela Merkel

    Best quotes from Angela Merkel

    Top 20 countries with the most debt in the world

    Top 20 countries with the most debt in the world 2023

    Top 10 least indebted countries in Africa

    Top 10 least indebted countries in Africa 2023

    Top 10 most indebted countries in Africa

    Top 10 most indebted countries in Africa 2023

    Top 20 least indebted countries in the world

    Top 20 least indebted countries in the world 2023

    Top 20 most indebted countries in the world

    Top 20 most indebted countries in the world 2023

    Monarchs of Britain

    Monarchs of Britain

  • Sports
    Best quotes from Pelé

    Best quotes from Pelé

    How to bet on the NFL

    How to bet on the NFL

    How to bet on the Breeders' Cup

    How to bet on the Breeders’ Cup

    Types of swimming styles and strokes

    Types of swimming styles and strokes

    Benefits of swimming

    Benefits of swimming

    Safety rules every swimmer should follow

    Safety rules every swimmer should follow

    Must-have equipment for softball coaches

    Must-have equipment for softball coaches

    How to take advantage of changing odds

    How to take advantage of changing odds

    Guide to baseball betting

    Guide to baseball betting

    Top 10 most watched sporting events of all time

    Top 10 most watched sporting events of all time

    Top 10 highest paid NFL players

    Top 10 highest paid NFL players 2023

    Top 10 richest sports leagues in the world

    Top 10 richest sports leagues in the world 2023

    Top 10 most popular sports in the world

    Top 10 most popular sports in the world 2023

    Top 10 highest paid NHL players in the world

    Top 10 highest paid NHL players in the world 2023

    Top 10 football players with the most free kick goals

    Top 10 football players with the most free kick goals 2023

    Slam Dunk: How to become an NBA betting pro

    Slam Dunk: How to become an NBA betting pro

    History of badminton in the Olympic Games

    History of badminton in the Olympic Games

    Top 10 most lucrative football shirt sponsorships

    Top 10 most lucrative football shirt sponsorships 2023

    Top 10 countries with the least Olympic medals in Africa

    Top 10 countries with the least Olympic medals in Africa 2023

    Top 20 countries with the least Olympic medals in the world

    Top 20 countries with the least Olympic medals in the world 2023

en
afsqam ar hy az eu be bn bs bg ca ceb ny zh-CN zh-TWco hr cs da nl en eo et tl fi fr fy gl ka de el gu ht ha haw iw hi hmn hu is ig id ga it ja jw kn kk km ko ku ky lo la lv lt lb mk mg ms ml mt mi mr mn my ne no ps fa pl pt pa ro ru sm gd sr st sn sd si sk sl so es su sw sv tg ta te th tr uk ur uz vi cy xh yi yo zu
Victor Mochere
No Result
View All Result
en
afsqam ar hy az eu be bn bs bg ca ceb ny zh-CN zh-TWco hr cs da nl en eo et tl fi fr fy gl ka de el gu ht ha haw iw hi hmn hu is ig id ga it ja jw kn kk km ko ku ky lo la lv lt lb mk mg ms ml mt mi mr mn my ne no ps fa pl pt pa ro ru sm gd sr st sn sd si sk sl so es su sw sv tg ta te th tr uk ur uz vi cy xh yi yo zu
Victor Mochere
No Result
View All Result
Home Technology

How to convert your website into a PWA

Victor Mochere by Victor Mochere
November 17, 2022
in Technology
Reading Time: 5 mins read
A A
0
How to convert your website into a PWA

A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices. Since a progressive web app is a type of webpage or website known as a web application, they do not require separate bundling or distribution. There is no requirement for developers or users to install the web apps via digital distribution systems.

Here are the steps for converting your website into a PWA.

1. Manifest registration

Before installing the PWA, the browser should check if the manifest file already exists. You can use either of these ways to register a service worker.

a. Plugin

Install a ‘script’ plugin and add this code.

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

b. Theme file editor

Before using this method, ensure that you maintain a complete documentation and backup of your WordPress website.

  1. Navigate to WP Admin > Appearance > Theme File Editor
  2. Select functions.php
  3. Insert the following code at the last line in the functions.php
				
					//manifest file
add_action( 'wp_head', 'inc_manifest_link' );

// Creates the link tag
function inc_manifest_link() {   
        echo '<link rel="manifest" href="/manifest.json">';
}
				
			

2. Manifest file

The web app manifest is a W3C specification defining a JSON-based manifest (usually labelled manifest.json) to provide developers a centralized place to put metadata associated with a web application including:

  • The name of the web application
  • Links to the web app icons or image objects
  • The preferred URL to launch or open the web app
  • The web app configuration data
  • Default orientation of the web app
  • The option to set the display mode, e.g. full screen

This metadata is crucial for an app to be added to a home screen or otherwise listed alongside native apps. Create a new file called manifest.json in the root of your site. The file should entail the following.

				
					{
   "name": can be used by app stores or browsers on startup screens      and prompts.
   "short-name": used to display the name to the user within the icon. For example: in the homescreen.
   "description": provides additional context about the app.
   "dir": Direction of the text. 
          Values: ltr(left to right),
                  rtl (right to left),
                  auto
   "lang": Language of the text. 
           Example: en (English)
   "icons": Array of icons that the browser can choose from, including size and type.
           [{
             "src": source,
             "sizes": i.e. "192x192",
             "type": i.e. "image/png",
             "purpose": the purpose of the image in the context of the host OS.
                       Values: badge, maskable, any
            }]
    "display": Preferred display mode for the website.
               Values: fullscreen,
                       standalone,
                       minimal-ui,
                       browser.
    "scope": it represents the set of urls that can be viewed through the installable web context, if the user navigates outside this scope, those pages will be opened in a standard browser.
             Example:"https://example.com/", "/app/"
    "orientation": you can enforce the orientation of your app, it can be ommited.
                   Example: natural (default).
    "background_color": tells the browser what color to use on the startup splash screen that users will see when they launch your app.
                        Example: "#456BD9"
    "theme_color": is used by some browsers to tint the status bar, address bar, and other parts of the browser user interface.
    "start_url": indicates what page should launch when someone opens your progressive web app.
    "categories": This is intended to be used by app stores to categorize your app.
                  Example: ["business", "technology", "web"]
}
				
			

3. Service worker registration

Each service worker must be registered in the client’s browser. Service workers go through a three-step lifecycle of registration, installation and activation. Registration involves telling the browser the location of the service worker in preparation for installation. As with any other JavaScript, you load the service-worker.js script in your HTML. Once running, it will open its own instance, so there will be no access to distributed object model elements.

You can use either of these ways to register a service worker.

a. Plugin

Install a ‘script’ plugin and add this code.

				
					<script src='/service-worker-register.js'></script>
				
			

b. Theme file editor

Before using this method, ensure that you maintain a complete documentation and backup of your WordPress website.

  1. Navigate to WP Admin > Appearance > Theme File Editor
  2. Select functions.php
  3. Insert the following code at the last line in the functions.php
				
					//service worker registration
function register_my_service_worker () {
  echo "<script>navigator.serviceWorker.register('/service-worker.js')</script>";
}
add_action ( 'wp_head', 'register_my_service_worker' );
				
			

c. index.xml

Add the following code to your index.xml file.

				
					if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js', {
        scope: './'
    }).then(function (registration) {
        var serviceWorker;
        if (registration.installing) {
            serviceWorker = registration.installing;
            document.querySelector('#kind').textContent = 'installing';
        } else if (registration.waiting) {
            serviceWorker = registration.waiting;
            document.querySelector('#kind').textContent = 'waiting';
        } else if (registration.active) {
            serviceWorker = registration.active;
            document.querySelector('#kind').textContent = 'active';
        }
        if (serviceWorker) {
            // logState(serviceWorker.state);
            serviceWorker.addEventListener('statechange', function (e) {
                // logState(e.target.state);
            });
        }
    }).catch (function (error) {
        // Something went wrong during registration. The service-worker.js file
        // might be unavailable or contain a syntax error.
    });
} else {
    // The current browser doesn't support service workers.
    // Perhaps it is too old or we are not in a Secure Context.
}
				
			

4. Service worker file

A service worker is a web worker that implements a programmable network proxy that can respond to web/HTTP requests of the main document. It is able to check the availability of a remote server and to cache content when that server is available, and serve that content later to the document. Service workers go through a three-step lifecycle of registration, installation and activation. After registration, installation and activation cycles follow.

Installation occurs when there is no service worker installed in the browser for the webapp, or if there is an update to the service worker. Activation occurs when all of the PWAs pages are closed, so that there is no conflict between the previous version and the updated one. The lifecycle also helps maintain consistency when switching among versions of service worker since only a single service worker can be active for a domain.

Create a new file called “service-worker.js” in the root of your site and add the code below. 

				
					var CACHE_NAME = 'cache-v1';
var urlsToCache = [
  '/'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

self.addEventListener('activate', function(event) {
  var cacheWhitelist = ['cache-v1'];
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});
				
			
Tags: Website
Previous Post

Top 10 largest stock exchanges in Africa 2023

Next Post

Top 20 most followed influencers on social media 2023

Victor Mochere

Victor Mochere

Victor Mochere is a blogger, social media influencer, and netpreneur creating and marketing digital content.

Next Post
Top 20 most followed influencers on social media

Top 20 most followed influencers on social media 2023

Leave a Reply Cancel reply

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

Trending Posts

  • Top 20 richest singers in the world

    Top 20 richest singers in the world 2023

    0 shares
    Share 0 Tweet 0
  • How to activate Microsoft Office on Mac for free

    1 shares
    Share 0 Tweet 0
  • Top 10 best gay dating apps 2023

    4 shares
    Share 0 Tweet 0
  • Top 20 richest football players in the world 2023

    0 shares
    Share 0 Tweet 0
  • Top 10 most protected people in the world 2023

    6 shares
    Share 0 Tweet 0

Find us on

Newspaper Flipboard

Download our app

Google-play Microsoft Amazon Shopping-bag

Newsletter

Follow us

Facebook-f Twitter Instagram Pinterest Linkedin Youtube Tiktok Snapchat-ghost Telegram Rss
Victor Mochere

Victor Mochere is one of the biggest informational blogs on the web. We publish well curated up-to-date facts and important updates from around the world.

Recent posts

  • Top 20 fastest fighter jets in the world 2023
  • Top 20 most densely populated countries in the world 2023
  • Top 20 most racially diverse countries in the world 2023
  • Top 20 most LGBTQ-friendly countries in the world 2023
  • Top 10 cheapest banks in Kenya 2023

Sections

  • Business
  • Education
  • Entertainment
  • Finance
  • Flacked
  • Governance
  • Living
  • Sports
  • Technology
  • Travel

Download our app

Google-play Microsoft Amazon Shopping-bag

Find us on

Newspaper Flipboard
  • Advertise
  • Disclaimer
  • Cookies
  • Privacy Policy
  • Copyright
  • DMCA
  • Write For Us
  • Send us a topic
  • Contact

© 2023 Victor Mochere. All rights are reserved.

en
afsqam ar hy az eu be bn bs bg ca ceb ny zh-CN zh-TWco hr cs da nl en eo et tl fi fr fy gl ka de el gu ht ha haw iw hi hmn hu is ig id ga it ja jw kn kk km ko ku ky lo la lv lt lb mk mg ms ml mt mi mr mn my ne no ps fa pl pt pa ro ru sm gd sr st sn sd si sk sl so es su sw sv tg ta te th tr uk ur uz vi cy xh yi yo zu
  • Login
  • Sign Up
No Result
View All Result
  • Sections
    • Finance
    • Education
    • Technology
    • Living
    • Entertainment
    • Governance
    • Sports
  • About
  • Victor Mochere
  • Donate
  • Sitemap
  • Crossword
  • Social Media Policy
  • Corrections Policy
  • Comment Policy

© 2023 Victor Mochere. All rights are reserved.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In