Skip to main content

Some pitfalls for using PWA and ServiceWorkers I hoped I knew before

Some pitfalls for using PWA and ServiceWorker I hoped I knew before - So I am writing them here so maybe others will get to rid them before or I can find them again when I'll need them again.

This is not a tutorial for PWA, ServiceWorker. Those are just a few points that I encountered while developing a PWA (Progressive Web App) and ServiceWorker using Vanilla JavaScript and caching mechanism for Offline usage. There are plenty of good PWA ServiceWorker Caching tutorial on the internet.

Full Vanilla JavaScript code is attached all the way at the bottom

Double caches:

First, the cache made by the cache mechanism which you as a coder decide what will be saved in this cache using the cache.addAll() command.

And the second cache is the one the browser automatically caches for example images and javascripts code or others.

Hence might be that when you work offline the browser will return cached images which you did not stated that should be cached only because the browser caching mechanism have cached them.


Cache is empty offline from the website {ignoreVary: true}:

You develop and everything works cool from your localhost server but when deploying and installing on production on your website the offline cache of the serviceworker is empty in the devtools of your Chrome browser. When you work Online you do see the cache.

Now weather I think it appears empty it is a Chrome bug because the cache is there - apparently your code does not recognize the cache using caches.match and tries to request it from the network.

There are two things needed to be done:

  1. Use caches.match(e.request, {ignoreVary: true}) in your code telling the cache match comparing mechanism to ignore the request type and use only the URL itself
  2. When installing the serviceWorker it should be by default working under the same directory it is installed from. Unfortunately it doesn't always work. So when installing the serviceWorker use the scope parameter: navigator.serviceWorker.register('sw1.js', {scope: './'}) 

There can be only one instance of the ServiceWorker for the domain:

So no need to reinstall the worker when you go offline and the list of resources need to be relative to the service worker location:

const includeToCache = [
  './',
  'index.php',
//  'loader.js?20211118a', // the serviceWorker loader
//  'sw1.js', // the serviceWorker itself
]; 


The full code of the serviceWorker

// service worker for PWA loaded from loader.js in pwa.class.php

const cacheName = 'pwa_v10';

const includeToCache = [
  './',
  'index.php',
//  'loader.js?20211118a',
//  'sw1.js',
];

// Start the service worker and cache all of the app's content
self.addEventListener('install', e => {
    self.skipWaiting();
    e.waitUntil(
        caches.open(cacheName).then(cache => {
            let c = cache.addAll(includeToCache).catch(err => console.log('SW install addAll FAIL:', err));
            return c;
        })
    );
});

// Serve cached content when offline
self.addEventListener('fetch', e => {
    e.respondWith(
        caches.match(e.request, {ignoreVary: true}).then(response => {
            return response || fetch(e.request);
        })
    );
});

// replacing new cache if needed
self.addEventListener('activate', e => {
    // delete any caches that aren’t in cacheName
    // which will get rid of older versions
    e.waitUntil(
        caches.keys().then(keys => Promise.all(
            keys.map(key => {
                if(cacheName !== key) {
                    return caches.delete(key);
                }
        }))).then(() => {
            console.log(cacheName + ' now ready to handle fetches!');
        })
    );
});

Comments

Popular posts from this blog

Using phpword to merge two Mircrosoft Office Word .docx documents

How to combine or embed and insert another .docx file (Microsoft office docx word document) into another one using PHPWord Joining two .docx document using php ( phpword library ) $mainTemplateProcessor = new \PhpOffice\PhpWord\TemplateProcessor("file1"); //$mainTemplateProcessor ->setValue('var_name', $value); $innerTemplateProcessor = new \PhpOffice\PhpWord\TemplateProcessor("file2"); //$innerTemplateProcessor->setValue('var2_name', $value2); // extract internal xml from template that will be merged inside main template $innerXml = $innerTemplateProcessor->gettempDocumentMainPart(); $innerXml = preg_replace('/^[\s\S]*<w:body>(.*)<\/w:body>.*/', '$1', $innerXml); // remove tag containing header, footer, images $innerXml = preg_replace('/<w:sectPr>.*<\/w:sectPr>/', '', $innerXml); // inject internal xml inside main template $mainXml = $mainTemplateProcessor->gettempDocumentMainPart(

Bypassing the error by "go get" "tls: failed to verify certificate: x509: certificate signed by unknown authority"

When I was trying to download dependencies for my go project in an old Ubuntu machine I was getting this error all the time: "go: gopkg.in/alexcesaro/quotedprintable.v3@v3.0.0-20150716171945-2caba252f4dc: Get "https://proxy.golang.org/gopkg.in/alexcesaro/quotedprintable.v3/@v/v3.0.0-20150716171945-2caba252f4dc.mod": tls: failed to verify certificate: x509: certificate signed by unknown authority" Which the main part of it was go get failing to authenticate: " tls: failed to verify certificate: x509: certificate signed by unknown authority " I tried many things but couldn't make it work until I found the way: export GOINSECURE="proxy.golang.go" This will tell go get to ignore certification validity. Then export GOPROXY=direct This will tell go get to by pass proxy Then git config --global http.sslverify false And only after those I could run again: go get And it worked