MailWizz into a Progressive web app

Ludovic

Member
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: 10

twisted1919

Administrator
Staff member
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

Member
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?
 

twisted1919

Administrator
Staff member
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

Member
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!
 

twisted1919

Administrator
Staff member
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

Member
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
Top