Getting started

Using PWA Fire Bundle

Download PWA Fire Bundle

Download PWA Fire and from pwafire_bundle folder, upload the sw.js and manifest.json files to the ROOT folder of your project or website. Be sure to edit the sw.js and manifest.json file as in the guide provided below to fit your web app needs.

N/B: Make sure to make the configuration changes as documented.

Code to register the service worker

This is the first step to making your web app work offline. Copy and paste this code to your index file, eg just before the end of the body tag or in the head tag in html5

N/B : YOU NEED HTTPS : You can only register service workers on Websites, Web Apps or Pages served over HTTPS.

This code checks to see if the service worker API is available, and if it is, the service worker at /sw.js is registered once the page is loaded.
First, we need to check if the browser supports service workers, and if it does, register the service worker.

    <!-- register service worker -->
        <script>

          if ('serviceWorker' in navigator) 
          {
          window.addEventListener('load', function() {
            navigator.serviceWorker.register('/sw.js')
            .then(function() { console.log("Service Worker Registered"); });
          }
          );
        }  
        </script> 
    <!-- end of service worker -->

Using the web manifest

Add a link tag to all the pages that encompass your web app, as follows;


      <!-- start of web manifest -->
      <link rel="manifest" href="/manifest.json">
      <!-- end of web manifest -->

Service Worker // sw.js config

NOTE : Rich offline experiences, periodic background syncs, push notifications—functionality that would normally require a native application - are now being built on web. Service workers provide the technical base to which all these features rely on.

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.
Follow the steps as commented in the code below in order to correctly configure the sw.js file.


      // after a service worker is installed and the user navigates to a different page or refreshes,the service worker will begin to receive fetch events
          
          self.addEventListener('fetch', function(event) {
            event.respondWith(caches.open('cache').then(function(cache) {
              return cache.match(event.request).then(function(response) {
                console.log("cache request: " + event.request.url);
                  var fetchPromise = fetch(event.request).then(function(networkResponse) {           
      // if we got a response from the cache, update the cache                   
                    console.log("fetch completed: " + event.request.url, networkResponse);
                      if (networkResponse) {
                        console.debug("updated cached page: " + event.request.url, networkResponse);
                          cache.put(event.request, networkResponse.clone());}
                          return networkResponse;
                          }, function (e) {   
      // rejected promise - just ignore it, we're offline!   
                          console.log("Error in fetch()", e);
                          e.waitUntil(
                          caches.open('cache').then(function(cache) { // our cache here is named *cache* in the caches.open()
                          return cache.addAll
                          ([            
      //cache.addAll(), takes a list of URLs, then fetches them from the server and adds the response to the cache.           
      // add your entire site to the cache- as in the code below; for offline access
      // If you have some build process for your site, perhaps that could generate the list of possible URLs that a user might load.               
                          '/', // do not remove this
                          '/index.html', //default
                          '/index.html?homescreen=1', //default
                          '/?homescreen=1', //default
                          '/assets/css/main.css',// configure as by your site ; just an example
      // Do not replace/delete/edit the sw.js/ and manifest.js paths below
                          '/sw.js/',
                          '/manifest.js',
      //These are links to the extenal social media buttons that should be cached; we have used twitter's as an example
                          'https://platform.twitter.com/widgets.js',       
                          ]);
                          })
                          );
                          });
      // respond from the cache, or the network
                          return response || fetchPromise;
                      });
                      }));
                      });
    

Web Manifest // manifest.json config

Configure/edit the background and theme colors, display type, the Web App short name, the Web App name, icons size (keep icon sizes as specified below) and your icon/logo paths. Also state the img type eg image/ico or image/png.

Leave the start url as recomended though this can be anything you want; the value we’re using has the advantage of being meaningful to Google Analytics.

Configuring the manifest.json file helps you to specify how you want your web app to look like when launched on the device.
Configure the manfest.json file as directed above in order to fit your web app needs.

              {
              "background_color": "#fff",
              "display": "standalone",
              "orientation":"portrait",
              "theme_color": "#fff",           
              "short_name": "PWA Fire",
              "name": "PWA Fire",
              "icons": [
              {
              "src": "images/pwafire48.png",
              "type": "image/png",
              "sizes": "48x48"
              },
              {
              "src": "images/pwafire96.png",
              "type": "image/png",
              "sizes": "96x96"
              },
              {
              "src": "images/pwafire192.png",
              "type": "image/png",
              "sizes": "192x192"
              }
              ,
              {
              "src": "images/pwafire512.png",
              "type": "image/png",
              "sizes": "512x512"
              } 
              ],
          
              "start_url": "index.html?launcher=true"
              }
      

In the head tag, add theme color to all your pages as shown in the code below; You could use the same theme colour as in the manfest.json file.


        <!-- theme-color -->
        <meta name="theme-color" content="#fff" />
        <!-- end-theme-color -->

What's next?

Donate a Star and Contribute in any way. Be sure to Follow and use Project PWA Fire. If you use PWA Fire kindly let us know via info@pwafire.org | mayedwine1@gmail.com or JUST simply Tweet us

License

Copyright PWA Fire, 2018. Licensed under an MIT license.

FORK ON GITHUB