MailWizz into a Progressive web app

Ludovic · Aug 17, 2021

Hi there,
In order for my users to be able to install MailWizz on their mobile, I would need to inject a little piece of code into the header of their home page.
Could I have some help to be able to do this? Is it possible that it is not overwritten with each update?

Otherwise, has anyone experienced this extension https://codecanyon.net/item/weboox-convert-mailwizz-email-marketing-to-app-android/23073110 ? Is it working well?
Best regards,
Ludovic

twisted1919 · Aug 18, 2021

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.

Ludovic · Aug 19, 2021

twisted1919 said:
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?).

twisted1919 · Aug 19, 2021

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

Ludovic · Jan 30, 2022

Hey @twisted1919
I'm failing to get my manifest detected

the proposed hook seems fine for SW but for the Manifest,

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

Is there a hook to place this in the <head> rather than the <body> please?

twisted1919 · Jan 31, 2022

Ludovic said:
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;
});

Ludovic · Jan 31, 2022

Hey Cristian

twisted1919 said:
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!

twisted1919 · Jan 31, 2022

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

Ludovic · Feb 1, 2022

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:

Ape Tools: Don't Go Ape - Go Ape Tools. App Icon and Splashscreen Generator. Make your app happen.

apetools.webprofusion.com

(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

https://forum.mailwizz.com/threads/mailwizz-into-a-progressive-web-app.7757/

CClientScript | API Documentation for Yii 1.1

www.yiiframework.com

CClientScript | API Documentation for Yii 1.1

www.yiiframework.com

Applications web progressives | MDN

Les applications web progressives (ou progressive web applications en anglais, abrégées en PWAs) sont des applications web qui utilisent les service workers, les manifestes, et d'autres fonctionnalités de la plateforme web, avec l'amélioration progressive pour fournir aux utilisatrices et...

developer.mozilla.org

Designing Native-Like Progressive Web Apps For iOS

Seven small and actionable details to make your progressive web app more native-like on iOS.

dev.to

MDB Foundations - introduction

This beginner-friendly, example-based course will guide you through the essential knowledge of MDB ecosystem

mdbootstrap.com

How to Make a Progressive Web App From Your Existing Website

How to convert your existing website into a progressive web app. Use this guide for building successful PWAs.

blog.heroku.com

## 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

Ludovic · May 27, 2023

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

twisted1919 · May 29, 2023

You'll want:

Code:

if (apps()->isAppName('customer') && controller()->getRoute() === 'guest/index') {

Ludovic · May 29, 2023

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;
});

twisted1919 · May 29, 2023

That looks correct, enable debug to see why you get the 500 error

Ludovic · May 29, 2023

twisted1919 said:
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

twisted1919 · May 29, 2023

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;
});

Ludovic · May 29, 2023

I had no eyes in front of the holes

I'm ashamed, thank you for your patience, it worked!

MailWizz into a Progressive web app

Member

Administrator

Member

Attachments

Administrator

Member

Administrator

Member

Administrator

Member

Attachments

Member

Administrator

Member

Administrator

Member

Administrator

Member