FOUC on navigation around PWA

Hi there,

I looked upon the website and noticed that some minification of CSS/JS by some optimize/caching plugin is causing this. You can also clarify it by uninstalling our plugin and try the same again.

Moreover, I would also like to add a bit more, that PWA only supports over iOS 11.3+ versions. That’s iOS started supporting Caching API from 11.3+ and over the older versions of iOS, the website will be work as normal even without any glitches.

Looking forward to hearing your thoughts.

Best Regards,

Thanks for getting back so quickly @josevarghese

I use Autoptimize for CSS/JS minification on my site. I’ve excluded superpwa-sw.js and the \wp-content\Super-Progressive-Web-Apps\ folder from Autoptimize’s JS minification, the CSS being minified shouldn’t make any difference though surely?

I’ve grabbed a screen recording for reference: https://user-images.githubusercontent.com/43744514/49016650-a4ed7980-f17e-11e8-868f-ce93e3c56938.gif

I also see some strange navigation “glitches” on the right hand side of the screen – it looks like my home-page sidebar glitches in and then out? On mobile, the screen “swipes” into whatever I’ve clicked and looks good – but in desktop it seems to really freak out!

Thanks for sharing the details. Can you please uninstall our plugin and try the same again. So that I can test it at my end and get back to you asap.

Not a problem – I’ll do that shortly and will confirm! ??

I hadn’t seen this behaviour prior to activating SPWA, so hopefully it’s a easy fix as the plugin is great!

Wow, appreciating your fast response’s and hope you’ll get back to me after uninstalling our plugin & test. So that I can also run some tests upon my limited device’s.

Kind regards,

OK – plugin has now been deactivated!

Same issue exists even without our plugin. Now I can confirm that it’s not caused by our plugin.

As I mentioned earlier it’s causing because of a Minify/Caching plugin. Can you flush the Minify and test it again, most probably it will help you to easily ride off the issue.

Looking forward.

Found the source of the issue!!!! CriticalCSS!

Sorry, one final question. Where is this JS stored:

if ('serviceWorker'in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register(superpwa_sw.url).then(function(registration) {
            console.log('SuperPWA service worker ready');
            registration.update();
        }).catch(function(error) {
            console.log('Registration failed with ' + error);
        });
    });
}

As noted above, I have excluded \wp-content\Super-Progressive-Web-Apps\ from Autoptimize, but this still seems to be getting caught some how as I can see in the console:
SuperPWA service worker ready - autoptimize_single_2c986d3e9a58fc60f524c135d382591f.js:1 – is there another file/folder I can/should exclude?

Yes, you’re right.

You can notice the above-mentioned code within your website upon our plugin at here. It’s for registering the service worker (the heart of PWA) otherwise, it will show an error upon console so that we can easily get it fixed.

SuperPWA service worker ready - autoptimize_single_2c986d3e9a58fc60f524c135d382591f.js:1
That’s the expected log which is written by our plugin on Dev Console.

Hope you understand.

Brilliant – thank you, funny enough I just found it as well ??

The only reason I asked is I was going to exclude it from Autoptimize to prevent any conflicts. It’s strange though, because I have already excluded \wp-content\Super-Progressive-Web-Apps\ as a folder… so it shouldn’t be being minified via Autoptimize.

I’ll speak to Frank at Autoptimize to get his thoughts ??

Thanks for all your help @josevarghese

It’s my pleasure to help you Will. Please don’t hesitate to let me know, if you notice any issues or have any doubts.

Have a great week ahead.