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.

How to Download

Joomla PWA Extension User Guide prepared to help you about installation and setup
www.pwaextension.com www.pwaextension.com

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:
pakeydev said:
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. :)
Click to expand...
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:
@dimoss do you mind if I ask: did you get the Notifications working? I tried the extension after your post and got it working quickly but haven't been able to get the Notifications (via OneSignal) working, despite following the instructions. I posted two support tickets on their website but one month later, I still have no reply.
 
Stevebenson223 said:
@dimoss do you mind if I ask: did you get the Notifications working? I tried the extension after your post and got it working quickly but haven't been able to get the Notifications (via OneSignal) working, despite following the instructions. I posted two support tickets on their website but one month later, I still have no reply.
Click to expand...
@Stevebenson223 I haven't used the push notifications so i don't know if it's working or not. Their support is not good. Although the extension worked fine I have a problem with the Preloader. Sent ticket, no reply.
 
I recall encountering similar issue with OneSignal. The solution involves creating a separate folder for all the OneSignal files that need to be uploaded to the public_html directory. The reason is to avoid conflicts with another .js file. Works fine for me after that :)
 
Have you also updated the folder path in the Web Configuration on One Signal?

1731243008780.png
 
Hi @pakeydev
I can't access those settings in OneSignal. It may be because the app says to use the Custom Code option in Web Configuration. However, the service worker paths you show are the recommended setup in OneSignal so I'm sure it will be correct.
My problem seems to be the subscription option isn't working. I've tried subscribing several times from laptop and mobile but OneSignal still shows I have zero subscribers.
I think I'm going to give up on this app until I have more time (ha!) to investigate.
Thanks.
 
You must log in or register to reply here.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade

    • Members online

    Total: 73 (members: 1, guests: 72)
    Back
    Top