PWA always serves the index.html page when requesting static resources, how do I fix this? - progressive-web-apps

When loading the page for the first time, the app got ready to work offline.
then open another tab, visit /not-cached-static-file.png, then index.html would be served rather than the PNG file.
What should I do to fix it?

Related

Precache html pages in flutter

I have a list of some HTML pages that i show in my web_view. The problem is that it will load slowly when network is slow or wont show at all if user is offline. So i want to pre-cache all the URLs before navigating to that page. After that I want to load from the cache and navigate through the URLs on swipe. (The Swipe part is done with URLs loading real-time). My question to you is how do I pre-cache every URLs and call it in my web_view later
If you are sure that those pages are static..I have a suggestion for you..
Like you said, you can pre-cache..
Initially, when internet is available you get the code of those URLs using
http package and store it in local storage, say some .txt file.
And then, when you want to show the page in your app, again..as it being static page, you can read the html code from local storage and show it in your app using html package.
Hope it answers your question.

Conflict between github.io and github-pages

I have a project in https://chrisbg69.github.io Days after that i create a react app and deploy static files at https://chrisbg69.github.io/portfolio in new repo called portfolio. When i visit app page for first time, she show only header with address .../portfolio. Next, when clicking any of buttons there, opened full app pages, like i expected, but address was changed to https://chrisbg69.github.io not https://chrisbg69.github.io/portfolio. How can i fix that i want both of projects published?
i guess you don't have a route for /parfolio/ in your react/redux router or it not configured properly, so when you entered only the header displayed and the content that your JS router should display is remain empty.
Because /parfolio/ is your app index page in github.io you need to update all your internal routs to look like this /parfolio/resume, /parfolio/aboutme

Is it possible to add adverts to a custom Facebook Page Tab app?

I need to create a custom Facebook Page Tab app which will show an external site in an iframe. This need to have adverts on it but I'm not sure if this is possible as the site is hosted externally.
I'm not sure if I need to sign up to the Facebook Audience Network to get approved etc. either?
Any help or advice would be great.
Many browsers have this limitation of not allowing external sites to be shown in an iframe. Imagine the case when you are working hard to create a site and others show all your content in iframes. That is, naturally frustrating.
However, there is a candidate-solution: Let's suppose you create a page which sends a request to the other site and appends all the content into the body and head of your page. This is very much possible, so the solution is to:
Create a page in your site, let's call it outsider
In the server-side code of your outsider page send a request to the desired page to be shown
You will get the html of the page. Process it and include its content into the head and body of outsider. This includes:
3.1. Checking all the CSS to be reached, as the target page might refer to local CSS, which is unreachable locally at your end. Process the URLs of CSS files
3.2. Checking all the Javascript to be reached, as the target page might refer to local JS, which is unreachable locally at your end. Process the URLs of JS files
3.3. Apply the idea described in 3.1. and 3.2. for other resources, like images, until you are satisfied with the content of outsider
Create an iframe, having the source to point to outsider. outsider is inside your scope, so it should be shown
NOTE: If the site owning the target page does not like the possibility of you showing their content inside iframes, they might protect it by, let's say, having Javascript in their code, which checks whether the page is inside an iframe. Remove that code while processing the response to your request. If nothing else prevents you from showing the page in an iframe, then you should achieve success.

Canvas page URL Errors

I've made numerous Facebook apps and attached them to fan pages no problem but for some reason I can never access the apps via the canvas page directly.
For example: https://apps.facebook.com/cashcallwatch/
is coming back with a URL errors, absolutely no idea why. I've looked all over for a solution / explanation but havent been able to figure it out. Any help is much appreciated.
If you look at the Page Tab iframe you will see that it points to: https://www.cashcall.tv/CashCallFacebook/
That url is to a directory, you probably want to change the Page tab url to any of your php/html documents, for example: https://www.cashcall.tv/CashCallFacebook/facebookwatchandwin.php
If you can't point directly to a document, just rename facebookwatchandwin.php to index.php and it will probably work since it will be served as the default document for that directory.

webkit .appcache file caches dynamic page

The main page of my mobile web app is a .jsp page. My app requires login (Google App Engine), so there is a Log In button when the user is not logged in and a Log Out button when the user is logged in, all handled by code on the .jsp page.
I load a lot of JS code on the page, so I used a .appcache file to cache that. Unfortunatelly, even though I added my .jsp page to the Network area, the page is being cached in a funny way, ignoring the content server from the server. That means that my Log Out button shows when users are Logged Out and vice-versa.
I tried to add no-cache directives as meta tags, but they are all being ignored.
Ideas?
According to dive into HTML5, the page that references the manifest is automatically included in the manifest.
http://diveintohtml5.ep.io/offline.html
Q: Do I need to list my HTML pages in my cache manifest?
A: Yes and no. If your entire web application is contained in a single page, just make sure that page points to the cache manifest using the manifest attribute. When you navigate to an HTML page with a manifest attribute, the page itself is assumed to be part of the web application, so you don’t need to list it in the manifest file itself. However, if your web application spans multiple pages, you should list all of the HTML pages in the manifest file, otherwise the browser would not know that there are other HTML pages that need to be downloaded and cached.
I have a similar issue, and I think I will end up loading the contents of the page via AJAX.
Caching in appCache is a two stage process: first the cache manifest is checked (in this case, as the page is loading), then if the content of it has changed, that content is reloaded. However, in your case, by that time, the stale page is already loaded and displayed.
The easiest fix would be to specifically exclude the page (but not the .js) from the appCache, so that only the js is cached, and not the page. I sounds like you might have figured that out, as you are trying to do it by putting the page in the network area. Check that that exclusion is correct, as that sounds like the problem, and that html cache attributes are being set correctly on that page.