Osclass Support Forums
Osclass theme support => Veronika Osclass Responsive Theme => Topic started by: Kprageeth on February 26, 2021, 11:56:09 AM
-
Hello ,
Anyone can tell me how to link the manifest.json file in the Veronika theme
-
I'm like you
Search for it
I found this solution but I couldn't get it to work
If it works for you, tell me the solution
Thanks
osclass-progressive-web-app
Download Example manifest.json in here
Edit manifest.json with code editor like Visual studio code or Sublime (edit text in red box like in example and replace text with your App name/ site name )
Upload manifest.json to oc-content/ themes/ rival/
Generate your favicon in here https://www.favicon-generator.org/
Rename 7 favicon with name 36×36.png, 48×48.png, 72×72.png, 96×96.png, 144×144.png, 192×192.png, 512×512.png
Upload all favicon images to oc-content/ themes/ rival/ images (if use rival theme)
Open Cpanel >> public_html/oc-content/ themes/ rival/ common/head.php (if use rival theme)
Add this code <link rel=”manifest” href=”<?php echo osc_current_web_theme_url(‘manifest.json’); ?>”>
Save head.php and test reload your site
-
I am not sure if that manifest file should not be moved into root directory
-
I found the solution
Create file manifest.json
It is placed anywhere you want it and the app icons
{
"short_name": "osclass",
"name": "osclass",
"lang": "en",
"description": "osclas..........",
"background_color": "#00aae7",
"theme_color": "#00aae7",
"dir": "ltr",
"display": "standalone",
"orientation": "any",
"icons": [
{
"src": "/android-icon-192x192-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/apple-icon-180x180-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "180x180"
},
{
"src": "/apple-icon-152x152-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "152x152"
},
{
"src": "/apple-icon-144x144-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/apple-icon-120x120-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "120x120"
},
{
"src": "/apple-icon-114x114-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "114x114"
},
{
"src": "/favicon-96x96-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/apple-icon-76x76-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "76x76"
},
{
"src": "/apple-icon-72x72-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "72x72"
},
{
"src": "/apple-icon-60x60-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "60x60"
},
{
"src": "/apple-icon-57x57-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "57x57"
},
{
"src": "/favicon-32x32-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "32x32"
},
{
"src": "/favicon-16x16-seochecker-manifest-325.jpg",
"type": "image/png",
"sizes": "16x16"
}
],
"prefer_related_applications": false
}
It is placed where you want it with folder icons and manifest.json
Then the app.js file
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
var div = document.querySelector('.add-to');
var button = document.querySelector('.add-to-btn');
div.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
div.style.display = 'block';
button.addEventListener('click', async () => {
// Hide the app provided install promotion
div.style.display = 'block';
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt, and can't use it again, throw it away
deferredPrompt = null;
});
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
Put this under the head
<link rel="manifest" href="<?php echo osc_current_web_theme_url('/public/manifest.json'); ?>">
<!-- ios support -->
<link rel="apple-touch-icon" href="<?php echo osc_current_web_theme_url('/public/logo-72x72.png') ; ?>" />
<link rel="apple-touch-icon" href="<?php echo osc_current_web_theme_url('/public/logo-96x96.png') ; ?>" />
<link rel="apple-touch-icon" href="<?php echo osc_current_web_theme_url('/public/logo-128x128.png') ; ?>" />
<link rel="apple-touch-icon" href="<?php echo osc_current_web_theme_url('/public/logo-144x144.png') ; ?>" />
<link rel="apple-touch-icon" href="<?php echo osc_current_web_theme_url('/public/logo-152x152.png') ; ?>" />
<link rel="apple-touch-icon" href="<?php echo osc_current_web_theme_url('/public/logo-192x192.png') ; ?>" />
<link rel="apple-touch-icon" href="<?php echo osc_current_web_theme_url('/public/logo-384x384.png') ; ?>" />
<link rel="apple-touch-icon" href="<?php echo osc_current_web_theme_url('/public/logo-512x512.png') ; ?>" />
<meta name="apple-mobile-web-app-status-bar" content="#07698A" />
<meta name="theme-color" content="#07698A" />
Then the sw.js . file
It is placed in the root of the site
self.addEventListener('fetch', function(event) {});
And in the end, you can put the button wherever you want just to add
<div class="add-to"><button class="add-to-btn"><?php _e('App Web', 'veronika'); ?></button>
</div>
Then do a test from Lighthouse in Google Check
I wish from our supervisor
If there are errors
We do not miss you
I hope it benefits everyone :) ;)
-
@7ala
Nice guide ;)