Add ability to select a default offline page to be served when the user or site is offline #23

kienstra · 2018-07-04T05:27:32Z

##User story: As a WordPress administrator, I want to be able to select a page that displays when visitors are offline.

AC1 - As @mehigh suggested, create a UI to select the page that is displayed when offline.
~~[ ] AC2 - This page should be served when offline.~~ This AC has moved to ticket Add ability to serve the default offline page when the user or site is offline #45.

This could be similar to the Settings > Privacy Settings page:

The offline page UI could look something like:

This is based on @westonruter's suggestion in #9 (comment).

kienstra · 2018-07-04T05:29:01Z

Request For Feedback

Hi @jwold,
What do you think about the possible UI for offline pages above? It could probably use another <label> to describe it more.

westonruter · 2018-07-07T15:50:55Z

Bear in mind that we'd want to eventually allow whatever the selected page is to not just show static content but also be able to provide additional information, such as which posts of a given site are available offline, for example. One way would be for the selected page to be assigned a page template that has hard-coded logic displaying this information. But going forward probably the best practice would be to use a Gutenberg block that a site owner could drop into such a page regardless of the template. A shortcode could also be provided if Gutenberg is not available. In this way, we could eventually show a warning when an offline page lacks the block/shortcode in the content.

westonruter · 2018-07-07T16:03:45Z

Something else to remember is that when a page is designated as an offline page, we probably shouldn't encourage site authors to link directly to that page (like in a nav menu) or allow search engines to access it. It should probably get a robots directive that prevents indexing.

jwold · 2018-07-10T19:32:14Z

@kienstra I like the suggested UI you've shown. The only change I might suggest is to simplify the second button, otherwise it's hard to know what to look at. Having a primary and secondary action is always helpful instead of two conflicting actions that look the same. Can we do an anchor tag inside of a form element?

kienstra · 2018-07-10T19:40:19Z

Looks Good

Hi @jwold,
Thanks, that's a good idea to have "or create a new one" as a secondary action. Your screenshot looks good.

kienstra · 2018-07-11T00:18:10Z

Another Possible UI

Hi @westonruter,
What do you think about this UI, based on your suggestion in #9?

Of course, the "edit offline page" link would lead to the editor: /wp-admin/post.php?...

As you suggested, this could be a custom post type, so it doesn't appear in nav menus or searches.

westonruter · 2018-07-11T00:26:53Z

I think it should still mirror the privacy policy page as much as possible:

Or as @jwold suggested with a link instead.

As you suggested, this could be a custom post type, so it doesn't appear in nav menus or searches.

Actually it should have a custom post status.

kienstra · 2018-07-11T00:31:37Z

Hi @westonruter,
That looks good. Thanks for clarifying that it would have a custom post status.

westonruter · 2018-07-11T19:01:18Z

Something important to note here I just realized: this offline page could be served not only when someone's internet is offline but also when the server itself experiences an internal server error (a 500 response). We should try to design the offline page so that it could be used for both use cases. There would need to be some client-side logic involved here, however, since the client would know if the page fails to be fetched because of a network error or a server error.

That being the case, the content of the page could actually vary based on what kind of error it is. Perhaps when when the fetch handler responds with the offline page it could then follow-up with a message from the service worker to the page to indicate why it failed and then the JS on the offline page could vary the content accordingly. This seems better than perhaps having two separate offline pages.

westonruter · 2018-07-11T19:03:06Z

There are some important discussion regarding the designated offline page on #9. For example #9 (comment):

We could also just automatically create an offline page post upon activation. We could avoid the page from being served on the site normally by using a custom post status. This would automatically not expose the page among the available navigation menu items. We could then serve it only if requesting with the query var as you suggested. If no offline page exists, then the response could be treated as is_404() to serve the not found message, which I think would be better then no offline page at all. (Alternatively, I wonder also if the template hierarchy should be extended so that is_offline() would be a special case under is_404().)

