PWA Website Feature Technical Information

PWA Website Feature Technical Information

Using the website feature in a progressive web app compared to a native application has its differences. Here is a quick, semi technical breakdown explaining those differences.

It helps to first explain the website feature in a native application to understand how PWAs are different. In a native app, the website feature is essentially a 'lite' version of a browser, like Chrome or Safari.
In a PWA you of course are either already in the browser, or if its added to the device homescreen you are running a version of that devices browser.
Displaying a website inside a PWA is effectively displaying a website within a website. The technical term for this is an 'iframe'. This works, however there are a few reasons where it is not possible.

1. Our Progressive Web App product is a fully secure web app that is hosted over an ssl secure connection. Because of this, sites that have insecure connections can be blocked from being iframed by the browser. Browsers like Chrome, Safari, Firefox and others chose how to block these pages, and they even do it differently depending on the platform. (ie. Safari on your laptop can act differently than Safari on your iPhone.)

2. Websites can block from being placed in an iframe with X-Frame-Options or other detectable means. Websites such as Google.com, Facebook.com, Amazon.com and more block from being iframed. In order to detect if a website is blocking from being iframed you can check on a iframe checker like this one: http://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker
Once you enter there URL, run the checker. Here is a sample of the blocking output from Amazon.com

3. Frame killer scripts. This is an additional way websites can block from being iframed. On the same website as above: http://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker You will see the number 2 option, a frame killer checker.
Simply paste the URL here and run it, if you see the website displayed in the box on their site, you should be ok. If it does not display, they are using alternative means to block the iframe.

Solution: Contextual Errors page
We have introduced a couple informational error pages to both educate you as to why that page isn't working, but to also allow for your users to access those URLs if you chose to let them.
You can see the screen below showing some of the error messages. This page will be displayed instead of the alternative, a blank white screen.
If you wish, you can find these sentences in your translation tool and modify them for you and your clients liking.