Mobile & Desktop PWA App for your ESPO CRM

Hi,
we've made a Progressive Web Application for our espo crm, thats an installable mobile & desktop application,
so we will share the 'How to" with anybody how likes to have a similar app.

1. Create a new folder in your espo root folder and name it icon

2. Create an image png file 192px x 192px, name it 192x192.png and upload it in the previously created 'icon' folder.

3. Create an image png file 512px x 512px, name it 512x512.png and upload it in the previously created 'icon' folder.

4. Create a new file in your espo root folder, name it admin-sw.js and paste the code below:
*Replace: YOUR_APPLICATION_NAME with your own

Code:

self.addEventListener('install', function(e) {
e.waitUntil(
caches.open('YOUR_APPLICATION_NAME').then(function(cache) {
return cache.addAll([

]);
})
);
});

self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

5. Create a new file in your espo root folder, name it admin-manifest.webmanifest and paste the code below:
*Replace:YOUR_APPLICATION_NAME, A_SHORTER_NAME, your_domain.com/your_espo_root_folder, with your own.

Code:

{
"name": "YOUR_APPLICATION_NAME'",
"short_name": "A_SHORTER_NAME'",
"start_url": "https://your_domain.com/your_espo_root_folder",
"scope": "https://your_domain.com/your_espo_root_folder",
"icons": [
{
"src": "https://your_domain.com/your_espo_root_folder/icon/192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://your_domain.com/your_espo_root_folder/icon/512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"orientation": "portrait-primary",
"theme_color": "#303030",
"background_color": "#303030",
"display": "standalone"
}

6. Create a new file in your espo root folder, name it admin-index.js and paste the code below:
*Replace: your_domain.com/your_espo_root_folder with your own

Code:

if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("https://your_domain.com/your_espo_root_folder/admin-sw.js")
.then(serviceWorker => {
console.log("Service Worker registered: ", serviceWorker);
})
.catch(error => {
console.error("Error registering Admin Service Worker: ", error);
});
}

7. Go to your espo root folder > html edit file main.html and add the code below somewhere between the <head> </head> tags:
*Replace: your_domain.com/your_espo_root_folder with your own

Code:

<meta name="theme-color" content="#303030"/>
<script src="https://your_domain.com/your_espo_root_folder/admin-index.js" defer></script>
<link rel="manifest" href="https://your_domain.com/your_espo_root_folder/admin-manifest.webmanifest">
<link rel="apple-touch-icon"
href="https://your_domain.com/your_espo_root_folder/icon/512x512.png">

P.S You may need to edit .htaccess file in your root folder and add the following exception:

Code:

RewriteRule ^admin-index.js - [L]
RewriteRule ^admin-manifest.webmanifest - [L]
RewriteRule ^admin-sw.js - [L]
RewriteRule ^icon/ - [L]

Done!

After all visiting your espo installation you'll get notification to install your app on mobile or desktop on browser's address bar.
Hope you find it interesting and useful.

Leave a comment:

Leave a comment: