PWA - How to check for updates? - javascript

I have a progressive web app which works as intended.
But now I want to know how to check if the site has changed (if the user is online) so the user gets the newest version.
Right now I need to hard reload or wait till the service worker does this automatically.
I've checked many sites including
https://developers.google.com/web/tools/workbox/modules/workbox-build#full_generatesw_config
but could not find an answer.
How can I archive that? E.g using navigator.serviceWorker.

Related

How to handle inconsistent service worker version during rollout?

If a user visit the website on the first time, the browser would download index.html first, and then register the service worker.
But what if we roll out a new version right after the user gets the index.html, but before fetching the server-worker.js? The user would get a server-worker.js whose version doesn't match the index.html.
The only solution I can think of is that stop claiming clients automatically if we find the versions mismatch. Is there any better solution to handle this situation?

Handling first time users in react-native

Is there any configuration in react-navigation for screens I only want to display once during the life time of the app? For instance, once the app is installed for the first time, I want the help screen to appear.
If no configuration is available, then what is the best way to do it? My idea is to save a variable locally and set it once the help screen has been displayed. Once the user opens the app again this variable will be checked and based on the that the next screen will appear. The problem here is that if the user erased the app data (cache and all) then the help screen will appear again even if he is not a first time user.
Any suggestions?
People change their mobiles and sell the old ones. A new user might install the same application on the same mobile but that user should also see the help page. You can achieve this using 2 methods, one would be server based and one would be local mobile based.
1) Server Based
When the user registers or log-ins for the first time show the help page and store that the user has seen the help page on your server. Next time the user reinstalls the application on a new device or the same device check for that information and do not show the help page.
2) Local Based
Use React Native's AsyncStorage and mark the user as help seen. When the user logs-out of the application make sure to remove that key from AsyncStore so that a new user can see the help page.
My thoughts would be you use the local app based method and let the user see the help page everytime they clear their app data or reinstall the application because features change and you might also change the help page in future. So it is better to let the user see it more than once given that you give the ability to skip the help page as well :)
Using AsyncStorage is probably the best option since it will store data locally on the device and persist between sessions. However, AsyncStorage data will be erased if the user uninstalls an app.
You can persist data between app installs on iOS by using the Keychain, accessible in React Native via 3rd party libraries (https://github.com/oblador/react-native-keychain)
I don't believe there is any way to persist data between app installs on Android.

Getting camera and geolocation permission ahead of time

I'm building a web-app that uses the device's camera and location services. The browser (I'm sticking to Chrome for now) asks the user for permission to do so on the page where the service is used.
I want the interface to be able to ask for permission at an early stage in the workflow so the pop-up dialogs don't come up during the use of the app. I know they would go away after the first visit to a page, but I want to avoid it the first time too.
Javascript is pretty much the only tool I know how to use, and I know each page has a separate Javascript execution context, so I can't get references to the objects on one page and hand them over to another.
So is there a way that will work? Maybe I need to learn some other technology?
If you need to do it in the browser, then I would suggest creating a sort of initialization page before going to the actual app page.
In the ini page you can call all permissions and download+cache all needed app scripts and also validate which permissions were accepted and not. Kinda something like when using GMail you go through their ini page first before getting to the actual GMail ui.
Once the ini page has completely loaded simply redirect to the actual app.
If you want to do it outside the browser and still use the same web technologies, take a look at Electron or NW.js.
Both tools above lets you build cross platform desktop apps with web technologies. Things like asking for camera and geolocation can be done without user permission (as I recall. not sure)

iphone, uiwebview with JS (google maps API)

two question for you:
reading google documentation i've make an html with the JS for make a google maps api call.
I've put this file in my project, and in a TABView i read and render this file in a uiwebview.
Works great but every time i start my app and go to this view i got this message: "appleweb://someID want to use your current location".
Is my fault or is normal? why my authrization is not saved in position auth?
Second: if i must make some other request on my map and passing new data or refreshing existent data is better that i do this via javascript or there's some option in cocoa to refresh my view?
It is surely not your FAULT, and yes it is normal. user location authorization SHOULD NOT be saved because the next time user launches his app he wont be knowing that his current location is being used (just in case he wants to avoid that for whatever reason).
I dont know the answer to you second question but just a suggestion: why don't you use MapKit API provided by apple instead of going with html and js for google maps? It is pretty easy to use and theres enough documentation and sample codes available on ADC.

Do not fetch app.manifest each time

For creating an offline version of a bunch of linked web pages I use an app.manifest-file that lists all the web pages for offline caching.
I would like it that the app.manifest file is not fetched every time when a user jumps from one web page to another. Most of the web pages will never be updated once the application is on the iPhone. Also the target audience is abroad so roaming costs could add up while users are using my "web app".
Searching the internet made me think in the direction of forcing an offline mode in Mobile Safari using Javascript but I don't know if this is the right way to go or if it is even possible.
Does anyone have any other and/or better ideas and suggestions on how to do this?
I would try setting an expires header to the future for the manifest file. That should theoretically prevent the browser from making a request for it. Never tried it, though.

Categories

Resources