Lighthouse Errors

Hummm. I’m seeing the same thing. Nevertheless, the service worker is installed and I can see the offline template is being served.

Nevertheless, I’m not seeing the error message being shown on the error template. Currently the PWA plugin injects the error message by replacing an HTML comment with the message, but when accessing the error template directly I’m not seeing any comment: https://www.logoglo.com/?wp_error_template=offline

It seems you have an optimization plugin which is stripping out all HTML comments?

Nevertheless, this wouldn’t explain why Lighthouse is failing the audit.

When looking at the source code of the page, I’m seeing something peculiar:

<script type="rocketlazyloadscript">
		if ( navigator.serviceWorker ) {
			window.addEventListener( 'load', function() {
									{
						navigator.serviceWorker.register(
							"https:\/\/www.logoglo.com\/wp.serviceworker",
							{"scope":"\/"}						).then( reg => {
													} );
					}
							} );
		}
	</script>

Notice the rocketlazyloadscript type. I’m guessing this JS lazy-loading feature of WP Rocket is conflicting with Lighthouse’s audit.

Ahhh ok, so this is a feature of wprocket, I can add to exclude for things to work, at the moment i have this:

/jquery.min.js
/plugins/revslider/public/assets/js/
setREVStartSize
rev_slider_
jquery
/wp-includes/js/jquery/ui/core.min.js
/wp-includes/js/jquery/ui/tabs.min.js
/plugins/cornerstone/assets/dist/js/site/cs.2155f74.js
/themes/x/framework/dist/js/site/x.js
/plugins/wp-rocket/assets/js/lazyload/16.1/lazyload.min
/wp-content/cache/min/1/ajax/libs/jquery/3.6.0/jquery.min.js
/wp-includes/js/jquery/jquery.min.js
lazyload
window.RS_MODULES

What could I add to exclude PWA? would it be “navigator.serviceWorker”?

Or could it be asset clean up pro? “Strip HTML comments? This feature will strip all comments except the Internet Explorer conditional ones. If you wish to keep specific comments, use the textarea below to add exception patterns (one per line).
Do not remove comments containing the following (case insensitive) text:”

Thanks so much for your help thus far.

• This reply was modified 3 years, 8 months ago by logoglo.

**Update. I disabled the strip html, cleared caches, and its still erroring, so Im guessing its the wprocket.

What could I add to exclude PWA? would it be “navigator.serviceWorker”?

I recommend excluding scripts that include wp.serviceworker.

Ok, but how would I know what those scripts would be? maybe you have a better idea?

Thanks.

Would this work? /plugins/pwa/wp-includes/js (.*) If I add it?

The script in question is an inline script, not an external one. So you’d need to exclude the inline script that contains wp.serviceworker from being lazy-loaded. I don’t know how WP Rocket provides configuration for that.

No worries, I just included all scripts tat your plugin uses, and it worked ?? im getting green..the only issue in red is now “Manifest doesn’t have a maskable icon
A maskable icon ensures that the image fills the entire shape without being letterboxed when installing the app on a device. Learn more.”

My favicon is a png, so not sure whats going on there, any thoughts?

Again, thanks for your help with getting to the bottom of this.

For the maskable icon, please see this issue: https://github.com/GoogleChromeLabs/pwa-wp/issues/304

There is some PHP code you can use to indicate that the icon is maskable. Currently there is no UI to enable that, but that’s what the issue is for.

Perfect! that worked, thank you so much for all your time.

• This reply was modified 3 years, 8 months ago by logoglo.