Mobile App for IOS ?

[eymen-elkum]

Related topic:

https://forum.espocrm.com/forum/exte...-notifications

[abidoss]

Hello Talles, the PWA code works well in my development environment with HTTP, but it doesn't work in production with HTTPS. I don't know what the issue is.

[talles.amadeu]

Nishan Perera, as far as I'm concerned it doesn't give you the option for free push notifications. You would have to pay for the pro version. I think there's a version for about 30 dollars that you can generate ONE apk file where you have the option to use push notifications.The full pro version is about 99 dollars/year

[Nishan Perera]

Hello @talles,

This is an awesome option to go for mobile app. I went through the information given and also on PWA. with this APK convert is it including push notification for free ? my main point with the app is to get push notifications for mobile.

Does anyone did custom PWA development.

[esforim]

Awesome, going to give this a try.

[talles.amadeu]

esforim Sure, here it is

For the CSS file located in ESPOCRMLOCATION/client/css/espo/espo.css - Be careful when you update Espo to a newer version. You will have to redo this part everytime.

#footer-bar{
position:fixed;
bottom:0;
left:0;
right:0;
z-index:98;
background-color:rgba(74,100,146,.98);
box-shadow:0 -5px 10px 0 rgba(0,0,0,.06);
min-height:50px;
display:none;
text-align:center;
transition:all 350ms ease
}

#footer-bar a{
text-decoration:none;
color:#dfdfdf;
padding-top:12px;
position:relative;
flex:1 1 auto
}

#footer-bar a span{
position:relative;
z-index:2;
display:block;
font-size:10px;
font-weight:500;
opacity:.7;
font-family:roboto,sans-serif!important
}

#footer-bar a i{
font-size:18px;
position:relative;
z-index:2
}

#footer-bar .badge{
font-style:normal;
z-index:5;
top:0;
position:absolute;
margin-left:3px;
color:#fff!important;
width:18px;
text-align:center;
line-height:18px;
padding:0;
padding-left:0!important;
border-radius:18px;
margin-top:7px;
font-size:11px
}

@media screen and (max-width:767px){
#footer-bar{
display:flex;
}
}

Then you have to add a little bit of html in ESPOCRMLOCATION/client/res/templates/site/navbar.tpl - This one doesn't change on newer versions. Add these lines right at the top of the file. Right before the first <div>. For the center image I recommend a 55x55 svg file. PNG or JPG don't get to be so nice. Don't forget to change the href according to your need. It has to be like "/#link".

<div class="navbar navbar-inverse" role="navigation">
<div id="footer-bar" style="transform: translate(0px, 0px);">
<a href="/#Option1"><i class="fas fa-calendar-check"></i><span>Option 1</span></a>
<a href="/#Option 2"><i class="fas fa-building"></i><span>Option 2</span></a>
<a href="/"><img src="icon-center.svg" alt="Pradolux Icon" style="height:55px;margin-top: -24px;"></a>
<a href="/#Option 3"><i class="fas fa-file-invoice-dollar"></i><span>Option 3</span></a>
<a type="button" data-action="toggleCollapsable"><i class="fas fa-bars"></i><span>Menu</span></a>
</div>

Then, after everything is done, you can generate an APK for android smartphone with this tool https://websitetoapk.com/ - It's free and it's very handy.

For iOS users you can do this: https://www.macrumors.com/how-to/add...n-iphone-ipad/

[esforim]

Thanks talles, by any chance you can write a quick guide/tutorial on how you manage to get it to work with EspoCRM?

[talles.amadeu]

Yeah the score is pretty low, but I can't compain about its responsive functionalities. Here at company we use it as a PWA in smartphones and tablets and it works just fine. After I created that bottom menu it became even better.

[esforim]

Thank you. This is new.

I had a quick check and it doesn't seem the compatibility is high at the moment (score only 63). Look like I need to rely on their service/server to use it though (require sign-in).

This look quite interesting, it might be a good solution for people with no programming skill like me. Thank again.

Here is the report: https://lighthouse-dot-webdotdevsite...espocrm.com%2F

[talles.amadeu]

It's a Progressive Web App. Many companies are using it instead of a native app. You can read more about it here https://web.dev/progressive-web-apps/
It has many advantages over an actual app from the store. It's worth taking a look

[esforim]

Hi talles.amadeu but what is PWA? Never seen this App yet.

[talles.amadeu]

We use the PWA itself. It's very handy. I added a bottom menu, to make it look more like an app. People love it. I just couldn't make it work offline yet. Maybe some day in the near future

[peterberlin]

no registration possible (android)

[esforim]

you can use obicrmapp
ios : https://apps.apple.com/tr/app/obi-cr...latform=iphone
android: https://play.google.com/store/apps/d...rmmobileapp&hl

Can't seem to log in; keep getting login error/check internet connection. Using Android version.

Any one manage to log in or use it? I update the URL using the Setting button but no luck.

[obicrmapp]

you can use obicrmapp
ios : https://apps.apple.com/tr/app/obi-cr...latform=iphone
android: https://play.google.com/store/apps/d...rmmobileapp&hl