im new here (just start to learn js for this job and my english is not very good) and i'm having some trouble to find the right way to do this.
I'm working on a PWA that will have two main purposes, the first one is to show some html dashboards (one of the htmls dashboard files will be in this path /dashs/dash_geral.html) and the seccond one is to show some lists (e.g: one of them would be in this path /listas/listas_propostas.html), and the goal is to work offline (using cacheFirst strategy).
The problem is that i would want to reload just one folder of my two paths, i can do a "refresh all" in my index.html, but I would want to do it in another pages too, and in one page, i would refresh just one folder, in another page, i would refresh a seccond folder.
My scheme is something like this:
Index.html -> Install sw. Im my index.html body i have 2 big buttons, one to redirect to graphs (/graphs.html), another button to redirect to lists (/listas.html).
If i click in "graphs", i will be redirected to /graphs.html, and there i will have a topbar with a refresh button, one iframe to show different graphs (one of them is /dashs/dash_geral.html, so, when i call graphs.html he will use one of the dash htmls that i generated, i.e /dashs/dash_geral.html) and a navbar to navigate between another dashs (for example, if i click in "negocios" my iframe would load /dashs/dash_negocios.html).
my graphs.html
My goal is to click on refresh button, and update my cache of /dashs/, ie, update my dashes from server to cache.
And do the same if i click in button lists, i would have the same structure, go to /listas.html, having a couple of htmls in /listas/ to navigate with my navbar, and if i click on reload i would want to refresh just that folder (/listas/*) on cache.
I already saw the advanced recipe to create a refresh button for clients, but i want two different refresh buttons with slightly different behaviours (one would "recache" /dash/, and another /listas/.
Besides that, my graphs.html and listas.html are not installing the sw.js, so i shouldn't have access to the main service worker if i'm not in my index.html page, right?
Okay, so, first of all I had misunderstood some stuffs.
I didnt understand before that, firts, if the connection drop, he will continue from the point it stopped (in precache strategy).
Seccond point i didnt understand, is that he will "listen" to all children folders inside scope, i thought that only if I went back to my start_url he will be called again.
I used revision parameter in precache solution to deal with files updates, i actually generate a new SW (with another program) an just change a few lines (the constants used in revision parameters) to update my files.
With those to points working, I can actually work with my app without a reload button, since every time i navigate between pages, he will be listening and recaching updates.
Related
I have a contact addition form that can be navigated to from multiple screens in our application.
Once the form is submitted, I then take the user to a screen to view the contact that was added.
When the user then makes use of the back button it should take them back to the screen that they originated from.
This might be the Android back button or one that calls the RouterExtensions back function.
I have made use of the navigate extra replaceUrl when navigating away from the form to the view page.
I have also tried using the skipLocationChange extra when navigating to the form but this creates more issues.
I have created a simple playground page flow that creates not quite the same issue but does throw an error that I don't know what to do with either:
https://play.nativescript.org/?template=play-ng&id=BfVcGZ&v=2
In our app, by making use of the replaceUrl extra, the back button does take the user to the correct page.
However, there is a brief moment where they see the form again. This isn't an ideal user experience.
In the linked Playground I do get an error:
Cannot reattach ActivatedRouteSnapshot created from a different route.
This seems to tell me that replaceUrl is indeed removing the page from the route table.
However, the page isn't destroyed yet and so the app is trying to show a page that it shouldn't.
replaceUrl is not yet supported by Page Router Outlet, there is an open feature request, you might want to register your vote on the feature and follow up there for further updates.
So I am concerned with
webdriver.navigate().back();
in particular. AFter reading How does the Back button in a web browser work?
it made me think of how can I make sure back button behaves as expected?
Here's different ways of having "back" navigation. How would you go about detecting which approach to use? Listen to whether POST or GET is being made? Listen for AJAX requests and plan the appropriate plan?
a) navigate back() (essentially hitting back button in firefox)
b) make GET request to the previous page url
c) click on "return to results" on current page
with a) back() sometimes do not work correctly for AJAX sites with no breadcrumbs. or for POST search results for example where pressing back will prompt alert message.
with b) my concern is that the url may not match up,
ex) dynamic urls with unique hash sessionid parameters
http://www.aa.com/results.php?sessionid=29756293changeseverytime
So how do I create a contingency to make sure the back navigation works correctly as expected for a variety of web apps and sites (there are lot of variability in terms of how the back button will behave).
Why don't you store the location of the page that you want to verify, hit a link, use the goBack and then verify location of check the variables (the one you stored and the location of the verify page)?
By the way, if your site uses AJAX I suggest you use the pause function that waits for the AJAX lib. To fully load, or set the speed of your site (maybe combine them together in rare cases).
I have a few pages in an Application that require A-Synchronous calls to be made for about 2-3 minutes to get Synchronized, the user may navigate away from that page during Synchronization and can come back again after visiting multiple pages and the sync continues all the time he is on other pages as well, when I go to a page from sync-page and press the Back button everything works fine.. but when i go to a page and navigate back to sync-page from Application Bar a new Instance of the Page is created and the Sync is just like Re-started.
Now i know every thing is working fine since new instance of a page is created when i call NavigationService.Navigate() , but what should i do in this scenario ? How to get the old instance of a page if it is there ?
Thanks...
You can't get an "old" instance of a page and it's not guaranteed that a backwards navigation will reload the previous instance of the page, it may be a new instance of the same page, but restored to the same state (assuming you saved any).
If you are trying to provide backwards navigation from the application bar then a) you probably shouldn't because that's what the back button is for, and b) you should make sure you use NavigationService.GoBack() instead of NavigationService.Navigate() because Navigate will always launch a new instance of your page.
If the page you want to get to is not the previous page, then it sounds like you are trying to implement non-linear navigation for which there is a recipe on the App Hub.
By the sounds of your scenario, you should handle this long running process separately (away from the view) and then display it's progress or results in a view when the user navigates to the relevant page.
I am trying to implement content browsing like it is done on Facebook when user is browsing the photos. I guess everyone is familiar with that photo browsing where you can click "next" and "previous" and immediately get the next or previous photo (you can also navigate using arrow keys).
When you click "next" for example you notice that the page does not refresh - only the content. At first I thought it is done using plain ajax calls which refresh only the "content" in this case the image, description and comments. But then I noticed that also URL in the "Location" toolbar of my browser is changed!
I tried to inspect this using Firebug and discovered that when you click "next" only the next photo is downloaded and I still don't know from where the comments & image meta data (description, time, tags,...) are loaded.
Can someone please explain how this technique is done - page URL changes without page refresh (or even without page "blinking" if it refreshes from cache).
I know how to change page content using ajax but URL of that page stays the same all the time. If I click on "refresh" button I get the first page again. But not on Facebook since even the "window.location" is changed every time without actual redirect.
The other thing I noticed is that the bottom toolbar (applications, chat, ...) is "always on top". Even if you change the page, this toolbar is not refreshed and always stays on top - it doesn't even "blink" like other pages that are refreshed (either from webserver or from local cache). I guess this is the same technique as above - some kind of "fake" redirects or something?
The Answer is pushState
if (window.history.pushState)
window.history.pushState([object or string], [title], [new link]);
You will smile :)
I've tried to change through facebook images, and this is what I saw:
In Firefox:
The page URL is not changing. Only the hash is changing. This is a technique used to allow crawlers to index the content. What happens is this:
User clicks on "next"
JS loads the next image with tags, comments, etc and replaces the old content with them.
JS changes the hash to correspond the new image
urls look like this:
http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121 (notice the hash)
As for the second question, this is just a benefit of the technique above. When you are on facebook, the page rarely gets actually refreshed. Only the hash is changed so that you can send links to other people and crawlers can index the content.
In Google Chrome:
It seems that chrome hassome way to change urls without refreshing the page. It does that by using window.history.pushState. Read about it here.
urls look like this: http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121 (notice that there is no hash here, but still the url is changing along with images)
In Epiphany:
Epiphany doesn't change the URL when the image changes.
urls look like this: http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121 (there is no hash, and the URL stays the same when changing the image)
(don't have other browsers to verify right now)
The one technique not mentioned here is the window.onhashchange() method (supported in ie8+ and most others) which they might have used
You may noticed that the page url remain the same. What is changed, however, is page hash (the part after # in the url).
You need something like this: http://code.google.com/p/reallysimplehistory/
I was wondering what the best way to keep my background.asp file playing throughout all of my web pages.
My website www.marioplanet.com uses ASP #includes in order to keep certain parts of my website the same. So, if I want to change a link in my header, I just need to update 1 file.
Now, I was wondering how to keep my background.asp file loaded throughout my entire site, which has all of my music functionality, even when changing pages.
Therefore, the music and backgrounds are continuous throughout the entire site.
How can I most easily do this without restructuring my entire site? Or would I have to completely redo my site?
From what I understand, you're looking for a way to keep track of the state of e.g. a music player while your visitor is navigating around on your site.
The following ideas might help:
Make your entire website an AJAX application where state is given through hash identifiers (take a look at Facebook and the jQuery History Forward plugin). With this you could start playing music and the user would navigate around the site without reloading the entire page (hence, without stopping the music).
Set a cookie with the timestamp of when the music player starts (via Javascript). Now, when a page loads, check for the existence of such a cookie and, if returned, calculate the offset between cookie timestamp and current timestamp. Setting the player to that offset will pick up the music approximately where it stopped on the last page.
Control the music in a separate pop-up window. Old fashioned and not really nice in terms of usability.
Control the music in an invisible frame that doesn't reload. Very old fashioned and with major backlashes for the user (there is a reason why traditional frames are out-dated).
Hope this helps. :)
If I understand you correctly, you are essentially wanting to have the background and music (which can be loaded in the background) never reload once the user visits the site. THe best way to do this is to make the site a completely AJAX based application, and use jQuery to load pages into divs when the user is navigating through the site.
Essentially you will want to create an index page which holds your backgound, and also contains a 'content' div. When a user clicks on a navigation button using the jQuery .load() method to load the requested page into the content div.
Another option is to go with jQuery UI, and have an element like their tabs component where you define all of the different pages of the site, and then it takes care of all the heavy lifting for you.
There are a few tutorials around for using jQuery with ASP.Net. I would definately go with it while trying to do something like this.