I have a UWP (JavaScript PWA template / VS 2017) that is meant for testing and development of a hosted application. There is not much fancy about it besides letting a developer or tester choose which application build it should navigate to. However, one thing annoys me and I cannot seem to fix it. In a previous incarnation of this UWP, anytime I opened it on Windows 10 and navigated to an app build, it would show a back button at the top that I could use to go back to the index.html for the UWP.
I have scoured the old code to see if I was missing something. I was thinking perhaps I had left out some code to enable the back button and handle when it is clicked. Something that might have looked like this:
// This is javaScript
const navigationManager = window.Windows.UI.Core.SystemNavigationManager.getForCurrentView();
navigationManager.appViewBackButtonVisibility = window.Windows.UI.Core.AppViewBackButtonVisibility.visible;
navigationManager.addEventListener("backrequested", window.history.back, false);
However, there was no such code in the old version. I also checked the code for the hosted app and I didn't find anything like it either. Regardless, whenever I open the old solution for this UWP, I get a back button with all the expected functionality but without any code to handle it.
Is there some kind of declaration in the app manifest or .jsproj maybe? Something that tells the application at build time that we want a back button that works "out of the box"?
UPDATE
I recreated the UWP with a fresh template and did some tests on it. The template automatically sets the start page to https://example.com and on this site there is a link for https://www.iana.org, so I whitelisted that domain in the content URIs. Navigating to the link there works. I get a back button.
Next, I replaced the template code with my own code, pointed it to index.html as the start page, and set up the content URIs. When I try to navigate to anything, I do not get a back button. Even if I go to https://www.iana.org, I do not see a back button.
Last, I replaced the start page with https://example.com. When I click the link on that page for https://www.iana.org, I get a back button.
I also removed all JavaScript utilizing WinRT in order to check if something there might be messing with it, but it had no effect.
Additional Info
After having a look at the old version, a major difference I see is that the index.html for the app was actually hosted and in my version it is part of the app. Per recent comments on this question, it seems that the back button functionality only works for hosted content?
For security reasons, the PWA project requires the project to run in the https environment, or it can be run in localhost when debugging locally.
The PWA project in UWP is to package the existing PWA program. This requires that the PWA project is already in the https or localhost environment. You can view some requirements of the PWA project here
Thanks.
Related
I've made a javascript file change on my Azure app service web app. I can see the change via FTP download and via App Service Editor. However, when I log into the application, the desired change in behavior of the code, which should be very obvious, has not changed.
If I F12 (in Chrome) and look at the Source, the change has not been made.
I did a "hard reload" of cache from within DevTools (F12). Still no change.
Is there something else I need to do to implement this change in the application, i.e. stop and restart the application?
UPDATE:
Light bulb goes on: the JS is running from mini-fied bundles, so changing one separate JS file won't make a difference. Would be nice to know about whether the app WOULD have accepted a change without restart, however, not critical for solving my problem.
You can append a version parameter to avoid client-side caching. Try adding a caching buster to the URL for requesting the JS file. For example. "/app.js/?v=v1". The value of the version can be changed every time you deploy new changes.
On cloudflare I want to disable caching and see my website changes immediately that I've pushed live.
Things I've tried:
I've put development mode on.
Create a bypass on caching in page rules.
Purged an individual webpage.
Purged the website.
Set cache to clear every 2 hours.
None of the above worked.
Tech I'm using:
Angular2
SystemJS
Typescript which becomes javascript on build.
Firebase for hosting and database.
Cloudflare for SSL etc.
The only way people see my website changes, it if they hard refresh.
The main problem is I've got a javascript file called app.js and its has all my javascript in for my Angular app. And it doesnt seem like its trying to get the resource in the browser.
I've changed the app.js to app.js?1490959855777
And still doesnt fetch the file again.
I basically want to see my JS file without a user having to hard refresh.
Based on the discussion above, it looks like the caching is happening on the browser - since a hard refresh will get the new file contents.
I think what happened is CF told the browser to hold onto that file for a very log time. And the browser is listening to that request.
Because you can't ask your users to do a hard refresh, you'll need to rename the static files that are being cached so aggressively.
I'm learning angular and have cloned the repository here. I've installed the dependcies through npm and have the web server running. I can load the page up at localhost:4000.
If I make a change to the index.html (a simple text change), I can see the results when refreshing my browser. But, if I make a change to an html page that's loaded as an angular directive, the changes don't appear in my browser (Chrome, FIrefox). I tried F5, Ctrl+F5, Shift+F5, etc. Even restarting the web server doesn't do anything.
Is there something I need to set up in the angular code so that refreshes work properly?
https://github.com/codeschool/WatchUsBuild-ReadingListAppWithAngularJS
Note, this is Angular 1x proj.
Should I blame caching
It's cached in your browser. Simply have your dev tools open and under networking tab mark disable cache.
Note:- this will work only if dev tools are open not otherwise.
I can recommend live-server which detect the changes and update make an reload in browser.
One more thing Angular it self use template cache by default so that can also cause the problem and in that case you need to rebuild your app on changes.
read about template cache
Yes that happens with angular because the browsers usually cache the webpages and when you make changes in html and then refresh, the browser loads the cached pages instead. It doesn't happen every time but most of the time. So try clearing the cache of the browser and then load the page. It should work correctly.
Angular 2 and ember has some mechanism called watches that look for changes you make in the files, and whenever it detects a change, it re compiles all files and load a fresh copy for you. But in Angular 1 I don't think there is such a mechanism and I faced this problem my self a lot. And this is the solution I have come across so far. Hope someone else has a better solution.
I am creating an angular app that is hosted on a webserver that doesn't allow me to edit htaccess files or webconfig. There is no server side language option available which means no middleware for creating HTML snapshots. This is a high dollar CRM with webstore and no option of switching hosts.
So I have come up with my own "solution" to the issue. Would it be considered ok to create hyperlinks that link to url's that will generate the same view that will be updated by an onClick event. This way the user will see the content loaded immediately, but bots will have to reload the page at the new url to see the page content.
Example:
View 2
I'm struggling to find a good solution to this issue, and I know others have to be in the same situation as me when it comes to development. The code above is just a visual reference to what I am referring to.
Have you looked at
grunt-html-snapshot
After implementing this and testing this, it does work well. Google sees them as new pages and the user never has to worry about loading new content.
I am working on HTML/CSS/JavaScript from within emacs. My workflow is currently
Make a change -> Alt-Tab to browser -> F5 (refresh) -> Alt Tab to emacs
Do any extensions exist that would auto-refresh the browser on a change? Or, possibly a better idea, when I hit a key combination from within emacs?
I've tried impatient-mode and it worked nicely for what I needed. It also can be extended to do things like, for example, display the contents of a buffer you are editing in an iframe alongside other buffers etc.
Option 1, refresh the browser on interval:
With the addition of a single meta tag into your html document, you can instruct the browser to automatically refresh at a designated interval number of seconds:
<meta http-equiv="refresh" content="3" />
Option 2, firefox plugin to refresh on document change:
A Firefox Add-on, called XRefresh, will monitor your project folder, and, every time it detects a change to the source files, it’ll reload Firefox.
Option 3, refresh the page from Emacs, vim or shell script:
There is a firefox plugin called IMACROS that let you define a script that will remote control firefox from a file on disk. You can create a remote control script, and then program Emacs, vim or shell script to tell firefox to run the remote control script when you are ready, thus refreshing the page. You would need to create a keyboard hook to kickoff the script on save.
I use Yeoman, which help you scaffold web apps, which uses Grunt and the command
$grunt server
It is a simple setup that enables "livereload". I then set up my localhost or rather IP:9000 which enables live reload of any device in my local network upon file save of all watched files (scss, js, coffee, html) etc. So you can see the site change upon save not only on your desktop, but your tablet, mobile devices, cross browser, smart tv etc..
It also runs compass, unit tests, uglifies & concatenates, does the dishes, walks the dog you name it. Then "$ grunt build" creates complete distributions to deploy.
It's worth a look, it's a bit of a setup, I had a few hurdles, but it's amazing what you get back.