There are thousands of themes out there and it would take a long time for them to add an offline.php template. I don't think that should be a requirement before serving the offline page.

Requiring a special offline template would also not align with the template hierarchy expectation either. A minimal theme is only required to include an index.php template which gets used then to serve responses to all queries, including is_404(). A theme should also be able to use this generic index template to serve an offline response as well (is_offline()?). That would seen the most logical from a theme developer's perspective.

westonruter · 2018-07-11T21:07:29Z

That looks good. Thanks for clarifying that it would have a custom post status.

And actually, a custom post status is more or less a hack to prevent the page from showing up in nav menus and from being accessed as a page on the frontend. A better way to prevent it from showing up in nav menus could be to just filter them to exclude this page. I assume there would be a page_for_offline option, for example, in the vein of the options for page_for_posts (blog page) and show_on_front (homepage). Something else to check is how the homepage and blog page behave when you try to give them a non-public status. I assume there should be some error message. The offline page shouldn't really have a parent page assigned to it, as it is irrelevant. But I think the homepage allows for a parent page to be assigned even though in practice it isn't used. Anyway, there are some things to think through in regards to in regards to the UX of special pages which is already something which is a problem in WordPress generally at the moment.

nico-martin · 2018-07-12T05:41:39Z

What if we have an non-public status but you can access it with a get-parameter?
https://mysite.com/offline/ -> 404 because not public
https://mysite.com/?p={offline-page-id}&access={some-random-string} -> 200 for offline page
The ServiceWorker does not care wether the URL has a nice structure or not.

westonruter · 2018-07-12T06:38:28Z

Agreed. The URL doesn't need to be pretty. But it should also be accessible for testing even when you're not offline. So some special wp_offline_page query var, or something, would maybe make sense. I'm not sure about whether we need the ad hoc post status. Not sure what is the most elegant way to implement the custom special page.

hellofromtonya · 2018-07-16T13:32:32Z

In the proposed UI, @kienstra notes that the page attributes are not required for the Offline Page. That's true. I mocked up a solution to remove it from the Classic and Gutenberg editors and the Quick Edit UI too (though the JS solution uses MutationObserver which only serves modern browsers).

In thinking about this, the page_on_front (homepage), page_for_posts (posts page), and page_for_privacy_policy (privacy page) all retain the page attributes.

To be consistent, I propose that we leave the page attributes for the offline page.

kienstra · 2018-07-16T15:29:31Z

Page Attributes: Good Idea

Hi @hellofromtonya,
Thanks, good idea to keep the "Page Attributes" UI for the offline page. Like you mentioned, this would be consistent with the homepage, posts page, and privacy page:

This commit excludes the offline page from rendering on the frontend. A 404 is served up. When using plain permalinks, e.g. https://example.com?page_id=28, it will find and render the offline page. This is an incompletion strategy per conversations in Issue #23 @see #23 (comment).

kienstra · 2018-07-17T23:45:07Z

Request For Another Issue

Hi @postphotos,
Could you please open an issue to capture this issue's AC2? The solution for that is probably different enough to warrant another issue.

AC2. This page should be served when offline

hellofromtonya · 2018-07-18T16:39:31Z

Scenario: The offline page is existing and already assigned in one or more menus.

Problem to discuss: How do we want to handle this situation?

[ ] Prevent
[ ] Alert
[ ] Alert and automatically remove

Looking for input from @kienstra @amedina @jwold @postphotos

Context

The UI currently looks like this:

where, the assigned Offline Page is filtered out and excluded from the Pages panel on the left but still appears in the Menu Structure on the right. Currently, no error messaging appears.

Possible Solutions

1. Prevent

One way to go is to prevent selection of an existing page that is already in one or more menus. How? Exclude these pages from the offline page dropdown select in the Settings > Reading UI.

Pros:

This solution prevents the page from being selected.
The code is isolated to the Settings > Reading UI with no impact on other interfaces or the frontend.
Low impact risk of future changes.

Problems:

This solution might confuse a person as to why it does not appear for selection.

