Extending the PWA with code from PWAbuilder.com

  • Resolved deetee1

    (@deetee1)


    3 years, 5 months ago

    Hi,

    thanks for making the PWA app available. The basic functionality works for my website. But core to my service is having all pages cached and available offline. Users should be able to work offline and sync (Backgroundsync) and finally, we want to be able to serve media offline as well, so users can watch media offline.

    I have tested my PWA on pwabuilder.com and got a good score. However, I need to extend the service worker by adding code for the periodicsync, backgroundsync, offline pages and cached media.

    Is it possible to extend the PWA this way? Is it possible to use the snippets plugin in WordPress to add this custom code, that would then be injected into the PWA? Any ideas? Thanks so much for your feedback

    • This topic was modified 3 years, 5 months ago by deetee1.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    Yes, you can add arbitrary JS logic to the service worker.

    For example, to add some JS file (foo.js) to the service worker from a plugin, you can do the following:

    add_action( 'wp_front_service_worker', static function ( $scripts ) {
	$scripts->register(
		'foo',
		array(
			'src' => plugin_dir_url( __FILE__ ) . 'foo.js',
		)
	);
} );

    The Workbox.js library is then available to foo.js to do all that you need with BackgroundSync, PeriodicSync, etc. For that I recommend the Workbox docs: https://developers.google.com/web/tools/workbox/

    Note that support for offline page access is provided by the plugin. Just enable “Offline Browsing” in the Reading settings of the WP admin.

    Thread Starter deetee1

    (@deetee1)

    Thank you @westonruter for the feedback. “Offline browsing” was already checked on my site. I guess, what is missing with regards to offline pages might be the offline.php file in my theme. I will also check the resource on the link you have provided and see where that leads me. I hope I would not have to come back here:-D . Thanks again!

    • This reply was modified 3 years, 4 months ago by deetee1.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Extending the PWA with code from PWAbuilder.com’ is closed to new replies.