h Progressive Web App - Onekit Documentation
Skip to main content

Progressive Web App

A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript.

Installation

In default, we not activate PWA in default template, because you must editing App data before use it. Don't activate pwa if you haven't really finished your web design. An active pwa will cache the website and you cannot edit anything including html and css if the service worker is active.

1. Add following code in <head>

            
            <!-- PWA Optimize -->
            <link rel="manifest" href="dist/js/pwa/manifest.json">
            <link rel="canonical" href="https://onekit.madethemes.com">
            <meta name="theme-color" content="#5b2be0">
            <link rel="apple-touch-icon" href="dist/img-min/logo/apple-icon.png">

2. And script before </body>

            
            <!-- PWA Optimize -->
            <script>
            if('serviceWorker' in navigator) {
              navigator.serviceWorker
              .register('/sw.js');
            }
            </script>

Complete template in this page


Manifest


Open file manifest in src/js/pwa/manifest.json and edit following code:

            
            {
              "name": "Onekit Bootstrap Template",
              "description": "Onekit is Bootstrap landing page template with flat design and fast loading.",
              "short_name": "Onekit",
              "theme_color": "#5b2be0",
              "background_color": "#ffffff",
              "start_url": "../../../",
              "display": "standalone",
              "orientation": "portrait",

Just change name Onekit Bootstrap Template, description Onekit is Bootstrap landing page template with flat design and fast loading., short name Onekit and theme color #5b2be0

Change data with your Web informations, and run gulp js.

Service Worker


Open file service worker /sw.js and edit following code:

            
            self.addEventListener('install', function(e) {
             e.waitUntil(
               caches.open('onekit').then(function(cache) {
                 return cache.addAll([
                   '/',
                   '/dist/css/bundle.min.css',
                   '/dist/js/bundle.min.js'
                 ]);
               })
             );
            });

            self.addEventListener('fetch', function(event) {
             event.respondWith(
               caches.match(event.request).then(function(response) {
                 return response || fetch(event.request);
               })
             );
            });

Change service worker with your own settings

Generate Icon


Generate favicon in multi size for Manifest App Icon.

Recomended images for generator favicon is 512x512

1. Open Favicon generator and upload your favicon logo and click to generate your multi favicon.

2. Copy and paste favicon images to src/img/logo/, don't forget to change name with number example 192x192. Manifest need following size:

            
            "icons": [
              {
               "src": "../../img-min/logo/36x36.png",
               "sizes": "36x36",
               "type": "image/png"
              },
              {
               "src": "../../img-min/logo/48x48.png",
               "sizes": "48x48",
               "type": "image/png"
              },
              {
               "src": "../../img-min/logo/72x72.png",
               "sizes": "72x72",
               "type": "image/png"
              },
              {
               "src": "../../img-min/logo/96x96.png",
               "sizes": "96x96",
               "type": "image/png"
              },
              {
               "src": "../../img-min/logo/144x144.png",
               "sizes": "144x144",
               "type": "image/png"
              },
              {
               "src": "../../img-min/logo/192x192.png",
               "sizes": "192x192",
               "type": "image/png"
              },
              {
               "src": "../../img-min/logo/512x512.png",
               "sizes": "512x512",
               "type": "image/png"
              }
             ]
            }

After rename and add favicon to src/img/logo/, open your terminal and run gulp images all icon will compressed to webp images.

Test PWA


To test progressive web app, you can use the lighthouse tool Download Lighthouse

If your pwa is working, you will get following report

pwa validate