MailWizz into a Progressive web app

There is a hook, see https://hooks-docs.mailwizz.com/actions.php?keyword=after_opening_body_tag which you can use:
Code:
<?php

Yii::app()->hooks->addAction('after_opening_body_tag', function(){
?>

<script>....</script>

<?php
});
Add that into apps/init-custom.php and it will be okay on upgrades as well.
Thank you!
it doesn't work the way i would like, i don't know if this is because the code is not placed in the right place (it should be in the header of the page ~/customer/guest/index) or if it is is because the linked files are also not placed in the right place (I put them in the root of the MailWizz installation but maybe they should be somewhere else?).
 

Attachments

  • Screen Shot 2021-08-19 at 10.34.09.png
    Screen Shot 2021-08-19 at 10.34.09.png
    147.9 KB · Views: 16
Well, you do have some local files, you'll need to link them using an absolute url not a relative one.
So you can put that folder from the right in your image in the document root where mailwizz is installed, say in a folder called pwa, next to the apps folder for instance.
Then in the hook, when you need to add those tags, put absolute urls to the resources, i.s: instead of pwa-custom.js use https://www.your-mailwizz-app.com/pwa/pwa-custom.js
 
Hey @twisted1919
I'm failing to get my manifest detected
Screen Shot 2022-01-30 at 19.55.53.png
the proposed hook seems fine for SW but for the Manifest,
Screen Shot 2022-01-30 at 19.51.38.png


it seems it needs to be located in the <head> for it to work.

Screen Shot 2022-01-30 at 19.57.04.png

Is there a hook to place this in the <head> rather than the <body> please?
 
it seems it needs to be located in the <head> for it to work.
You could do a trick like this:
Code:
Yii::app()->hooks->addFilter('register_styles', function(CList $styles){
    Yii::app()->clientScript->registerLinkTag('manifest', '', 'https://www.whatever/manifest');
    
    return $styles;
});
 
Hey Cristian
You could do a trick like this:
it works wonderfully

And I'm almost there, according to my tests on Chrome and iPhone, the PWA installs and is functional (afterwards, I'll do a tutorial here to help those who want to achieve this too and who are newbie like me).

I just have an icon and splash screen problem and to solve it I still have to add code in the <head>, some <link> but also <meta> like:

HTML:
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">

<link rel="apple-touch-icon" sizes="192x192" href="/pwa/images/ios/192.png">
<link rel="apple-touch-icon" sizes="512x512" href="/pwa/images/ios/512.png">

<link href="/pwa/images/ios/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/pwa/images/ios/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

Thank you for your precious help!
 
You can add them in the same code:
Code:
Yii::app()->hooks->addFilter('register_styles', function(CList $styles){
    Yii::app()->clientScript->registerLinkTag('apple-touch-startup-image', '', 'https://www.whatever/xxx.png');
    Yii::app()->clientScript->registerMetaTag('yes', 'mobile-web-app-capable');
    
    return $styles;
});
Here you can read more:
Meta tag: https://www.yiiframework.com/doc/api/1.1/CClientScript#registerMetaTag-detail
Link tag: https://www.yiiframework.com/doc/api/1.1/CClientScript#registerLinkTag-detail
 
Hello everyone, as promised I offer you my research and work to make MailWizz installable as a Progressive Web App (PWA) on computer, smartphone or tablet.

In zip file in attachment you will find a readme.md, here its content:

## 1 Generate icon and splash screen images with a service like:
(see https://pwastarter.com/ too)

## 2 Customize the domain name, nickname of the application and the absolute URLs to the different images in the different files

## 3 Place the "pwa-sw.js", "pwa-manifest.json" files and the "pwa" folder at the root of your MW installation, copy/paste the modified code if the file exists or upload the "init-custom.php" file in the folder native "apps"

## References




## Useful tools
https://www.textfixerfr.com/html/encodeur-de-caracteres-html.php
https://jsonformatter.curiousconcept.com/

Enjoy

PS: If someone more experienced than me in coding wants to improve these files (especially the pwa-sw.js), let's share
 

Attachments

  • pwa-master_2022-02-01-10-38-24.zip
    8.7 KB · Views: 1
Hey there,
I notice that my service worker to allow users to install MailWizz as a PWA is loading to all pages. Is my following code ok if I want the service worker to only load on the user login page please?
PHP:
Yii::app()->hooks->addAction('after_opening_body_tag', function () {
    if (Yii::app()->controller->route === 'customer/guest/index') {
        ?>
        <script type="text/javascript" src="https://app.monsite.fr/pwa-sw.js"></script>
        <script>
            if ("serviceWorker" in navigator) {
                navigator.serviceWorker.register('https://app.monsite.fr/pwa-sw.js')
                    .then(function(registration) {
                        console.log("ServiceWorker registration successful with scope: ", registration.scope);
                    }).catch(function(err) {
                        console.log("ServiceWorker registration failed: ", err);
                    });
            }
        </script>
        <?php
    }
});

Thank you for your help!
@twisted1919.1
 
Thank you @twisted1919.1!

Now I would like to do the same with the manifest and the splash screens, so that the user can only really install MailWizz as a PWA from their login page and the other pages of the application are not overloaded with "useless files". I tried the conditions already mentioned but I get 500 errors in front, can I also have help to condition this:

PHP:
Yii::app()->hooks->addFilter('register_styles', function(CList $styles){   
    Yii::app()->clientScript->registerLinkTag('manifest', '', '/pwa-manifest.json');
    Yii::app()->clientScript->registerLinkTag('apple-touch-icon', '', '/pwa/images/ios/ios-appicon-120-120.png', '', ['sizes'=>'120x120']);
    
    return $styles;
});
 
That looks correct, enable debug to see why you get the 500 error ;)
I'm sorry, I made myself misunderstood, the code mentioned is my original code without the "if" condition, and I would need help to add this condition so that the manifest and the splash screens only load on the customer's login page. It is clearer ?
I tried this:
Code:
Yii::app()->hooks->addFilter('register_styles', function(CList $styles){   
    if (apps()->isAppName('customer') && controller()->getRoute() === 'guest/index') {
        Yii::app()->clientScript->registerLinkTag('manifest', '', '/pwa-manifest.json');
        Yii::app()->clientScript->registerLinkTag('apple-touch-icon', '', '/pwa/images/ios/ios-appicon-120-120.png', '', ['sizes'=>'120x120']);
    
    return $styles;
    }
});
And it is with this version that I have 500 errors
 
Try this:
Code:
Yii::app()->hooks->addFilter('register_styles', function(CList $styles){   
    if (apps()->isAppName('customer') && app()->getController()->getRoute() === 'guest/index') {
        Yii::app()->clientScript->registerLinkTag('manifest', '', '/pwa-manifest.json');
        Yii::app()->clientScript->registerLinkTag('apple-touch-icon', '', '/pwa/images/ios/ios-appicon-120-120.png', '', ['sizes'=>'120x120']);
    }
    return $styles;
});
 
Back
Top