Broken Offline

Have you enabled the “Offline browsing” checkbox in the WordPress admin’s Reading settings screen?

Are you using an entirely different CSS file for your header/footer on the offline page?

Yes, it is active.

I just use the theme’s own style file and the additional css field in Customization.

So the problem is the additional CSS file isn’t cached? Or is the theme’s main stylesheet not cached either?

Yep, probably cache related. But the pictures are not showing? Exactly I want only the homepage and archive pages to be cached. But maybe you need to make other settings.

What do you recommend?

OK, so if the stylesheets used on the offline page are not also used on other pages, then the runtime cache won’t have a chance to cache them. You’ll have to manually add them to the client cache.

What does the custom CSS file URL look like when you add it? Does it have a ver parameter, for example?

in the form of style.css. Yes, when I look at the page source, there is the suffix ver.

Well, depending on the what the ver is populated with, you can precache that file with logic like this:

add_action( 'wp_front_service_worker', function( WP_Service_Worker_Scripts $scripts ) {
	$style_url = '...'; // <= style.css with the ver parameter
	$scripts->precaching_routes()->register( $style_url );
} );

Where $style_url you’d have to construct to match the style.css path and ver parameter that are being added to the frontend.

• This reply was modified 2 years, 7 months ago by Weston Ruter.

Did I do something wrong? Still not working on mobile. Maybe it’s because of Safari.

add_action( 'wp_front_service_worker', function( WP_Service_Worker_Scripts $scripts ) {
	$style_url = '/wp-content/themes/mission-news/style.css?ver=5.9.3';
	$scripts->precaching_routes()->register( $style_url );
} );

I also tried the full address.

By the way, I noticed that it works fine on desktop.

Can you share the URL of your site to I can see?

Okey: obelde .com

Here’s what I see in Chrome on Android when I try going to a subpage that I haven’t been to when I’m in Airplane Mode:

So it seems to be working properly.

• This reply was modified 2 years, 7 months ago by Weston Ruter.

Okey. I think I explained it wrong. What I would like to try: Your homepage that users previously visited was to load properly.

I’m not sure I understand. If I am online and I go to the homepage, then to first article, then back to homepage, and go to the second article, and then I go offline, I am able to go back to the homepage successfully even when offline. I can also go to the two articles I previously visited.

I understand. Well, I want to ask something else.

I also have a phpBB based forum in the subfolder of my WordPress site. The PWA was not working properly because there were no service workers in phpBB. However, I also added the manifest in WordPress to the forum with the link. So I can use PWA in the forum as well.

But when I set up a stand-alone phpBB forum, do I need to install WordPress in its subfolder to properly use the PWA? Or is it easy to write a service worker? ??

Is there anything you want to say about it? For example, can I use the code you gave in the previous post in phpBB? Can I ask the service worker to also store the phpBB index offline?

So you have WordPress at the root of your site and then phpBB as a subdirectory (e.g. /forum/). The service worker from WordPress is currently controlling phpBB because it is under the / scope. You’ve added a second manifest with /forum/ as the start URL, but at the moment are continuing to reuse the service worker at the / scope. I believe that the service worker from WordPress should still cache those forum pages for offline and that you don’t need to register yet another service worker for the /forum/ scope. Nevertheless, if you do want to register a different service worker from scratch, then Workbox.js makes it relatively straightforward to do so: https://developers.google.com/web/tools/workbox