Imagine that s/he has already setup the page to be the offline page with the content needed. Not appearing in the dropdown would be confusing.

2. Alert

Another option is to alert by with an error message on the Reading > Settings and Appearance > Menus pages. We may want to highlight the page too within the Menu Structure.

Pros:

Allows selection and then alerts admin to remove it from the affected menu(s).
Gives admin flexibility.
Lower impact risk when/if menu structure UI changes in the future.

Problems:

Not a prevention. Rather, an alert.
If the admin does not rectify to remove the offline page, a 404 appears on the frontend when a user selects that menu item.

3. Alert and automatically remove

This possible solution combines alerting from above with automatically removing the offline page's menu item from each menu.

Pros:

Makes it potentially easier for the admin.
Better user experience.

Problems:

Complex questions for handling nested menu structures where the offline page is current a parent of a submenu. (see more below in the revised note) ~~There are far too many questions around nested menu structures and being able to manage the interaction and actions taken for each use case. (see revised below)~~
Risk of future change impacts when/if the menu structures UI changes in the future.

Revised - If the page in question is a parent menu item, we are not able to automatically remove that item from the menu structure. Why? Because the children menu items will shift over one level. We've changed the sub-menu structure. In this case, we would need the admin to manually decide what the new structure will be.

Proposed Solution

I'd recommend Option 2 Alert.

Why? Informs of what action(s) need to happen, while giving flexibility to the admin to rectify the menu structures. It's also less risk for impact due to future UI changes.

What do you think?

kevincoleman · 2018-07-18T23:30:42Z

Great outlining of options, @hellofromtonya!

I’m not a huge fan of option 1. Showing greyed-out or not-functional options to a user is just frustrating, because it just tells them “no” instead of providing an easy path forward.

I resonate with a solution that’s somewhere between 2 and 3. Here’s my line of reasoning:

2 has the problem: Not a prevention. Rather, an alert. The best user experience is one where you don’t have to be afraid of breaking anything. This lets you break something.
3 has the pro of automatically solving the above problem in 2 by fixing menus automatically, but the experience would need to be carefully approached so users feel in control.

If we warn a user after they’ve selected an offline page and it’s been removed from menus, we’re only communicating the damage they’ve already done. That’s not optimal.

If we warn the user about what will happen before they confirm their choice, then they can make the choice to use a different page or to let it be removed from menus. This seems ideal to me.

So, maybe it would look something like this:

User selects the offline page of their choice
User is presented with a confirm-style dialog that says “Choosing this page as your offline page will remove it from any menus it’s listed in. Would you like to continue?” with a list of menus it appears in that would it would be removed from.
User can select “Remove from menus and continue” to have the page removed from menus, or “cancel” to then go back and select another page.

Even in the case that the page is not in any menus, the user should get a notice saying they will then not be able to add the offline page to menus. This could also just be solved by not listing the offline page in the menus’ add page interface, though we face a similar user-in-control dilemma there.

It’s possible I misunderstood what you meant with this:

far too many questions around nested menu structures and being able to manage the interaction and actions taken for each use case

Would you mind clarifying what those questions are—or at least give a sampling?

hellofromtonya · 2018-07-18T23:48:13Z

Would you mind clarifying what those questions are—or at least give a sampling?

@kevincoleman Sure. Imagine that the existing Offline Page is a parent menu item and has child menu items under it. If we automatically delete the Offline Page from the menu structure, what happens to the children? They slide over one level. Now, we've changed the menu structure itself.

What I meant then about far too many questions around nested menu structures is: How do we handled when the page is a parent? How do we alert? What do we do with the children? etc.

In essence, if the offline page is a parent in the menu structure, automatic removal is not possible. We need someone to manually decide what the new structure should be.

If we pick solution 3, we will have special cases where we cannot automatically remove a menu. In those cases, we need to prompt and guide the admin for how s/he could manually resolve the issue. When the page is not a parent, we can automatically resolve the problem without work from the admin. Though it's more development work, it is a better user experience.

