chore: fix offline and server error page style for pwa

Codeinwp · Oct 8, 2019 · f98f0cd · f98f0cd
1 parent 67383e8
commit f98f0cd
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 4 deletions.
diff --git a/500.php b/500.php
@@ -1,8 +1,27 @@
 <?php
 /**
- * 500 template.
+ * The template for displaying the 500 server error page
  *
  * @package Neve
- */
+ */ ?>
+	<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
 
+	<head>
+		<meta charset="<?php bloginfo( 'charset' ); ?>">
+		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+		<link rel="profile" href="http://gmpg.org/xfn/11">
+		<?php wp_head(); ?>
+	</head>
+
+<body <?php body_class(); ?> <?php echo wp_kses( apply_filters( 'neve_body_data_attrs', '' ), array( '[class]' => true ) ); ?>>
+<?php wp_body_open(); ?>
+<?php
 do_action( 'neve_do_server_error' );
+
+wp_footer(); 
+?>
+
+</body>
+
+</html>
diff --git a/inc/compatibility/pwa.php b/inc/compatibility/pwa.php
@@ -0,0 +1,76 @@
+<?php
+/**
+ * PWA Plugin compatibility.
+ *
+ * @package Neve\Compatibility
+ */
+
+namespace Neve\Compatibility;
+
+/**
+ * Class PWA
+ */
+class PWA {
+
+	/**
+	 * Init function.
+	 *
+	 * @return bool
+	 */
+	public function init() {
+		if ( ! $this->should_load() ) {
+			return false;
+		}
+		$this->load_hooks();
+
+		return true;
+	}
+
+	/**
+	 * Decide if class should run.
+	 */
+	private function should_load() {
+		return defined( 'PWA_VERSION' ) && function_exists( 'wp_service_worker_error_details_template' ) && function_exists( 'pwa_get_header' ) && function_exists( 'wp_service_worker_error_message_placeholder' ) && function_exists( 'pwa_get_footer' );
+	}
+
+	/**
+	 * Load hooks.
+	 */
+	private function load_hooks() {
+		add_action( 'neve_do_offline', array( $this, 'offline_default_template' ) );
+		add_action( 'neve_do_server_error', array( $this, 'server_error_default_template' ) );
+	}
+
+	/**
+	 * Load offline default template.
+	 */
+	public function offline_default_template() {
+		pwa_get_header( 'error' );
+
+		?>
+		<main>
+			<h1><?php esc_html_e( 'Oops! It looks like you&#8217;re offline.', 'neve' ); ?></h1>
+			<?php wp_service_worker_error_message_placeholder(); ?>
+		</main>
+		<?php
+
+		pwa_get_footer( 'error' );
+	}
+
+	/**
+	 * Load server error template.
+	 */
+	public function server_error_default_template() {
+		pwa_get_header( 'error' );
+
+		?>
+		<main>
+			<h1><?php esc_html_e( 'Oops! Something went wrong.', 'neve' ); ?></h1>
+			<?php wp_service_worker_error_message_placeholder(); ?>
+			<?php wp_service_worker_error_details_template(); ?>
+		</main>
+		<?php
+
+		pwa_get_footer( 'error' );
+	}
+}
diff --git a/inc/core/core_loader.php b/inc/core/core_loader.php
@@ -79,6 +79,7 @@ private function define_modules() {
 				'Compatibility\Header_Footer_Beaver',
 				'Compatibility\Beaver',
 				'Compatibility\Lifter',
+				'Compatibility\PWA',
 
 				'Admin\Metabox\Manager',
 			)

diff --git a/offline.php b/offline.php
@@ -1,8 +1,27 @@
 <?php
 /**
- * Offline template.
+ * The template for displaying the offline page
  *
  * @package Neve
- */
+ */ ?>
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
 
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+	<link rel="profile" href="http://gmpg.org/xfn/11">
+	<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?> <?php echo wp_kses( apply_filters( 'neve_body_data_attrs', '' ), array( '[class]' => true ) ); ?>>
+<?php wp_body_open(); ?>
+<?php
 do_action( 'neve_do_offline' );
+
+wp_footer(); 
+?>
+
+</body>
+
+</html>