Web App PWA for Codeigniter

Step 1 : Your website must be running on a secure domain (https).

Step 2 : Use realfavicongenerator.net to generate all the necessary icons that will be used on different mobile devices, this platform will also generate the manifest.json file that you will need later.

Step 3 : Upload all icons and manifest.json from Step 2 above to file path assets/admin/images

Step 4 : Edit manifest.json file become look like :
{ "name": "Do Track", "short_name": "DoTrack", "start_url": "/index.php/secure/track_zc.html", "icons": [ { "src": "/assets/admin/images/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/assets/admin/images/android-chrome-384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "any maskable" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone", "prefer_related_applications": false }

Step 5 : Application/Views/secure/inc_header.php file add the following code that generated from Step 2 just now :
<link rel="icon" sizes="192x192" href="<?php echo $this->common->auto_version(base_url('assets/admin/images/android-chrome-192x192.png')); ?>">  <link rel="icon" sizes="128x128" href="<?php echo $this->common->auto_version(base_url('assets/admin/images/android-chrome-192x192.png')); ?>"> <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $this->common->auto_version(base_url('assets/admin/images/apple-touch-icon.png')); ?>"> <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $this->common->auto_version(base_url('assets/admin/images/favicon-32x32.png')); ?>"> <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $this->common->auto_version(base_url('assets/admin/images/favicon-16x16.png')); ?>"> <link rel="manifest" href="<?php echo $this->common->auto_version(base_url('assets/admin/images/site.webmanifest')); ?>">

Step 6 : Download upup.min.js file from https://github.com/TalAter/UpUp/raw/master/dist/upup.zip

Step 7 : Upload upup.min.js and upup.sw.min.js files to folder directory assets/admin/js.

Step 8 : Edit upup.sw.min.js file, press control + F find keyword "sourceMappingURL". Edit it become //# sourceMappingURL=/assets/admin/js/upup.sw.min.js.map

Step 9 : Edit upup.min.js file, press control + F find keyword "sourceMappingURL". Edit it become //# sourceMappingURL=/assets/admin/js/upup.sw.min.js.map

Step 10 : Edit upup.min.js file, press control + F find keyword "service-worker-url". Edit it become service-worker-url":"/assets/admin/js/upup.sw.min.js

Step 10 : Application/Views/secure/inc_footer.php add the following code :
<script src="<?php echo $this->common->auto_version(base_url('assets/admin/js/upup.min.js')); ?>"></script>

Step 11 : Edit the php page that you want PWA open at first page. (For example, My case Application/Views/Secure/track_wk.php) add the following code
<script> UpUp.start({ 'content': '<html><body><h1>Top Hotels in Rome</h1><p>Villa Domus</p><p>Hotel Trivelli</p></body></html>' }); </script>

Step 12 : Check if any bug by using the following 2 difference methods :
a) google chrome browser open your website and right click on page and select "Inspect". Then follow instruction on the screenshot below :

b) Using google chrome browser plugin "Lighthouse" or 3rd party website "WebPagetest Lighthouse Test" to check if any bug or error : https://pwa-for-wp.com/docs/article/how-to-check-pwa-is-working-or-not/

Posted by Zac1987 on 05 May, 2021

Web App PWA for Codeigniter

0 comments

Search

google adsense

Donation

Flat Counter

google ads