Osclass Support Forums

Osclass theme support => Veronika Osclass Responsive Theme => Topic started by: Kprageeth on February 26, 2021, 11:56:09 AM

Title: veronika theme manifest.json problem
Post 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
Title: Re: veronika theme manifest.json problem
Post by: 7ala on November 14, 2021, 08:59:14 AM
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

Title: Re: veronika theme manifest.json problem
Post by: MB Themes on November 14, 2021, 11:29:29 AM
I am not sure if that manifest file should not be moved into root directory
Title: Re: veronika theme manifest.json problem
Post by: 7ala on December 25, 2021, 03:23:06 PM
I found the solution
Create file manifest.json

It is placed anywhere you want it and the app icons

Code: [Select]
{
    "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

Code: [Select]
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

Code: [Select]
<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

Code: [Select]
self.addEventListener('fetch', function(event) {});
And in the end, you can put the button wherever you want just to add

Code: [Select]
<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 :) ;)
Title: Re: veronika theme manifest.json problem
Post by: MB Themes on December 25, 2021, 06:09:21 PM
@7ala
Nice guide  ;)