kevincoleman · 2018-07-18T23:56:48Z

Ah, that does make sense. Thanks for clarifying!

I think it’s probably fair to say that we should make the MVP of this feature first, then consider adding a dialog like option 3 implies as an additional improvement later.

So, maybe we go back toward option 2, with clearly actionable links and messages to guide users to solve the problem themselves. We’d want to make sure the errors clearly communicate that the offline page won’t be functional until the menu items are removed.

At least—it seems to me that it would be better to block the newly-turned-on feature (the offline page) than to block a previously-turned-on feature (the page appearing in menus).

Graceful degradation and all that. Thoughts?

hellofromtonya · 2018-07-19T00:03:06Z

@kevincoleman I think that's a smart approach. It is an MVP at this point. I do like option 3 for the long term solution as it is a better experience.

kienstra · 2018-07-19T00:13:56Z

When The Offline Page Is Already In A Menu

Hi @hellofromtonya,
Thanks for your great writeup on the options, and sorry for the delay.

I'd prefer option 1 (Prevent), though I'm open to other ideas.

The offline page might be very different from existing pages. It might have a Gutenberg "Latest Posts" block, or it might be like a 404 page.

I don't think it would be too hard to either create a new offline page, or select a page that's not in a menu yet.

Still, it's possible that there are very few (or no) pages that aren't assigned to a menu. Like if a menu has checked "Automatically add new top-level pages to this menu" in /wp-admin/nav-menus.php.

Option 2 (Alert) is a good option also. It at least lets users know that they could cause a side-effect.

westonruter · 2018-07-29T00:16:50Z

Re-opening pending #23 (comment) request for @postphotos.

postphotos · 2018-07-29T00:26:26Z

Thanks @westonruter and @kienstra - happy to keep this open for the discussion regarding offline pages + PWA!

hellofromtonya · 2018-07-29T01:23:01Z

The severity of the default offline page being in the menu structure is less than when I first noted the issue. Why? It no longer renders a 404.

That said, we should discussion a solution to make the site owner aware. I’d propose a dismissible message and potentially a highlight around the item in the menu structure.

Let’s continue our discussion to decide:

if we need to provide guidance
and then what the UX should be.

hellofromtonya · 2018-08-03T14:03:12Z

All future conversations about serving the default offline page have been moved to ticket #45.

All future conversations about handling the edge case when the default offline page is in a menu have been moved to ticket #46.

westonruter · 2018-08-15T20:06:22Z

We're circling back on this in #52

westonruter mentioned this issue Jul 7, 2018

Research a method for caching and using data offline #9

Closed

westonruter added the service-workers label Jul 8, 2018

kienstra mentioned this issue Jul 11, 2018

Add UI to select an offline page #28

Merged

westonruter changed the title ~~Create a UI to select an offline page~~ Add ability to serve page when user is offline or the site is offline Jul 11, 2018

hellofromtonya self-assigned this Jul 12, 2018

postphotos self-assigned this Jul 16, 2018

kienstra assigned postphotos and unassigned postphotos Jul 17, 2018

westonruter mentioned this issue Jul 25, 2018

Install service worker to cache AMP CDN assets, cache Google Fonts, and cache images (following AMP by Example) ampproject/amp-wp#1261

Merged

4 tasks

westonruter closed this as completed in #28 Jul 27, 2018

westonruter reopened this Jul 29, 2018

westonruter mentioned this issue Jul 29, 2018

Implement precaching #25

Closed

hellofromtonya changed the title ~~Add ability to serve page when user is offline or the site is offline~~ Add ability to select a default offline page to be served when the user or site is offline Aug 3, 2018

This was referenced Aug 3, 2018

Add ability to serve the default offline page when the user or site is offline #45

Closed

Handle when default offline page is in a menu #46

Closed

hellofromtonya closed this as completed Aug 3, 2018

This was referenced Aug 9, 2018

Idea: Add support for custom theme template file to be used for offline page #50

