automattic / newspack-app-shell

A minimal app shell implementation

Newspack App Shell

Objective: A persistent audio player. User should be able to navigate the page, while the audio player is playing.

How to prepare the theme

1. If there is any JS code that attaches handlers after DOM loads, it has to re-attach them on newspack-app-shell-ready
2. CSS transitions can be added by utilising the newspack-app-shell-transitioning class that is added to the body element while page is transitioning.
3. If theme is using the AMP-WP plugin, the AMP plugin should be run in Transitional mode, because AMP will not allow the custom script on AMP pages.

Background

Based on work done in AMP-WP plugin. The scope of this work is bigger that what we want to achieve here. In the future the Newspack App Shell plugin might be abandoned in favour of the App Shell feature of AMP-WP plugin.

newspack-app-shell's Issues

Handle comment submission without reload

As is:

When a comment is submitted, there is a full page reload.

To be:

Comment should be submitted via XHR, so that there is no page reload

Should not run client script if there is no persistent element

As is:

The client script will hijack navigation events regardless of whether the persistent element is present in the DOM.

To be:

The client script should not do anything if there is no persistent element in the DOM.

Handle any content element

Currently (#3 ) the CONTENT_ELEMENT_ID is set to page - that's how it is in newspack-theme. Other themes might have different ways of rendering the site.

E.g. twentytwenty theme renders the page contents in separate elements (header, main, footer, etc) as direct children of the body, which makes it more complicated to replace in a way that preserves order. But maybe in such a scenario (no single content wrapper) the diffing should always replace all elements in body.
The problem is not existent in the head, as the order does not matter there.

Possible to create more than 1 app shell

You can use the admin toolbar to create additional app shells. I believe there's a param you can pass in when registering the post type to prevent it from appearing in this menu.

Introduce default values of meta fields

As pointed out here: #10 (review), default values should be provided for:

1. "Fixed to bottom" setting

Use AMP as data source

Currently, on navigation event, the HTML document is fetched. Instead, AMP documents could be fetched and attached to the to DOM as described here.

Handle Jetpack's lazy loaded images

As is:

After page is re-rendered on the client, and Jetpack's lazy load images feature is used, the images are not displayed.

To be:

The images should be displayed

Page transitions

Add a setting and CSS to animate body element on page transitions

Change the "Post updated." message

Upon saving the persistent element, a "Post updated." notice appears:

It should rather say "Persistent element updated.", or something like that. This might be achievable via post_updated_messages hook.

Handling AMP

The client script makes pages using it AMP-incompatible. The AMP plugin will then strip it away. The "persistent element" might however be AMP-compatible, which would result in a situation where the element is displayed, but the script is not there (when serving an AMP page, with /?amp in URL).

This situation should be handled as on NovaFM site, where the play button (part of the persistent element) is a link to the non-AMP page, when page is AMP-rendered.