• Fabrik V4.4.1 is now available.

    This version corrects the Admin issue introduced by V4.4. V4.4.1 is available through the Joomla Updater or for download through your My Downloads area of our website.

    Turns out a code change intended for our 5.0dev branch inadvertantly got pushed to the 4.x branch (by me, duh!). The javascript structure in 5.0 will change considerably and part of that change took effect with the inadvertant code change.

    We have reverted the code change and released 4.4.1. V4.4 has been retracted.

    Sorry for any inconvenience.

  • A new version of Full Calendar is now available.

    See the details here

Progressive Web App & Fabrik

An interesting idea. Had never heard of PWA before. Did you find a way to register on their site? I can find a registration form.
 
There are 3 level of paid subscription as far as I can see.
I suppose it needs to buy one and afterwards you will get credentials or something.

I didn't register yet. First I would like to see if someone from the Fabrik community had tried this plugin before I do.
 
Last edited:
I use this PWA before, has proven effective in my previous experience.
https://extensions.joomla.org/extension/mobile/mobile-apps/progressive-web-app-maker/

Despite its last update being over two years ago, it continues to function well with Joomla 4.
The extension is called "Progressive Web App Maker" and can be found at the provided link.
Support is good as well. :)
Thanks for the feedback. Did you use it in a Fabrik driven website? If yes, did you do any special settings for mobile devices to display fabrik data?
 
Last edited:
Hello everyone,
Regarding the PWA, I don't see why it shouldn't work. After all, the main features of a PWA include the ability to "install it on the device," send push notifications, optimize speed and performance, and provide an interface similar to a native app. Additionally, you can further customize the PWA using custom CSS or JS.
However, if the website is set up correctly to be responsive, it might not be as essential. One key aspect to be cautious about is offline usage and caching. Since we need to use it for Fabrik, there is a risk that some users may unintentionally use it without a connection on their smartphones, leading to them viewing outdated data or filling out forms unnecessarily.
Moreover, it’s possible to create a PWA without using extensions, especially if the requirements are minimal and if, for example, notifications are not necessary, it becomes even simpler. I’ll post a brief guide tomorrow on how to create a PWA with simple code without any extensions, so we can test how a PWA works.
Just to share, I run Fabrik through an Android and iOS app (I created a custom app), and I can access various Fabrik forms using in-app navigation without any issues.
 
I'll briefly show you how to create a pwa.
1) create two files in the main root
manifest.json
Code:
{
  "name": "My Fabrik Site",
  "short_name": "MyApp",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "description": "Description for PWA.",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/images/icona.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icona.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
   "lang": "it"
}
service-worker.js

Code:
self.addEventListener('install', function(event) {});
self.addEventListener('activate', function(event) {});


for extreme simplicity of this "guide".
Assuming you are also using the helix ultimate template.
I set in the template settings, in the custom code:
Before </head>
Code:
<link rel="manifest" href="/manifest.json">

after body:

Code:
<script>
<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js')
    .catch(function(error) {});
  });
}
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;

    const installButton = document.createElement('button');
    installButton.innerText = 'Installa App';
    installButton.id = 'install-button';
    document.body.appendChild(installButton);

    installButton.addEventListener('click', () => {
        installButton.style.display = 'none';
        deferredPrompt.prompt();
        deferredPrompt.userChoice.then((choiceResult) => {
            deferredPrompt = null;
        });
    });
});
</script>

in my css (it will show a button on the bottom right install app):

Code:
#install-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.3s;
}

#install-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

#install-button:active {
    transform: translateY(0);
}
You now have your pwa installable on your device.
Try it from your smartphone, remembering to clear the cache correctly and to be in normal mode. not incognito


I really provided a very basic example for implementation.
You can also change the behavior of the icon (when installed) for example if held down (see wathsapp) you can set custom links.
You can also implement push notification sending.
As well as customizing various settings, including cash, offline-mode.
And much more.
Bow you can see how fabrik behaves in your pwa
What do you think?
 
Last edited:
Back
Top