We implemented a PWA with Nuxtjs.
We use the pwa module.
The app is quite simple (it's a product catalog) but for each product, we call an iframe.
This iframe call static files included in a static folder.
When I am online, I have no issue but when I get offline, I still can navigate in the app but when I display the product, the iframe can't be loaded and show me the following error :
the webpage at — might be temporarily down or it may have moved
permanently to a new web address
I don't know how to fix it.
EDIT:
Here is my nuxtjs app folder
I call the iframe with the following code :
<iframe
v-if="product.configurationId"
ref="iframe"
class="viewer rounded shadow"
:src="'/3d/index.html?ref=' + product.configurationId"
allowfullscreen
border="0"
/>
Let's say the app url is https://myapp.com/
When I call the iframe, the following url is called https://myapp.com/3d/index.html?ref=refProduct
EDIT WITH CACHE STORAGE DETAILS
Following kissu comment, I take a look in the Dev Tool cache storage.
I have 4 cache files :
workbox-precache-V2
workbox-runtime
my app cache
a second app cache
In workbox-runtime cache, I can see the files from the 3D folder.
Related
I'm sorry. Because I am using a translation machine, understanding may be difficult.
It is a web developer working in Japan.
If you do the following operation, a bug will cause a bug in the instagram.
Send the URL in 「direct」 in the instagram.
(iPhone Application)
(There is a form with in the URL.)
(LIKE http://nervgh.github.io/pages/angular-file-upload/examples/simple/)
Click URL from the 「direct」 and the URL opens in app-in browser.
When uploading a file (image) with Form, the page will be reloaded and the entered file will be deleted.
You can upload the same URL in public browser without problems.
We could not add multiple or accept = "image / *" attribute to .
File upload control not working in Facebook In-App Browser
It is an innovative function of my web application and I really want to fix it
Is not there any good way
I'm working on a static, Polymer based website. I integrated VR View for the location (map section): https://valleydevfest.com/
Source repo is the develop branch: https://github.com/gdgfresno/valleydevfest/tree/develop
The VR View consists of an element, which gets the url of the 360 mono image and contains the iframe with the actual VR View: https://github.com/gdgfresno/valleydevfest/blob/develop/src/elements/vr-view.html
<template>
<div style="text-align:center">
<iframe
frameborder="0"
width="100%"
height="250"
scrolling="no"
allowfullscreen
src="/vrview.html?image=[[url]]&is_stereo=false">
</iframe>
</div>
</template>
It's used here: https://github.com/gdgfresno/valleydevfest/blob/develop/src/elements/map-block.html#L140
<link rel="import" href="vr-view.html">
...
<vr-view
url="[[_currentImage]]"
></vr-view>
Now, this works fine on local development environment served both as polymer serve, or when I serve the unbundled build directory with Web Server for Chrome. But when I deploy it to Firebase the VR View displays the "Loader: Unable to load scene. Required parameter missing." error message. Such error is triggered in VR View when neither image, video, nor object parameter is supplied as a 360 media source. I don't know how is that possible. I also tried to wire in a static URL. (It's another story if I'd have multiple images and it'd start to rotate, Firefox and Edge takes that well while Chrome fails).
The Firebase deployment settings: https://github.com/gdgfresno/valleydevfest/blob/develop/firebase.json
Now, here is the deployment of the build as a gh-pages, source code (the unbundled build directory): https://github.com/MrCsabaToth/mrcsabatoth.github.io and the website: https://mrcsabatoth.github.io/ This works with both Chrome, FF and Edge.
What is going on?
News: I tried to reproduce this in a separate deployment without a custom domain name, and low and behold the VR View element works. So there's something about the custom domain. Maybe related to CORS?
I have an application that uses Google Drive for document storage and preview functionality, but recently the iFrames that the documents are loading into are not displaying anything. Upon inspection of the console, Chrome declares that it blocked the fram from running insecure content, and that is why the file preview did not load.
The initial call to preview this file is to a url that looks like this:
https://docs.google.com/document/d//preview
There is a redirect along the way that takes the following form but because it uses http instead of https, Chrome blocks the content from loading.
http://www.google.com/url?sa=p&q=https://www.google.com/accounts/ServiceLogin?service%3Dwise%26passive%3Dtrue%26go%3Dtrue%26continue%3Dhttps://docs.google.com/document/d//preview?pref%253D2%2526pli%253D1
Is there any way around this issue? It is blocking a core functionality of my application currently, so any advice would be appreciated. I can provide a screenshot of the full stack of network loads in necessary, but this is the only URL that is not http compliant.
Thanks in advance for your help.
Hacked that. Add a "?pli=1" without quotes at the end of the URL to avoid redirect (after "/preview" or "/edit") and land directly to the document.
I am creating an iPad app, using HTML5 and PhoneGap. I am wanting to put an iframe into a page and pull through some content in a php page found remotely on our server.
I have set the correct ExternalHost in the PhoneGap.plist file so that it will accept the external domain.
If I tell the iframe to access a .html page (on the server), it works perfectly - However if I change the extension to .php I get a blank iframe.
This is all while testing the app directly on the iPad and the IOS Simulator.
Could anyone suggest anything I have missed out?
I've switched my Facebook page to pull an iframe as a result of Facebook's recent announcement that they were supporting iframes in pages. Since you need to host the iframe page outside of Facebook, I figured it would be nice to do using Cloudfront to host the files (an HTML page, a CSS stylesheet and a jpg image). Unfortunately, despite setting the permissions on the Cloudfront files to 744, the iframe page loads correctly in a browser, but when called from Facebook, I get this error message.
When I host the same files on my Media Temple server, the iframe on the actual Facebook page also loads correctly.
Is there a reason why Facebook and Cloudfront don't play together? I haven't been able to find one so far.
Unfortunately Facebook loads the iframe page using an HTTP POST, not an HTTP GET and is not compatible since Amazon has a REST interface and properly uses POST to upload/modify content.
Best,
David Bullock
I ran into this problem today and it caused some headscratching. As David Bullock points out the problem is that Facebook loads the HTML page via a POST request but S3 (and thus by extension CloudFront) won't serve resources in response to this (it returns 405 Method Not Allowed).
You can host your CSS, scripts and images on S3 / CloudFront, but the initial HTML page has to be on some other server. If you're concerned about load or latency from across the globe then you could try implementing a tiny redirector that forwards the Facebook POST request to the CloudFront-cached location (you'll have to return 303 See Other to do this redirection so the browser makes a GET request instead: see RFC 2616).
There is a shockingly easy workaround to the fact that AWS rejects POST requests and the fact that Facebook requires page tabs to be hosted via HTTPS: just redirect the request through https://bit.ly/….
Yes, it's really that easy.
Host the HTML page wherever you like. HTTP is fine.
Create a bit.ly-shortened URL to the page.
Use it—substituting https:// for http://—as the "Secure Page Tab
URL" as you create your Facebook Page Tab.
Activate the tab using this highly-undocumented dialog URL: https://www.facebook.com/dialog/pagetab?app_id=app_id&redirect_uri=bitly_url
Boom: done.
OK, it can be done: but you need to host the images on Cloudfront and the rest of the content on S3. Amazon provides a set of clear instructions on how to this. Issue solved.
Use Cloudfront to trap the 405 error and serve your html as the "Custom Error Response" page to the desired index page
Updated:
This was down voted, however I'm going to help lots of Facebook developers with the following. The final Issue that we had with hosting a facebook application on S3 was with CORS. We fixed the 405's by doing a "Custom Error Response" See this link for details:
http://blog.celingest.com/en/2014/10/02/tutorial-using-cors-with-cloudfront-and-s3/