Now this has come up a fair bit on here so I guess I'm looking for an explanation rather than a fix (though that would be ace), but Safari's back / forwards cache is horrifically greedy.
I've got an issue where a form submits, but loads an interstitial modal window before moving on to the form action page. On Safari the cache is so strong that the back button has the modal open still which is making my soul very sad.
I'm hacking around it by dismissing the modal and then submitting the form. On back the browser has a half closed modal (it's Bootstrap so it fades) which then just carries on dismissing.
Now I know about onunload="" but refreshing the page just seems crazy. The cache is a good thing and something you want, specially on mobiles.
I guess my question is:
Why is it so much more intense than say Chrome and is there anyway of forcing the browser to cache a state instead of just the last state?
Thanks
Hah, greedy is an understatement! Honestly though, 99% of the time, the caching design behind Safari is the ideal way to handle page transitions on a mobile device.
When you go from Page A to Page B, and then back to Page A, you don't want to burden the device (bandwidth, battery life) with fetching resources and assets, when you could just "paused" the state between interactions, and then "continue" it when you navigate back.
That's effectively what Safari Mobile does. They use a concept of Page Cache, which keeps the entire page live in memory, when you navigate from one to another. This reduces the need to fetch those resources, and allows for a snappy interaction when clicking back.
That's great and all...but it does lead to problems (such as the one you brought up) - Specifically, how do you distinguish between a page that was suspended and one that should have been destroyed?
Thankfully, WebKit provides a pageshow and pagehide event that tap into Page Cache. In addition to firing when the page shows or hides (similar to onunload), it has the nifty ability to indicate whether a page was persisted - or placed into the Page Cache.
While it's not a perfect solution, you could check the pageshow event for persistence, and then handle the modal more directly (since you know it was cached) like immediately hiding it.
If you haven't already, take a look at these two links here:
https://www.webkit.org/blog/427/webkit-page-cache-i-the-basics/
https://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/
They do a great job explaining the Page Cache and include code samples of the pageshow and pagehide event I referenced earlier.
Hope this helps!
Related
I run and manage the website http://onedirection.net, and we've spent a lot of time recently trying to improve the loading speed of the site. There's a lot of content on the site which requires load time, but everything else is going smoothly.
In Chrome, we're very happy with the load speed, but things don't seem as good in IE9. In fact when we load the homepage up, it seems to pause for a while, but worse still when I click and hold the Back button, I can see about 6-7 redirects from the initial page load!
What is causing this? There are no redirects on the site, but it looks like the social media links and a couple of adverts are causing strange problems.
I've never seen this before, so I'm a bit stumped!
Also, the chat bar at the bottom of the site doesn't load properly on the homepage, but does on other pages.
Can anyone shed any light into what is causing these issues, and better still how to solve it?
Thanks,
Chris.
To be honest performance in Chrome isn't that great - from my home connection the page takes 11 seconds to load in Chrome.
Here's a waterfall for the home page in IE9 from a server in Dublin - http://www.webpagetest.org/result/120901_NC_f64ed067693fda62238e67cce432f964/1/details/
The waterfall is pretty horrible to be honest - too many requests, too many domains, no prioritisation of content, javascript in the head loading in a blocking manner
I'd need to look in more depth but essentially due to the number of third party components you've lost control of your page load.
I'm creating an app that has start button which brings you to start page from anywhere in app.
However back navigation stack hurts when I just navigate to start page.
Looking for solution I found NonLinearNavigationService. The trouble is that download links are target to app hub, which (now, as we have new better app hub) redirects me to main page and nowhere further. Also I failed to find it on app hub using build in search engine.
Anyone knows where from can I get it?
Or maybe another solution for navigation loops?
If you use RemoveBackEntry(), the entries are programmatically cleared from the backstack so you don't have to deal with the side effects of actually navigating back through the pages to pop them off the stack.
The NonLinear Navigation Service effectively does what you have tried. It calls GoBack() to traverse back up the stack. What it additionally does to prevent the flicker is to make the root frame transparent. See this question:
Skip a page when the back button is pressed, WP7
I don't want to call your question a duplicate because I think before Mango came out, that was probably the solution that needed to be used. Now that RemoveBackEntry() has been added to NavigationService, I think using that would probably be the better approach.
No linear navigation in WP7 is generally not recommended, because of the hardware back button and the UX on the rest of the phone, so you should probably structure your app to avoid this. However it should pass the certification process.
Here's another similar question In-App Home Button to Navigate to MainPage allowed? and an article about circular navigation which mentions the NonLinearNavigationService you are talking about http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/12/13/solving-circular-navigation-in-windows-phone-silverlight-applications.aspx.
If the only non-linear part of the navigation is the home button, you could use NavigationService.RemoveBackEntry() in a loop untill it raises an InvalidOperationException in the home button event. When the InvalidOperationException is raised the BackStack is empty and the next click on the back button exits the application.
I have a page that has a RadMenu and a RadGrid used together. The RadGrid is used in client-side mode. This means that the loading, saving, editing and creation of new records is done via ajax. The grid seems to work fine but after sometime it appears that The menu dropdowns tend to be slower and after more use the entire page freezes. I am not sure whether it is this combo that causes this effect or either of the controls since a lot of js is being used to automate the menu dropdown and the ajax calls to the. This is the order in which the error is reproduced.
The menu control is located up above in a separate iframe and the grid is below in a separate iframe. This makes the scenario more peculiar since different js files are loaded in two iframes and there is no interaction between the two.
What could be the cause of the sudden freezing, a memory leak perhaps? Better still could it be a general problem when a lot of ajax interactions occur and other events are fired before the callbacks return?
On the video once can see that when the grid page loads everything seems fine, but after firing some events and performing some actions, the menu starts taking a lot of time to load. It reaches a point that it takes such a long time for the drop downs to display and eventually the entire browser tab freezes.
I have uploaded a video of the effects and here is the link:
http://megaswf.com/simple_serve/87153/
"Better still could it be a general problem when a lot of ajax interactions occur and other events are fired before the callbacks return?"
- that's most of your problem. Telerik's JavaScript is thrown together, just view source and check out how many scripts are on the page, as well as the inlineJS. Contacting Telerik couldn't hurt, but I doubt it'll help. If you have a float based layout, when you go into edit Telerik, the tools don't work because they're relying on absolute positioning. I had to find my own solution. Good luck.
I'm just learning about how to navigate between pages and tombstoning. I'm wondering if anyone can point me to some good examples that not only show me the basics of how to use Navigation properly but also good examples of more complicated and advanced navigation issues?
Some questions I have revolve around memory leaks when navigating to other pages and navigating back?
Is there a close page call, once the page has done its job (I don't want an instance of it hanging around after I'm done with it)?
Another question is how to I maintain state if the app gets tombstoned (still trying to wrap my head around that term).
Thanks!
There's no close page call, the OS automatically closes pages when they're backed out and releases used memory (so there should be no leaks here).
Some resources here that cover tombstoning and advanced navigation concepts.
Understanding the Windows Phone Application Execution Model, Tombstoning, Launcher and Choosers, and Few More Things That Are on the Way – Part 1, Part 2, Part 3
Introducing the concept of “Places” - Peter Torr's Blog
Redirecting an initial navigation - Peter Torr's Blog
I like thinking about WP7 navigation like a simple browser that only have back button. The Naviation model is based on stack pattern (Last In First Out), need to get through all to get back to first page. This is not what PC user are used to but in mobile world is one of the best solution.
You have to stick to this model and never ever do "go to home page" button - your app will not pass the certification for sure(there are some workaround with excetions but I wouldnt recommend that).
A lot of pages can get the user pissed that's why a good idea is to have 3 to 5 pages max. For instance, first page user picks what he is going to do, next page is login page and then for more complex interface use panorama and pivot control.
To the simple browser model add cookies. When your browser load a page it sets a cookie with some information, next you close the browser and when you go back to the page it can get the previous state from that cookie. Tombstoning is very simailar. - link. Some more info about tombstoning
Some questions I have revolve around memory leaks when navigating to other pages and navigating back?
What do you mean by memory leaks? you are working in managed framework.
Is there a close page call, once the page has done its job (I don't want an instance of it hanging around after I'm done with it)?
you do not have to do this. Page is destroyed everytime you go to the next page unless a thread is still working there.
Another question is how to I maintain state if the app gets tombstoned (still trying to wrap my head around that term).
Basically it's up to develepor to manage this. It is not mandatory but gives a nice user experience.
Another question is how to I maintain state if the app gets tombstoned (still trying to wrap my head around that term).
Use Isolated Storage.
You can have a look into Columbus MVC framework for WP7 source code (http://columbus.codeplex.com/) that I have published recently. Columbus addresses both Navigation and Tombstoning (provides strongly typed navigation with history and View Models that can survive tombstoning).
You know how sometimes you are on a good site and you click a button (like to submit a form) and the form doesn't go away, instead, the foreground becomes transparent and it contains a message of some kind, or another page. The message is at the forefront but the previous page is still mostly visible behind it - how do they do that? I'm assuming it's an Ajax-esque trick.
This is called a light box modal. There are quite a few JS plugins that can do this including Lightbox and the JQuery UI Dialog to name a couple. I just recently started using Fancybox and have been very impressed with its speed and configurability.
Here is a pretty good (not all inclusive) list of them:
http://spoonfedproject.com/jquery/extensive-list-of-jquery-lightbox-modal-plugins/
One way is to use GreyBox. I think this similar to the effect that you're talking about.