How you can be 100% PWA

In the previous article SEO — with Google AMP, PWA, WorkBox and LightHouse we presented how we can create an SEO optimized page with Google technologies more in a theoretical manner. Here we show some practical aspects that we find in optimizing the ionicbook.com site using Light House for 100% PWA. In this article, we will present more code, and a lot of screenshots.

First of all, we show you what we get in the end regarding performance using Google LightHouse tool:

You can test this on your computer installing LightHouse as an extension to your Chrome browser and running the ‘Audits’ on ionicbook.com site (we recommend you to use a New incognito browser Window). You can find here how to install and use LightHouse.

For obtaining 100% PWA score we registered a service worker using Google WorkBox. You can see that we use it for pre-caching a set of pages, the CSS files, images, fonts. We also activated the offline Google Analytics. Here is the sw.js code:

console.log('Hello from sw.js');

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js')

if (workbox) {

    console.log('Yay! Workbox is loaded');

    workbox.setConfig({
        debug: false
    });


    // precaching
    workbox.precaching.precache([
        '/',
        '/404.html',
        '/contact.html',
        '/about.html',
        '/img/ionic-4-book-cover.png',
        '/img/ionic-4-book-cover.webp',
        '/img/logos/logo_48.png',
        {
            url: '/index.html',
            revision: 'as46',
        }
    ]);

    // cache start url
    // workbox.routing.registerNavigationRoute('/');

    // Cache JavaScript and CSS
    workbox.routing.registerRoute(
        new RegExp('.*\.js'),
        workbox.strategies.networkFirst()
    );
    workbox.routing.registerRoute(
        // Cache CSS files
        /.*\.css/,
        // Use cache but update in the background ASAP
        workbox.strategies.staleWhileRevalidate({
            // Use a custom cache name
            cacheName: 'css-cache',
        })
    );


    // Cache Images
    workbox.routing.registerRoute(
        // Cache image files
        /.*\.(?:png|jpg|jpeg|svg|gif)/,
        // Use the cache if it's available
        workbox.strategies.cacheFirst({
            // Use a custom cache name
            cacheName: 'image-cache',
            plugins: [
                new workbox.expiration.Plugin({
                    // Cache only 20 images
                    maxEntries: 20,
                    // Cache for a maximum of a week
                    maxAgeSeconds: 7 * 24 * 60 * 60,
                })
            ],
        })
    );

    // Cache Google Fonts
    workbox.routing.registerRoute(
        new RegExp('^https://fonts.(?:googleapis|gstatic).com/(.*)'),
        workbox.strategies.cacheFirst()
    );

    // Offline Google Analytics
    workbox.googleAnalytics.initialize();
}
else {
    console.log('Boo! Workbox didnt load ');
}

We declared the service worker in our index.html page:

<amp-install-serviceworker
        src="sw.js"
        layout="nodisplay">
</amp-install-serviceworker>

We can see now our Service Worker data and the caches in Developer Tools/Application (we can clean the caches using Clean storage option — this is very useful because the service worker will serve from the cache the configured pages and we will not see the changes we made to the pages):

Service worker is registered

You can see the cached files in Cache Storage

You can clear the cache storage

Also we created a manifest for our app:

{
  "name": "Ionic Book",
  "short_name": "Ionic 4 Book",
  "start_url": "/index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "img/logos/logo_48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "img/logos/logo_96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "img/logos/logo_192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "img/logos/logo_512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "background_color": "#298fff",
  "theme_color": "#298fff",
  "prefer_related_applications": false,
  "related_applications": [
    {
      "platform": "play",
      "id": "com.ionicbook.mobile"
    }
  ]
}

We have to include the manifest in our index.html page:

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

We can see now our data in Chrome Developer Tools/Application/Manifest:

All manifest data is reflected in Light House

The most important aspect is that your page will be saved (you will be asked to do this) as an application and will appear in the list of the installed apps on the device:

References:

Status of service workers support: https://www.infoq.com/news/2018/05/service-workers-supported-across

Google PWA: https://developers.google.com/web/progressive-web-apps/

PWA on Windows 10: https://developer.microsoft.com/en-us/windows/pwa