My site works nicely as a PWA and I am trying to improve it. I have a couple of things going on and I am not sure if this is normal behavior or not.
Starting with offline.html. Right now I have a standard simple piece of text that say you are viewing example in offline mode. There is no header/footer or any other content. I'd really like to improve that but where and how much can I improve it? It doesn't seem to act like a normal page. I also find a problem on my child pages where when testing and looking at a waterfall chart, offline.html is coming back as a 404. I doubt this is normal.
Secondly, when I run a lighthouse test on a child page like example.com/childpage I get the following;
Current page does not respond with a 200 when offline
start_url does not respond with a 200 when offlineThe start_url did respond, but not via a service worker.
Does not register a service worker that controls page and start_url
I've tried to search for answers but I'm not having much luck. Any help or suggestions would be appreciated? Thanks.
I only understand from a VueJs perspective.
If your app isn't registering your service worker, then the service worker won't be able to intercept the http request, please see attached pic. basically you need to get that registered before you continue.
reference: https://www.sicara.ai/blog/2017-06-30-part-three-progressive-web-app-with-vue-js-webpack-material-design
you can add a <noscript> tag into your index.html which will catch when your JS doesn't load see: https://web.dev/without-javascript/
Going back to registering your service worker; You need to make sure your webpack, or like in my case my vue.config.js is actually registering your PWA correctly, including the service-worker.js
pwa: {
themeColor: '#2F1B55',
msTileColor: '#000000',
iconPaths: {
favicon32: 'static/favicon-32x32.png',
},
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'service-worker.js',
},
navigateFallback: 'yourDir/public/index.html'
}
navigateFallback this is important to tell the browser where to start the JS from again when it falls over mid app.
Getting a service worker registered on build is your primary concern. Try reading the article from 1. to get a greater understanding.
Thanks for your input, I'll read tonight. That said,I can put my mobile device into airplane mode and my entire PWA acts just the way it did when I was online (unless its a DB lookup). This is why I'm a bit confused. Every page that I visited online is available offline. I only get these warnings from lighthouse. In devtools, there is no warning. Cheers.
Related
I have made a simple full stack application that uses a postgreSQL database. When previewing the site on desktop it works fine and is able to retrieve all the information with no problem so long as my backend server is on. I am trying to preview the site on my phone using my IP address followed by the port number and it comes up just fine but only the frontend is displaying on my phone. I am unable to see any information from my backend or database. Does anyone know why that is or how I can fix that to display on my phone (without hosting the site)?
1.Maybe it's just cashing issue.
check your mobile phone browser cash setting.
In general, browsers use caching technology for performance reasons. Caching refers to storing values that you previously requested locally and then reusing old values without using new values when a similar request comes in.
2.Maybe it's a front-end css problem.
If design-related elements such as css are not accurate, problems that cannot be seen on the screen may occur even if server data is imported normally.
3.Or maybe front-end can't get data from the server at all.
In this case, it is necessary to debug the server source, check whether it is sent normally on the screen, and check whether the response is received normally through the network terminal.
After checking the three above, even if you can't solve the problem,
At least you'll know exactly what the problem is.
I am developing a PWA and I am shipping a lot of updates.
I have a service worker in the background as usual. But I cannot figure out a good update strategy.
By default the PWA update itself when all tabs are closed - for some users that might be never or months later, right? Does that mean breaking API Changes are impossible or how is that supposed to be?
Currently, I use the skipWaiting functionality which works fine, but in the InAppBrowser of Instagram, users get a blank screen each time the service worker forces the update.
What am I doing wrong? How are you guys solving the problems? Is SSR regarding this better?
Thanks :)
Alex
We have a working web application, which has been developed with ExtJS for client side, and Struts, Spring, Hibernate for server side. now, we are considering to migrate to GXT (or may be GWT itself). The thing is I'm very new to GWT/GXT. and we are trying to decide whether we go down this road or not.
1) Until now, we have 2 domains for our web-app. one is that the application (Struts+...) have been deployed to, and the other is mainly a cookie-less custom CDN. The transfer between client and server is mostly XHR requests, sending/receiving JSON and/or JSONP. But with the new approach ahead of us, I began to understand that we are supposed to have only ONE domain, for the whole GXT application. Is it correct or I forgot to consider something here?
and if not, Is it possible that we deployed just part of the application (i.e. com.ourcompany.webapp.gxt.server.*) to the main server, and the contents that have been compiled and generated by the GWT compiler to the other CDN-like domain?
2) The other big issue we are facing is that the current application is consists of mostly 3 huge modules. One is responsible for "SignIn", the other is for "Webtop", and the third one is "Modules which each users has access to". The latter has been generated on the server due to "access rights" of each users, and obviously could be different from one user to the other.
The only thing I could find on this matter, which might be related is Code Splitting. Although I'm not totally sure if this would be the right solution for this.
We want that the application, on Start Up, checks whether user has been logged in or not. if not, loads the SignIn sets of javascript files (i.e webapp.signin.nocache.js), then after user has entered the correct username/password, unloads this signin file and loads webtop.nocache.js AND modules.nocache.js.
I would be really appreciated if you could help me out.
1) If your GWT app is loaded from a different domain than you have to face the same origin policy. You can not do a xhr to a different domain. You could use the ScriptTagProxy to get around this. But it does not feel very netural.
2) You can use CodeSplitting in order to automatically load a particular part of your application dynamically. All you have to do is to warp your splitt point into an async call.
A detailed compile report gives you a pretty good overview how well code splitting is working.
But CodeSplitting does not unload already loaded code. If its really importend to do so you have to redirect the user to another url in order to load the appropriate user depended module.
Once Javascript code has been loaded and executed its impossible to remove the code from the browsers memory.
Grettings,
Peter
I'm trying to create functionality in my app that would allow me to release news updates (Via a server) to those using the app, similar to what is found in Doodle Jump:
http://farm8.staticflickr.com/7143/6463110847_d485681dac.jpg
Any sample code or ideas would be helpful.
You'll probably need to create an API/web service that your app calls on launch (or when entering foreground)...you could populate that with a database that just gives the entries since the last sync...or just returns some response that you've set up. The response should be JSON or XML formatted (I vote JSON) and then in your app, you call it, parse the response, and place/manipulate it however necessary
http://mobileorchard.com/tutorial-json-over-http-on-the-iphone/
There are a lot of options here. In any case you will need a web server that hosts these news postings. The route that I would take is some kind of blog site, where you can easily manage posts. Then upon launching the app you make a web service call to said blog and get the news posts. You will need to keep track locally of which posts were read by the user in order to keep the badge count correct.
You could also roll your own server, but I don't really see the point for something so simple.
Another option is a web-service such as Parse
This question is too vague for code samples as we would be essentially writing the entire solution for you in order for it to make sense.
If you have further questions into how to leverage these web services, how to load the feed, how to display it etc... Break it up across multiple questions.
There's a service doing this called Converser, if you're still looking.
I am trying to build an iPhone web application using ASP.NET. The page is dynamically rendered once for each visitor. At this point the page can be bookmarked and it will never change again for that visitor. For this reason it should be cached locally from that point on so the application will run if referenced from the bookmark even if no network connection is available. No matter what I try the phone continues to request the page from the server forcing a re-render or it fails if the phone is offline.
Louis Gerbarg suggested in this post that I use HTML5 Cache Manifest to get this working however following the w3.org docs does not appear to work for the iPhone. Does anyone have a good example where application cache is working?
The cache manifest file has to be served with a 'text/cache-manifest' mime-type. This is absolutely critical, it will not work without it. If you navigate to the url of your manifest file, it should trigger a download...
Also, I've found that putting the manifest location in the tag as an absolute location, as well as all the entries in the manifest file to be more effective.
I answered your previous question related to this, but it was not clear from that question that you were trying to cache dynamic content. The cache manifest is for getting static content you want for offline web apps to work.
I am not sure you can do what you want. Do you want the app to be able to function offline, or are you just trying to peg something in the cache because it is slow to download? Unless you are actually constructing an offline webapp (which the user will add to as a bookmark or an app in the Spring Board) then your page can (and must necessarily) be evicted from local storage at the browsers discretion, regardless of how loose a cache policy you set on the page.
You should use the Safari Javascript Database API which should work for iPhone and Safari 3.1. It works great for local caching and data storage:
http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/
It could be to do with the size of the output.
I can't talk from any serious experience in tweaking things specifically for an iphone, but there is an intersting read from the YUI team here: http://yuiblog.com/blog/2008/02/06/iphone-cacheability/, which indicates that the largest unzipped cache file that can be held in an iphone is 25k, and that for optimal caching, as many components as possible should be <25k.
That may be the cause of your problems, but that's only a guess.