Tweet
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
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.
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
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
P.S You may need to edit .htaccess file in your root folder and add the following exception:
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.
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]
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.
Comment