Closed

Serve static offline/500 template as opposed to using specially-designated page #52

Closed

westonruter added this to the 0.2 milestone Apr 16, 2019

westonruter unassigned hellofromtonya Apr 16, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ability to select a default offline page to be served when the user or site is offline #23

Add ability to select a default offline page to be served when the user or site is offline #23

kienstra commented Jul 4, 2018 •

edited by hellofromtonya

Loading

kienstra commented Jul 4, 2018

westonruter commented Jul 7, 2018

westonruter commented Jul 7, 2018

jwold commented Jul 10, 2018

kienstra commented Jul 10, 2018 •

edited

Loading

kienstra commented Jul 11, 2018 •

edited

Loading

westonruter commented Jul 11, 2018

kienstra commented Jul 11, 2018

westonruter commented Jul 11, 2018 •

edited

Loading

westonruter commented Jul 11, 2018

westonruter commented Jul 11, 2018

nico-martin commented Jul 12, 2018

westonruter commented Jul 12, 2018

hellofromtonya commented Jul 16, 2018 •

edited

Loading

kienstra commented Jul 16, 2018

kienstra commented Jul 17, 2018 •

edited

Loading

hellofromtonya commented Jul 18, 2018 •

edited

Loading

kevincoleman commented Jul 18, 2018

hellofromtonya commented Jul 18, 2018 •

edited

Loading

kevincoleman commented Jul 18, 2018

hellofromtonya commented Jul 19, 2018

kienstra commented Jul 19, 2018 •

edited

Loading

westonruter commented Jul 29, 2018

postphotos commented Jul 29, 2018

hellofromtonya commented Jul 29, 2018

hellofromtonya commented Aug 3, 2018

westonruter commented Aug 15, 2018

Add ability to select a default offline page to be served when the user or site is offline #23

Add ability to select a default offline page to be served when the user or site is offline #23

Comments

kienstra commented Jul 4, 2018 • edited by hellofromtonya Loading

kienstra commented Jul 4, 2018

westonruter commented Jul 7, 2018

westonruter commented Jul 7, 2018

jwold commented Jul 10, 2018

kienstra commented Jul 10, 2018 • edited Loading

kienstra commented Jul 11, 2018 • edited Loading

westonruter commented Jul 11, 2018

kienstra commented Jul 11, 2018

westonruter commented Jul 11, 2018 • edited Loading

westonruter commented Jul 11, 2018

westonruter commented Jul 11, 2018

nico-martin commented Jul 12, 2018

westonruter commented Jul 12, 2018

hellofromtonya commented Jul 16, 2018 • edited Loading

kienstra commented Jul 16, 2018

kienstra commented Jul 17, 2018 • edited Loading

hellofromtonya commented Jul 18, 2018 • edited Loading

Context

Possible Solutions

1. Prevent

2. Alert

3. Alert and automatically remove

Proposed Solution

kevincoleman commented Jul 18, 2018

hellofromtonya commented Jul 18, 2018 • edited Loading

kevincoleman commented Jul 18, 2018

hellofromtonya commented Jul 19, 2018

kienstra commented Jul 19, 2018 • edited Loading

westonruter commented Jul 29, 2018

postphotos commented Jul 29, 2018

hellofromtonya commented Jul 29, 2018

hellofromtonya commented Aug 3, 2018

westonruter commented Aug 15, 2018

kienstra commented Jul 4, 2018 •

edited by hellofromtonya

Loading

kienstra commented Jul 10, 2018 •

edited

Loading

kienstra commented Jul 11, 2018 •

edited

Loading

westonruter commented Jul 11, 2018 •

edited

Loading

hellofromtonya commented Jul 16, 2018 •

edited

Loading

kienstra commented Jul 17, 2018 •

edited

Loading

hellofromtonya commented Jul 18, 2018 •

edited

Loading

hellofromtonya commented Jul 18, 2018 •

edited

Loading

kienstra commented Jul 19, 2018 •

edited

Loading