How to remove "No Network" alert in my PWA on iOS - javascript

When my iOS device is not connected to a network, the alert below pops up in my Progressive Web App when opened. How can I remove this to give my PWA a more native feel?

You may check the web app manifest component found in this documentation.
When connecting to a network for the first time, a web browser reads the manifest file, downloads the resources given and stores them locally. Then, if there is no network connection, the browser uses the local cache to render the web app while offline.
Note: Do not confuse this with the older .manifest file used by AppCache. PWAs should use the service worker to implement caching and the web app manifest to enable "add to homescreen" and push messaging.
Here are some additional links for reference:
Service Worker: handle requests when offline to send them when online
Offline web application using beforeunload event
Progressive Web App: offline cache does not work on Android, it works on Chrome dev Tools

Related

Possibility of running a local network server from the browser

This question is about the basic feasibility of this project but you are welcome to recommend ideas on how it could be done. I would like to create a hosted Java web application that creates a Server in the local network of the device.
For example: You can go to example.com in your Browser and start the application that creates a server in the local network of the device (Windows-PC). Other devices (Android) can connect to the server (UDP) with an installed Android-App.
Is this concept possible? I am afraid browser security renders this level of access impossible..
As others have pointed out it is not possible.
I will instead choose a local Java application that has to be installed.

Can the Web NFC api be used in Progressive Web Applications?

I need to implement NFC (near field communication) in a PWA (progressive webapplication)
Every browser I have tested (Chrome MacOSX, Safari MacOSX, Safari iOS, Chrome for android) does not include the navigator.nfc object in navigator and it seems impossible to make use of this API: https://w3c.github.io/web-nfc/#conformance.
Is it possible to use NFC in any way in a PWA? Or do I have to develop a native application for this functionality?
Web NFC API is available only in Chrome for Android and that too when a flag is enabled(try about:flags) enabled.
Unless you are targeting your app for some internal corporate app where you can set the flag in all targeted users browser, I would recommend go with native code or wrapper(cordova or have a native app send in the details via web sockets)
This API is not making much progress since 2015 and so you can expect no magic to happen anytime soon. So don't rely on this API if you are targeting this for a critical app, especially when you cant control the end users browser settings.
From chrome 81 you can use NFC
https://blog.chromium.org/2020/02/chrome-81-near-field-communications.html

Cannot access the web site from a mobile device, using the new URL shown on web server

I have build my first web application following the code labs example "Your First Progressive Web App"
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/
Everything works well, but when I try to access the web server from my mobile device through the local network, I can not see the web app open in my android device.
I have checked the web server IP(192.168.0.161:8887) and my android device IP(192.168.0.231) are in the same local network; also I have selected "accessible on local network" in chrome web server.
Could you please tell what are the possible reasons cause this issue?
Thanks
This is a firewall issue. When I turn off the firewall, I can access the web server from my android phone.
Thanks!

Communicate between a Web page/app and a Browser Extension

I have a Web App and an associated Browser Extension and I need a way of communication information from the Web App to the Extension when an action occurs in the Web App.
Chrome has runtime.onMessageExternal() etc. which lets your app or extension receive and respond to messages from regular web pages. ref: https://developer.chrome.com/extensions/messaging
This should meet my needs, however it isn't available in Firefox and I need a cross browser solution.
Any suggestions?
You can do this with content script. Messaging from content script support by FF from version 50.

Possible to use Google Play Game Services from origin file:///android_asset

Crosswalk is an excellent wrapper to allow HTML5 games to be packaged as native Android apps. You upload your HTML, JS and CSS files and it wraps it with Chromium for Android and builds an APK. It has full GPU support including WebGL, making it far better than PhoneGap.
I want to use the Google Play Game Services web API in a Crosswalk app, but it appears Crosswalk runs from the origin file:///android_asset. E.g. the main page will run from file:///android_asset/www/index.html.
It does not appear possible to allow Crosswalk apps to use the web API. The API console rejects file:///android_asset as an "invalid URI". Is there any workaround to this? Crosswalk is the only sensible way to publish HTML5 games as native apps on Android, and it's a shame if we can't use Google Play services!
The JavaScript code is limited by the same-origin policy, so you cannot access the Google play services(https://www.googleapis.com/*) from the origin file:///android_asset.
But Crosswalk has provided the solution for the cross-origin xhr, you can easily achieve that via adding the following configure to the manifest of your app.
{
...
"xwalk_hosts": [
"http://www.host-you-want-to-go.com/*"
],
...
}
More details in wiki.
You must try it in the latest beta version of Crosswalk, 6.35.131.5.
You can also ask the help about Crosswalk on the crosswalk-help#lists.crosswalk-project.org, in which you could get more faster response.
I wrote a simple example that accesses google play game services with cordova and crosswalk. See https://github.com/rscohn2/phonegapi
With cordova, you can create a browser window for the login, and give http://localhost as the redirect URI. After a successful login, it redirects to http://localhost,
which is not present. The app detects that the browser window has redirected. It reads the access code, then closes the window before the user can see the error.

Categories