Workbox for Joomla: JavaScript libraries for Progressive Web Apps

"XT Workbox for Joomla! provides a solution to implement Workbox libraries on a Joomla site."

XT Workbox for Joomla!

What is to Workbox?

Workbox is a collection of JavaScript libraries for Progressive Web Apps.

Offline Caching: Workbox helps you add offline caching support to your website. This enables it to work offline on repeat views and ensures your site is resilient to spotty network conditions.

Offline Analytics: Workbox can collect user analytics while offline and send them to your Google Analytics account when a connection becomes available.

Visit workboxjs.org to learn more about what Workbox can do for you.

Highly Experimental

At this time, Service Workers are correctly working on Chrome and Firefox. However, Safari and Microsoft Edge support is coming, but not ready yet. For more information: Is service worker ready?

Given said that, this package is mainly a working proof of concept.

Download / Install from Web v0.0.7

Contents

We have completed the initial development of XT Workbox for Joomla. The extension installs and enables two plugins:

  • System - XT Workbox
  • Ajax - XT Workbox

In the system plugin, you can find the main configuration options. At this time, these are the available recipes:

  • Cache Css And Java Script Files
  • Caching Images
  • Caching Content From Multiple Origins
  • Google Fonts

They implement the same recipes found in the Workbox site: https://developers.google.com/web/tools/workbox/guides/common-recipes

This is how the Caching Images recipe is defined:

workbox.routing.registerRoute(
/\.(?:png|gif|jpg|jpeg|svg)$/,
workbox.strategies.cacheFirst({
    cacheName: 'images',
    plugins: [
    new workbox.expiration.Plugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
    }),
    ],
})
);

Once you install it on the testing site, you must add this header definition in the .htaccess:

<IfModule mod_headers.c>
    <FilesMatch "workboxforjoomla\.js$">
        Header set Service-Worker-Allowed "/"
    </FilesMatch>
</IfModule>

The expected result of the extension implementation is confirming that the assets are managed by the service worker strategy that you define in the plugin configuration.

Workboxforjoomla - Chrome Console

For example, we have enabled Cache Css And Java Script Files recipe on this demo site: https://blog.anibalhsanchez.com, If you inspect the page with Chrome Dev Tools, you can confirm that in the first-page load, the console shows this message:

Yay! Workbox for Joomla! is loaded - Recipe Cache Css And Java Script Files

Then, in the next page loads, Css and Java Script Files are served by the Service Worker.

Chrome Console - Images

How to contribute

The package is published on Github at https://github.com/anibalsanchez/workboxforjoomla. Feel free to clone, fork, modify, open issues, submit PRs, etc.

Requirements

      • Joomla 3, or superior

License

    • License: GNU General Public License v3.0
    • Usage license will never expire. You can use the software FOREVER.
    • Unlimited sites or domains.
    • During the subscription period, you can download new versions, with major features and minor fixes/enhancements, or request assistance in our ticketing system. Once the subscription is over, you can renew it, or create a new topic in the community forum.
    • You can use the software on ALL YOUR sites under the terms of GPLv3.
    • No part of our source code is encoded.

Prices shown without VAT. For European customers, the EU requires to charge VAT to downloadable purchases by non-business consumers located in the EU. Business customers are able to waive VAT charges by providing a valid VAT ID at time of purchase.

Join the Club!

Access and support services to all Extly's extensions for 1-Year. The Extly Club is your source for all of our extensions.

Join Now