Backward Compatibility for IE11

[mxsxs2]

Hi,

I am wondering if there is any particular reason why older browsers are not supported at the moment?

The JavaScript parts of the plugins is written as ES6. This means the scripts cannot be loaded in browser that does not support es 6 features like fat arrow.

I know ServiceWorkers are not even supported in IE but an error free console is desirable(in my opinion).

It is possible to transpile the existing ES6 back to ES5 and keep the existing functionality with Babel. It could be integrated into the Grunt building process. Except in cases when JS is embedded in PHP code like Here. These would have to be written in ES5 manually.

[westonruter]

Hello. What are the JS errors you are seeing in IE11? You're right that no errors should be occuring in that browser. Since it doesn't support service workers, the JS should just do nothing.

[westonruter]

Nevermind... I see you linked to it. Yes, the arrow functions and use of let/const should be replaced with ES5 equivalents.

[mxsxs2]

Should I fix what I can and create a pull request?
How would I go about it? The proposed solution use babel at building time and manual changes in codes that is in PHP files.

[westonruter]

Yes, pull request welcomed! However, I think the change can be simpler than what you are thinking. The only code that IE11 should ever see is the code being output inline via PHP. So I believe that is the only code that needs to be made ES5-compatible. So all that may be required is:

diff --git a/wp-includes/service-workers.php b/wp-includes/service-workers.php
index 2197787..aebc987 100644
--- a/wp-includes/service-workers.php
+++ b/wp-includes/service-workers.php
@@ -157,7 +157,7 @@ function wp_print_service_workers() {
 			window.addEventListener( 'load', function() {
 				<?php foreach ( $scopes as $name => $scope ) : ?>
 					{
-						let updatedSw;
+						var updatedSw;
 						navigator.serviceWorker.register(
 							<?php echo wp_json_encode( wp_get_service_worker_url( $name ) ); ?>,
 							<?php echo wp_json_encode( compact( 'scope' ) ); ?>
@@ -166,16 +166,16 @@ function wp_print_service_workers() {
 								document.cookie = <?php echo wp_json_encode( sprintf( 'wordpress_sw_installed=1; path=%s; expires=Fri, 31 Dec 9999 23:59:59 GMT; secure; samesite=strict', $scope ) ); ?>;
 							<?php endif; ?>
 							<?php if ( ! wp_service_worker_skip_waiting() ) : ?>
-								reg.addEventListener( 'updatefound', () => {
+								reg.addEventListener( 'updatefound', function() {
 									if ( ! reg.installing ) {
 										return;
 									}
 									updatedSw = reg.installing;
 
 									/* If new service worker is available, show notification. */
-									updatedSw.addEventListener( 'statechange', () => {
+									updatedSw.addEventListener( 'statechange', function() {
 										if ( 'installed' === updatedSw.state && navigator.serviceWorker.controller ) {
-											const notification = document.getElementById( 'wp-admin-bar-pwa-sw-update-notice' );
+											var notification = document.getElementById( 'wp-admin-bar-pwa-sw-update-notice' );
 											if ( notification ) {
 												notification.style.display = 'block';
 											}
@@ -187,9 +187,9 @@ function wp_print_service_workers() {
 
 						<?php if ( is_admin_bar_showing() && ! wp_service_worker_skip_waiting() ) : ?>
 							/* Post message to Service Worker for skipping the waiting phase. */
-							const reloadBtn = document.getElementById( 'wp-admin-bar-pwa-sw-update-notice' );
+							var reloadBtn = document.getElementById( 'wp-admin-bar-pwa-sw-update-notice' );
 							if ( reloadBtn ) {
-								reloadBtn.addEventListener( 'click', ( event ) => {
+								reloadBtn.addEventListener( 'click', function( event ) {
 									event.preventDefault();
 									if ( updatedSw ) {
 										updatedSw.postMessage( { action: 'skipWaiting' } );
@@ -200,8 +200,8 @@ function wp_print_service_workers() {
 					}
 				<?php endforeach; ?>
 
-				let refreshedPage = false;
-				navigator.serviceWorker.addEventListener( 'controllerchange', () => {
+				var refreshedPage = false;
+				navigator.serviceWorker.addEventListener( 'controllerchange', function() {
 					if ( ! refreshedPage ) {
 						refreshedPage = true;
 						window.location.reload();

Alternatively, another way to prevent the JS code from being executed by old browsers would be simply to make the script have type=module:

diff --git a/wp-includes/service-workers.php b/wp-includes/service-workers.php
index 2197787..cc8cdf9 100644
--- a/wp-includes/service-workers.php
+++ b/wp-includes/service-workers.php
@@ -152,7 +152,7 @@ function wp_print_service_workers() {
 	}
 
 	?>
-	<script>
+	<script type="module">
 		if ( navigator.serviceWorker ) {
 			window.addEventListener( 'load', function() {
 				<?php foreach ( $scopes as $name => $scope ) : ?>

The browsers that support modules are pretty much the same that support service workers, so it would be an easy way to target them.

[pooja-muchandikar]

QA Passed ✅

Cross-checked the issue on IE11 and found that no errors displayed in console of IE11