Just open your app.js file (_next/static/chunks/pages/app(somestring).js and do a cntrl F search for “react native webview does not support this platform.”
The truth is the runtime does support the PWA Platform, so just delete the warning string, leaving the quotes; and you can delete the entire function, if you want.
You can see how well the web built functions as a PWA her, with custom web component for install prompt similar to twitter and instagram, and you can add native app install prompts in the same way.
In fact, the app functions much better as a pwa, and plugins along with google workbox can be used to package the app for the app stores, which will get rid of all the warnings regarding bad sdk and bad webRTC built into native app.
Egress Windows, windows well, covers, and ladders by Jackson Egress Windows. Use Egress Windows App and join our small business network!
1 Like
@Daniel_Perley1 , that’s cool! How is it that you use the hosted webapp as a PWA? Can it become a browser extension of sorts? Please enlighten me! Thanks in advance!
it works on desktop as well. one moment i will past post
what i did was I created a backdoor into loading scripts or modules like this first, to change theme-color. I later used the same js file to load any scripts I want, including sw.js, js to insert manifest link, js for calling native capacitor plugins, notifications, and pretty much anything appgyver will not allow you to do. Here is how to add scripts to the head section of your html in order to apply a custom theme color, call independent scripts, and even create a pwa
for example, you can inject scripts into the head like this (pwa prompt, etc). Just include a script tag
<script src="themeScript.js">
…immediately before the closing tag of each html file.
document.addEventListener('DOMContentLoaded', function() {
async function updateThemeColor(color) {
var metaTag = document.querySelector('meta[name="theme-color"]');
metaTag.setAttribute('content', color);
console.log('color ' + color + ' forced');
console.log(metaTag);
}
async function handleDarkMode() {
var darkMode = localStorage.getItem('darkMode');
var currentUrl = window.location.pathname;
if (darkMode === 'true') {
if (currentUrl === "/") {
updateThemeColor('#050914');
console.log('darkMode - homePage');
} else if (currentUrl === "/page.Page3.html") {
updateThemeColor('#050914');
console.log('darkMode - homePage');
} else if (currentUrl === "/m-page.Page7.html") {
updateThemeColor('#000000');
console.log('darkMode - bookPage');
} else if (currentUrl === "/page.Page1.html") {
updateThemeColor('#121212');
console.log('greyMode - feedPage');
} else {
updateThemeColor('#121212');
console.log('darkMode - default');
}
} else {
if (currentUrl === "/") {
updateThemeColor('#2682de');
console.log('lightMode - homePage');
} else if (currentUrl === "/page.Page3.html") {
updateThemeColor('#2682de');
console.log('lightMode - homePage');
} else if (currentUrl === "/m-page.Page7.html") {
updateThemeColor('#000000');
console.log('lightMode - bookPage');
} else if (currentUrl === "/page.Page1.html") {
updateThemeColor('#ffffff');
console.log('lightMode - feeedPage');
} else {
updateThemeColor('#ffffff');
console.log('lightMode - default');
}
}
}
window.addEventListener('storage', function(event) {
if (event.storageArea === localStorage && event.key === 'darkMode') {
handleDarkMode();
console.log('storage');
}
});
});
function addManifestLink() {
var link = document.createElement('link');
link.rel = 'manifest';
link.href = '/manifest.json';
document.head.appendChild(link);
}
addManifestLink();
function addPwaInstallPromptPckg() {
var script = document.createElement('script');
script.src = 'https://unpkg.com/@khmyznikov/pwa-install@0.2.2/dist/es/pwa-install.es.js?module';
script.type = 'module'; // Set the script type as module
document.body.appendChild(script);
}
addPwaInstallPromptPckg();
function addPwaInstallElement() {
var pwaInstallElement = document.createElement('pwa-install');
// pwaInstallElement.setAttribute('manual-apple', 'true');
// pwaInstallElement.setAttribute('manual-chrome', 'true');
// pwaInstallElement.setAttribute('disable-chrome', 'false');
// pwaInstallElement.setAttribute('install-description', 'Install Magicbooks.io Instant App!');
// pwaInstallElement.setAttribute('disable-install-description', 'true');
// pwaInstallElement.setAttribute('manifest-url', 'manifest.json');
// pwaInstallElement.setAttribute('name', 'Magicbooks.io');
// pwaInstallElement.setAttribute('description', 'Create amazing digital books with music!');
// pwaInstallElement.setAttribute('icon', '/icon.png');
document.body.appendChild(pwaInstallElement);
}
addPwaInstallElement();
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
console.log('Service worker registered with scope:', registration.scope);
})
.catch(function(error) {
console.log('Service worker registration failed:', error);
});
});
}
var pwaInstall = document.getElementsByTagName('pwa-install')[0];
pwaInstall.addEventListener('pwa-install-success-event', (event) => {console.log(event.detail.message)});
window.addEventListener('popstate', function () {
const newParams = new URLSearchParams(window.location.search);
handleDarkMode();
});
1 Like
