ricrey Posted October 14, 2023 Share Posted October 14, 2023 (edited) Hello WHMCS Community! 🎉 Today, I'm thrilled to share with you a little guide on how to turn the **WHMCS 8** admin area into a **Progressive Web App (PWA)**, allowing it to be displayed in full screen and with a custom icon on mobile devices. ### 📁 File Structure - 📂 admin - 📄 sw.js - 📂 PWA - 📄 manifest.json - 🖼️ whmcs.png ### 🚀 Codes #### 1. **manifest.json** { "name": "WHMCS Admin PWA", "short_name": "WHMCS Admin", "description": "PWA for WHMCS Admin Area", "start_url": "/admin/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [ { "src": "/admin/PWA/whmcs.png", "sizes": "192x192", "type": "image/png" } ] } 2. sw.js self.addEventListener('install', function(event) { // PWA Installation }); self.addEventListener('fetch', function(event) { // Handle network requests }); 3. login.tpl Add the following lines inside the <head> tag of your login.tpl file. <link rel="manifest" href="/admin/PWA/manifest.json"> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/admin/sw.js') .then(function(registration) { console.log('Service Worker successfully registered:', registration); }) .catch(function(error) { console.log('Service Worker registration failed:', error); }); } </script> 🎁 Contribution I hope this little guide proves useful and enhances your experience using WHMCS on mobile devices. I'm eager to see how the community uses and possibly enhances this implementation! Edited October 14, 2023 by ricrey 3 Quote Link to comment Share on other sites More sharing options...
iKaros Posted October 15, 2023 Share Posted October 15, 2023 Thanks for sharing this with the community sir. Good weekend! 0 Quote Link to comment Share on other sites More sharing options...
Surc0uf Posted January 5 Share Posted January 5 Hello, Thanks a lot for sharing! Is it necessary for sw.js to be in the admin folder or is it possible to move it to the PWA folder (and of course adjust the code)? --> It's just to make the script simpler. It should also work for the customer area? I'm sure that @brian! could enhance this by doing an hook 😉 (and also use the folder admin name of the configuration.php) Thanks again for reporting this problem. That's very kind of you. 0 Quote Link to comment Share on other sites More sharing options...
Surc0uf Posted January 6 Share Posted January 6 So, to avoid update to erase login.tpl file mod, you can add this hook in includes/hooks and name it pwa_admin-area.php <?php add_hook('AdminAreaHeadOutput', 1, function($vars) { return <<<HTML <link rel="manifest" href="/admin/pwa/manifest.json"> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/admin/sw.js') .then(function(registration) { console.log('Service Worker successfully registered:', registration); }) .catch(function(error) { console.log('Service Worker registration failed:', error); }); } </script> HTML; }); 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.