web2sign

web2sign

Hi I'm Roy Vincent Niepes! I'm a web developer living in the Philippines. I am simply a web enthusiast.

Latest Post

I'm sure you've googled what progressive website is, and you learnt that it means your site will still works even if its offline. The question is how you could do it?

Probably you've tried the Chrome's Audit Tab and test if your website have a good score on each category and seen that your progressive score is too low that's why your searching for it.

Well! Your lucky star was working today! I also wondered what's the purpose of it and why my website progressive score is too low but that was all history now. You could check this site to see for yourself.

This is a feature of a browser, you just need a javascript that will utilize the browser's api. Once the script is executed it'll cache all files from your site so even if it's offline it'll be viewable on the browser.

You can test it on your local host by running it and then after visiting the progressive page, turn off the xampp or any local server and type the url in browser and boom localhost is viewable!

Anyway here's how you could do it your website.

Step 1: Add this piece of code before the </body> tag.

<script type="text/javascript">
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js', { scope: '/' })
    .then(function(registration) {
          console.log('Service Worker Registered');
    });

  navigator.serviceWorker.ready.then(function(registration) {
     console.log('Service Worker Ready');
  });
}
</script>

Step 2: Create the javascript sw.js, should be under the root directory of your website.

Step 3: Open the sw.js and put this code

const cacheName = `enteryouruniquename`;
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(cacheName).then(cache => {
      return cache.matchAll('/').then(() => self.skipWaiting());
    })
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open(cacheName)
      .then(cache => cache.match(event.request, {ignoreSearch: true}))
      .then(response => {
      return response || fetch(event.request);
    })
  );
});

Now after putting the step above try it to your website then do an audit and you'll see it's all good now. :)

Here's a candy to convince you why having your website progressive was a good thing.

Progressive Web Apps

Happy Coding Fella!