Deploy on remote server

[BanGinu]

When i run the app from localhost everything works fin, but when i upload it to remote server no the javascript didn't work son no service worker or pwa.
why?

[umluizlima]

Hi, @sary-dev ! Thanks for sharing this issue.

Can you explain me a little more about how you are deploying it? Are you using Heroku? Or another server? On what browser are you accessing it?

If it is published, could you share the url so that I can take a look at it?

[BanGinu]

It is normal VPS (debain 9)
i uploaded the project and follow your instructions with pipenv ..etc

"GET / HTTP/1.1" 200 -
"GET /robots.txt HTTP/1.1" 404 -
"GET /js/app.js HTTP/1.1" 200 -
"GET /css/style.css HTTP/1.1" 200 -
"GET /images/flasks.jpg HTTP/1.1" 200 -
"GET /favicon.ico HTTP/1.1" 200 -
"GET / HTTP/1.1" 200 -
"GET /favicon.ico HTTP/1.1" 200 -
"GET / HTTP/1.1" 200 -

i got this only when you access the link, the app.js doesn't call sw.js
also when if i write
`<script type="text/javascript">
(function() {
if('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
console.log('Service Worker Registered');
return registration;
})
.catch(function(err) {
console.error('Unable to register service worker.', err);
});
navigator.serviceWorker.ready.then(function(registration) {
console.log('Service Worker Ready');
});
});
}
})();

let deferredPrompt;
const btnAdd = document.querySelector('#btnAdd');

window.addEventListener('beforeinstallprompt', (e) => {
console.log('beforeinstallprompt event fired');
e.preventDefault();
deferredPrompt = e;
btnAdd.style.visibility = 'visible';
});

btnAdd.addEventListener('click', (e) => {
btnAdd.style.visibility = 'hidden';
deferredPrompt.prompt();
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});

window.addEventListener('appinstalled', (evt) => {
app.logEvent('app', 'installed');
});
</script>
`
It just print the javascript in footer
i run it with this
"pipenv run flask run --host=0.0.0.0 --port=80"
someone trying to hack the server Nah!

[umluizlima]

It seems that when run with "--host=0.0.0.0 --port=80" the property serviceWorker does not show up in the navigator, which then invalidates the conditional statement at the beginning of app.js and does not register the sw.js

I'm going to take a deeper look at it and try to come up with a solution ASAP

[BanGinu]

Thank you

[umluizlima]

Hi, @sary-dev !

According to the Service Workers specification, available here, they must be hosted over https (or on localhost for development purposes). To my understanding, that explains why when we try to serve it over host=0.0.0.0 the web browser does not make the serviceWorker property available under navigator.

So, if you wish to serve the application on a public address, I suggest to use either Heroku or nGrok, which are simple to get up and running.

I hope this clears the issue. Thank you very much for sharing this problem, as I did not know this condition existed.

I've also added this explanation to the README, along with nGrok usage commands.