Add to home popup

Tô do this add to home popup thing I need to add some code to my page

I don’t know much about child themes and etc
Do I need a child theme to add this code and then this will be preserved in case of update?

>>
I found this detailed article on Medium. How to add “Add to Homescreen” popup in web app

Step 1: Create a blank service-worker.js file in your root folder. And put the below code in your html page, before closing tag.

<script> if (‘serviceWorker’ in navigator) { console.log(“Will the service worker register?”); navigator.serviceWorker.register(‘service-worker.js’) .then(function(reg){ console.log(“Yes, it did.”); }).catch(function(err) { console.log(“No it didn’t. This happened:”, err) }); } </script>

Step 2: Create manifest file create manifest.json file in root folder. Add below tag in your html page header section.

<link rel=”manifest” href=”/manifest.json”>

Step 3: Add configurations in manifest file Here is the configurations sample.

{ “short_name”: “BetaPage”, “name”: “BetaPage”, “theme_color”: “#4A90E2”, “background_color”: “#F7F8F9”, “display”: “standalone”, “icons”: [ { “src”: “assets/icons/launcher-icon-1x.png”, “type”: “image/png”, “sizes”: “48×48” }, { “src”: “assets/icons/launcher-icon-2x.png”, “type”: “image/png”, “sizes”: “96×96” }, { “src”: “assets/icons/launcher-icon-3x.png”, “type”: “image/png”, “sizes”: “144×144” }, { “src”: “assets/icons/launcher-icon-4x.png”, “type”: “image/png”, “sizes”: “192×192” } ], “start_url”: “/?utm_source=launcher” }

In the above code, you can replace your own values.

short_name: This name is visible on Homescreen along app icon.

icons: Set different size icons for different screen sizes

theme_color: This color code will change the color of addresser in chrome.

background_color: Set background color for splash screen.

name : Full name of the application.

You can validate your manifest here at https://manifest-validator.appspot.co