Angular2 App img src broken by FAI - image

I am facing a very strange issue with my angular2 app.
Some users browsing the app with cellular-data can't access the css nor the images because the SRC properties are changed by the FAI in order to reduces its bandwith usage.(which is illegal by the way)
For instance the image's src : ./app/image/logo.png,
Becomes : http://91.68.208.10/bmi/your-host/app/image/logo.png
Which does not works!
91.68.208.10 belongs to SFR a french FAI.
The point is the app works well over wifi/ethernet/other 4G networks.
Their hack usually works well for other web sites otherwise we would have hear of it ages ago. So I think their should be an issue between this rewriting and the angular specific navigation / url pattern.
Especialy because External ressources from other website (ASOS, Nike, etc) does not works either when called throught angular app.
Any idea how I could change or rewrite my url so the FAI hack will not break the webpage ?
Thank you

Related

Custom domain redirecting to index.html in firebase

So I just linked my custom domain with firebase and it shows connected:
image of connected status
which is great. But now when I search website without /index.html, it redirects me to this page. I want to see this page which is accessible only when I append website domain with /index.html. I am new to firebase. How can I make my domain access index.html page without specifically mentioning /index.html?
EDIT: I just noticed that it's working fine on the mobile devices and in the incognito tab on PC. It must be something with my chrome browser I am logged in with. which is weird :/ should I change the title? Cause I think fault could be related to browser. but help me if you can.
So the real issue wasn't the configuration but the browser cache. if you are facing similar issues then try clearing the browser cache or try browsing the website on a different device. Spent literally 1-2 hrs on such a silly problem. Either way, thank you.

precaching over 1000 assets damages performance

I'm using Vue CLI PWA workbox plugin mode.
My app has more than 1000 assets, and precaching them results in very bad performance. Please, check it out:
https://nikudu.com/
Is there a way to precache files more specificly?
For example, precache files by URL.
On url x/y only precache files 1,5,6 and on url x/v precache files 7,8,2.
I have worked with PWAs and Angular, so no experience with Vue. That said, I would suggest to pre-cache only your shell app (hence the minimum static assets/js that you want to present to the user, when accessing the app offline).
For the other images you can use a lazy approach and cache the images only after they have been requested once (but I do not know if this goes against your requirements).
From this point you could even expand your logic to define, which are the most used routes and preload only those images in the background, once the user lands on the app.
If you are interested, I wrote an article about Service Workers and caching strategies independent from Angular, therefore you can use the same concepts in your app too.

Custom scheme/protocol access from SSL?

Our iOS application uses a custom protocol (NSURLProtocol) to directly manage loading certain data needed by a UIWebview. This has worked fine until iOS 9 with XCode 7.
Now, since the main site is loaded using HTTPS, the UIWebview throws an error when the custom protocol resource is referenced, because it thinks it's insecure (in fact, it's not, we load it using SSL, just not https://). The app is already built with "Allow Arbitrary Loads" because we have some other things that require that, and I would have thought this inherited the NSTemporaryThirdPartyExceptionAllowsInsecureHTTPLoads, which it seems this is hitting up against, but who knows.
Is there any way to convince iOS 9 that our custom protocol can be accessed from HTTPS? Note - we don't use an iframe or anything like that in the UIWebview - these resources are requested using Ajax/XHR and the app's NSURLProtocol is invoked and takes over loading the data and returning the response.
The custom scheme is also listed in URL Types, but this doesn't seem to change any behavior (in or out, same error). Here's the specific error:
[blocked] The page at https://example.com/path/redacted was not allowed to display insecure content from mycustomprotocol://different.example.com/path/redacted.
EDIT: Downloaded Xcode 6.4, rebuilt the app and it seems to work just fine on iOS 9.x, no issues with the custom protocol. Obviously, this isn't a long-term solution. Hoping someone still has some insight on how to resolve in Xcode 7+.
The problem, I suspect, is that web pages served by https aren't generally allowed to include resources loaded from any URL whose scheme isn't on a specific list of known-secure schemes (at least in newer browsers).
The best way to work around the problem is to rewrite your resource URLs to begin with https: and make them all be within a specific subdomain that you own, and permanently ban any actual web use of that subdomain, then use that to determine whether your URL protocol should handle the URL, rather than using the URL scheme.
With that said, please file a bug and ask for an API to whitelist your custom protocols as "potentially secure" in UIWebView and WKWebView. In this case, it is a reasonable thing to do.
For more info on mixed content, see http://www.w3.org/TR/mixed-content/

Angular JS *non-SPA* SEO

Non-SPA AJAX Partials for SEO
Sadly, 101% of the Angular SEO examples assume the use of a singe-page-application (SPA). My app is not a SPA. Currently, my stack is:
Node/Express - for routing and rendering Jade templates. The URLs are real, and don't use HTML pushstate, hash-bang or anything similar. for this reason, url-escaped-fragment won't work for me (I don't think)
Angular for communicating with my RESTful API(s)
My problem is that my page itself only includes pieces that are loaded via AJAX—the rest of page is rendered server side. Node/Express is not responsible for any of this logic, Angular pulls in the data that will be in my first h1.
Google Bot and similar see: <h1>{{this_unrendered_string}}</h1> which is no good.
Has anyone come up with any clever solutions for working around this scenario?
FWIW I found a service called SEO.js that will host a rendered version of any page I pass to it. If I could just tell GoogleBot and similar "Hey, don't use this page, use this page instead" But I'm not entirely sure how SEO feels about a different host serving content. Maybe some trickery could work here..
Google have documented an approach to "Making AJAX Applications Crawlable" here. https://developers.google.com/webmasters/ajax-crawling/
Implementing this isn't completely simple (basically you have to run a headless browser and return the HTML snapshots in response to specially formatted requests by Google).
It's not a simple as just returning a snapshot when you detect GoogleBot, but doing it this way probably eliminates any risk of being penalized.
There are a few companies that offer this a service - I'm getting on well with this one: https://ajaxsnapshots.com - they say that Bing and Yandex (Russian search engine) support it too.
AjaxSnapshots have an API you can use to tell them when your page is ready to snapshot - you could call that after all of your client side rendering is done.

caching kills links (jquery mobile on iPad)

I am working on a webapplication that uses caching to make it available offline. Everything works fine when running it chrome (offline and online). But when I run it on iPad the links don't work anymore and I get failed to load page everywhere. Removing the caching makes the links work again so it obviously has something to do with the caching. Navigating directly to the seperate pages of the webapp also works fine in Safari, its the link that causes the error. By default all links are loaded with AJAX in jQuery Mobile. Changing this by adding rel="external" also fixes the problem, but obviously I don't want to do that.
To enable caching I added this code: and created a manifest file with ALL the files (scripts, css, images, html). Does anyone know what the problem could be?
I've experienced this as well while working with caching using manifests. What I discovered was that there Chrome has no limits. iPad and iPhone do. This appears to be pretty small, around 5mb. Try removing images as much as possible and using YUI Compressor on your scripts.
Ajax requests can be cached actually, the system doesn't care if the request is by AJAX or normal full request. All you have to do is put the URLs you wanted to retrieve by ajax into the manifest like the rest of the assets.
Hope this helps

Resources