Add page reloading in offline.php templates

[thelovekesh]

Fixes #438

Automatically reload the offline page once the user is back online.

Tasks Done:

• Add JS to automatically reload the offline page once the user is back online

offline-page-reload.mp4

[codecov-commenter]

Codecov Report

Merging #697 (9f2e7c1) into develop (6efeba2) will decrease coverage by 0.05%.
The diff coverage is 0.00%.

@@              Coverage Diff              @@
##             develop     #697      +/-   ##
=============================================
- Coverage      19.05%   19.00%   -0.06%     
  Complexity       324      324              
=============================================
  Files             55       55              
  Lines           2062     2068       +6     
=============================================
  Hits             393      393              
- Misses          1669     1675       +6     

Flag	Coverage Δ
php	19.00% <0.00%> (-0.06%)	⬇️
unit	19.00% <0.00%> (-0.06%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
wp-includes/template.php	0.00% <0.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6efeba2...9f2e7c1. Read the comment docs.

[westonruter]

It would be useful to also do the reload in the case of server being down.

Also, something else that comes to mind: what happens if the error page is served in response to a POST request? If so, each reload will cause a re-POST message from the browser and that's probably not desired.

Suggested change

	if ( ! is_offline() ) {
	if ( ! is_offline() || ! is_500() || 'GET' !== $_SERVER['REQUEST_METHOD'] ) {

[thelovekesh]

Thanks for pointing this out. For sure we need to check the method of the request. I have implemented these changes.

[westonruter]

As part of #728, I just realized that this check will never do anything:

pwa-wp/wp-includes/template.php

Lines 181 to 184 in 124baab

	if ( isset( $_SERVER['REQUEST_METHOD'] ) && 'GET' !== $_SERVER['REQUEST_METHOD'] ) {
	return;
	}

This is because the offline template is always fetched via a GET request by the service worker when it is installing, so it will never not be GET. We need an alternative way of preventing the code from running on responses to non-GET requests.

Contrary to what I thought above, each reload does not cause the browser re-POST message: #728 (comment)

[westonruter]

I believe I've addressed this via #763

[westonruter]

See #763

[westonruter]

Note that testing this is a bit tricky because the script is part of the precached template, so without a version bump it won't show up.

[westonruter]

Let's just add a PHPUnit test to ensure that the cases are covered for this function outputting the script.

[thelovekesh]

Note that testing this is a bit tricky because the script is part of the precached template, so without a version bump it won't show up.

@westonruter Tests added 👍

[thelovekesh]

@westonruter Can you please confirm if this PR needs no more improvements?

[westonruter]

This is good, yes.

[westonruter]

I just realized one thing that should be done to improve this. Namely, if you try going to /?wp_error_template=offline then the result is an infinite reload as it tries to go back online. Accessing this URL directly is key for being able to see how the offline template looks during development. So I think the logic to auto-reload should be disabled if this is true:

( new URLSearchParams(location.search.substr(1)) ).has( 'wp_error_template' )

[thelovekesh]

then the result is an infinite reload

Thanks for pointing it out and it's a great finding. I just checked it after your comment. We should add it else it will cause infinite reloads during development.

@westonruter Should I push a commit for this?

[westonruter]

@thelovekesh Yes please! Thanks.