New WebViewer UI Beta - Ionic on Mobile Devices

[David Compton]

Hi,

I've been trying out the WebViewer new ui beta.  I'm really pleased with the new interface and the unified approach to desktop and mobile :-).  Especially things like fit width, rotate and continuous being available on mobile (well I presume they are.... read on).

The app that we use WebViewer in is an Ionic app.  So I set up a very simple test project in Ionic for the new WebViewer ui.  This works fine on desktop in Windows and Mac.  However it will not work in the browser on an iOS device (Safari or Chrome) or an Android device (Chrome).  Nor will the hybrid native app work on iOS.  What I find in the instances where it does not work is that it loads the WebViewer interface but does not load the file.  The file is being loaded from a server (that handles CORS correctly) where we have logging enabled and I can confirm that in these instances where the file is not loaded there is no request even hitting the file server.

You can view my simple test project in action here:  https://newwebviewerui.docsontap.com.au/ .  And get to the code base here:  https://github.com/daveywc/webviewer-new-ui .  I'd really like to test this out on mobile - can you offer any suggestions as to why this is not working?

Kind regards,

David

[Matt Parizeau]

Hi David,

I think the problem is that the mobileRedirect option is still active for the new UI so the page is navigating away and your code to handle the ready event and load the document will never run.

To fix this you can either set the mobileRedirect option to false or use the initialDoc option on the WebViewer constructor. We'll update the documentation to make this more clear and consider making mobileRedirect false the default for the new UI as iframe issues seem to be less common in newer mobile browsers.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[David Compton]

"I set the mobileRedirect option to false.  This fixes the problem when running  https://newwebviewerui.docsontap.com.au/ in a browser on my iPad.

However when I build an iOS app and run that on my iPad things still don't work.  However the problem there is different in that the web viewer UI does not even show up.  Interesting when I run in the browser on the Mac using "ionic serve" I get an error " Reference Error: PDFTron is not defined ".  After installing Chrome on the Mac I got more information - it says "refused to execute script because its mime type ("text/html")  is not executable and strict MIME type checking is enabled"  - when it is trying to load webviewer.min.js.  This then results in the same "Reference Error: PDFTron is not defined".  I cannot really be sure that the two problems are related as one is running the code in a native app and the other is running on a development server.  But they do both result in the same problem - the web viewer UI is not loaded.  I don't get any of these issues with our production Ionic app running the current version of the web viewer UI.  Maybe it is something in my config, but I really am struggling to see what that is.

Any thoughts on all of this?  Latest code is still at  https://github.com/daveywc/webviewer-new-ui

Regards,

David

--
You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webview...@googlegroups.com.
To post to this group, send email to pdfnet-w...@googlegroups.com.
Visit this group at https://groups.google.com/group/pdfnet-webviewer.
For more options, visit https://groups.google.com/d/optout.

[Matt Parizeau]

Hi David,

It might be that the path to WebViewer.min.js in your script tag is incorrect and your server is returning an html 404 page which is why it's complaining that the mime type is text/html. So I would check to see what your server is responding to the WebViewer.min.js request with and that the script src is correct. It might be something to do with how relative paths are being treated on your server.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Friday, June 29, 2018 at 9:52:48 AM UTC-7, David Compton wrote:

"I set the mobileRedirect option to false.  This fixes the problem when running  https://newwebviewerui.docsontap.com.au/ in a browser on my iPad.

However when I build an iOS app and run that on my iPad things still don't work.  However the problem there is different in that the web viewer UI does not even show up.  Interesting when I run in the browser on the Mac using "ionic serve" I get an error " Reference Error: PDFTron is not defined ".  After installing Chrome on the Mac I got more information - it says "refused to execute script because its mime type ("text/html")  is not executable and strict MIME type checking is enabled"  - when it is trying to load webviewer.min.js.  This then results in the same "Reference Error: PDFTron is not defined".  I cannot really be sure that the two problems are related as one is running the code in a native app and the other is running on a development server.  But they do both result in the same problem - the web viewer UI is not loaded.  I don't get any of these issues with our production Ionic app running the current version of the web viewer UI.  Maybe it is something in my config, but I really am struggling to see what that is.

Any thoughts on all of this?  Latest code is still at  https://github.com/daveywc/webviewer-new-ui

Regards,

David

On Fri, 29 Jun 2018 at 11:39, Matt Parizeau via PDFTron WebViewer <pdfnet-webviewer+APn2wQfzwjN3K1PXhwB2EpteOBUOrXzBt3Iu_yTiKOGMlKG@googlegroups.com> wrote:

Hi David,

I think the problem is that the mobileRedirect option is still active for the new UI so the page is navigating away and your code to handle the ready event and load the document will never run.

To fix this you can either set the mobileRedirect option to false or use the initialDoc option on the WebViewer constructor. We'll update the documentation to make this more clear and consider making mobileRedirect false the default for the new UI as iframe issues seem to be less common in newer mobile browsers.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Wednesday, June 27, 2018 at 4:16:03 PM UTC-7, David Compton wrote:

Hi,

I've been trying out the WebViewer new ui beta.  I'm really pleased with the new interface and the unified approach to desktop and mobile :-).  Especially things like fit width, rotate and continuous being available on mobile (well I presume they are.... read on).

The app that we use WebViewer in is an Ionic app.  So I set up a very simple test project in Ionic for the new WebViewer ui.  This works fine on desktop in Windows and Mac.  However it will not work in the browser on an iOS device (Safari or Chrome) or an Android device (Chrome).  Nor will the hybrid native app work on iOS.  What I find in the instances where it does not work is that it loads the WebViewer interface but does not load the file.  The file is being loaded from a server (that handles CORS correctly) where we have logging enabled and I can confirm that in these instances where the file is not loaded there is no request even hitting the file server.

You can view my simple test project in action here:  https://newwebviewerui.docsontap.com.au/ .  And get to the code base here:  https://github.com/daveywc/webviewer-new-ui .  I'd really like to test this out on mobile - can you offer any suggestions as to why this is not working?

Kind regards,

David

--
You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webviewer+unsubscribe@googlegroups.com.
To post to this group, send email to pdfnet-webviewer@googlegroups.com.

[David Compton]

This ended up being a case sensitivity issue that only showed up on iOS.  I was referencing webviewer.min.js instead of WebViewer.min.js.

On Sat, 30 Jun 2018 at 09:45, Matt Parizeau via PDFTron WebViewer <pdfnet-webviewer+APn2wQfzwjN3K1P...@googlegroups.com> wrote:

Hi David,

It might be that the path to WebViewer.min.js in your script tag is incorrect and your server is returning an html 404 page which is why it's complaining that the mime type is text/html. So I would check to see what your server is responding to the WebViewer.min.js request with and that the script src is correct. It might be something to do with how relative paths are being treated on your server.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Friday, June 29, 2018 at 9:52:48 AM UTC-7, David Compton wrote:

"I set the mobileRedirect option to false.  This fixes the problem when running  https://newwebviewerui.docsontap.com.au/ in a browser on my iPad.

However when I build an iOS app and run that on my iPad things still don't work.  However the problem there is different in that the web viewer UI does not even show up.  Interesting when I run in the browser on the Mac using "ionic serve" I get an error " Reference Error: PDFTron is not defined ".  After installing Chrome on the Mac I got more information - it says "refused to execute script because its mime type ("text/html")  is not executable and strict MIME type checking is enabled"  - when it is trying to load webviewer.min.js.  This then results in the same "Reference Error: PDFTron is not defined".  I cannot really be sure that the two problems are related as one is running the code in a native app and the other is running on a development server.  But they do both result in the same problem - the web viewer UI is not loaded.  I don't get any of these issues with our production Ionic app running the current version of the web viewer UI.  Maybe it is something in my config, but I really am struggling to see what that is.

Any thoughts on all of this?  Latest code is still at  https://github.com/daveywc/webviewer-new-ui

Regards,

David

On Fri, 29 Jun 2018 at 11:39, Matt Parizeau via PDFTron WebViewer <pdfnet-webviewer+APn2wQfzwjN3K1P...@googlegroups.com> wrote:

Hi David,

I think the problem is that the mobileRedirect option is still active for the new UI so the page is navigating away and your code to handle the ready event and load the document will never run.

To fix this you can either set the mobileRedirect option to false or use the initialDoc option on the WebViewer constructor. We'll update the documentation to make this more clear and consider making mobileRedirect false the default for the new UI as iframe issues seem to be less common in newer mobile browsers.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Wednesday, June 27, 2018 at 4:16:03 PM UTC-7, David Compton wrote:

Hi,

I've been trying out the WebViewer new ui beta.  I'm really pleased with the new interface and the unified approach to desktop and mobile :-).  Especially things like fit width, rotate and continuous being available on mobile (well I presume they are.... read on).

The app that we use WebViewer in is an Ionic app.  So I set up a very simple test project in Ionic for the new WebViewer ui.  This works fine on desktop in Windows and Mac.  However it will not work in the browser on an iOS device (Safari or Chrome) or an Android device (Chrome).  Nor will the hybrid native app work on iOS.  What I find in the instances where it does not work is that it loads the WebViewer interface but does not load the file.  The file is being loaded from a server (that handles CORS correctly) where we have logging enabled and I can confirm that in these instances where the file is not loaded there is no request even hitting the file server.

You can view my simple test project in action here:  https://newwebviewerui.docsontap.com.au/ .  And get to the code base here:  https://github.com/daveywc/webviewer-new-ui .  I'd really like to test this out on mobile - can you offer any suggestions as to why this is not working?

Kind regards,

David

--
You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webview...@googlegroups.com.
To post to this group, send email to pdfnet-w...@googlegroups.com.

Visit this group at https://groups.google.com/group/pdfnet-webviewer.
For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webview...@googlegroups.com.
To post to this group, send email to pdfnet-w...@googlegroups.com.

[David Compton]

Hi Matt,

A very similar error has cropped up again with version 4.0.  This time the error message on iOS (cordova) is ReferenceError: Can't find variable: PDFTron.  However the app runs fine with the same ionic code base in the web browser.  However the source of the problem must be different as my script block is as follows (with the correct case for webviewer.min.js):

<script src="assets/pdftron/core/external/jquery-3.2.1.min.js" onload="if (typeof require !== 'undefined') { window.$ = window.jQuery = module.exports; }"></script>

  <script src="assets/pdftron/webviewer.min.js"></script>

PDFTron seems to be the correct case to use for the PDFTron variable.  Do you have any idea what the source of this problem might be?  I cannot be sure that it is a case sensitivity issue - like it was last time - but it may well be.

Thanks,

David

On Tuesday, 10 July 2018 03:00:56 UTC+10, David Compton wrote:

This ended up being a case sensitivity issue that only showed up on iOS.  I was referencing webviewer.min.js instead of WebViewer.min.js.

On Sat, 30 Jun 2018 at 09:45, Matt Parizeau via PDFTron WebViewer <pdfnet-webviewer+APn2wQfzwjN3K1PXhwB2EpteOBUOrXzBt3Iu_yTiKOGMlKG@googlegroups.com> wrote:

Hi David,

It might be that the path to WebViewer.min.js in your script tag is incorrect and your server is returning an html 404 page which is why it's complaining that the mime type is text/html. So I would check to see what your server is responding to the WebViewer.min.js request with and that the script src is correct. It might be something to do with how relative paths are being treated on your server.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Friday, June 29, 2018 at 9:52:48 AM UTC-7, David Compton wrote:

"I set the mobileRedirect option to false.  This fixes the problem when running  https://newwebviewerui.docsontap.com.au/ in a browser on my iPad.

However when I build an iOS app and run that on my iPad things still don't work.  However the problem there is different in that the web viewer UI does not even show up.  Interesting when I run in the browser on the Mac using "ionic serve" I get an error " Reference Error: PDFTron is not defined ".  After installing Chrome on the Mac I got more information - it says "refused to execute script because its mime type ("text/html")  is not executable and strict MIME type checking is enabled"  - when it is trying to load webviewer.min.js.  This then results in the same "Reference Error: PDFTron is not defined".  I cannot really be sure that the two problems are related as one is running the code in a native app and the other is running on a development server.  But they do both result in the same problem - the web viewer UI is not loaded.  I don't get any of these issues with our production Ionic app running the current version of the web viewer UI.  Maybe it is something in my config, but I really am struggling to see what that is.

Any thoughts on all of this?  Latest code is still at  https://github.com/daveywc/webviewer-new-ui

Regards,

David

On Fri, 29 Jun 2018 at 11:39, Matt Parizeau via PDFTron WebViewer <pdfnet-webviewer+APn2wQfzwjN3K1PXhwB2EpteOBUOrXzBt3Iu_yTiKOGMlKG@googlegroups.com> wrote:

Hi David,

I think the problem is that the mobileRedirect option is still active for the new UI so the page is navigating away and your code to handle the ready event and load the document will never run.

To fix this you can either set the mobileRedirect option to false or use the initialDoc option on the WebViewer constructor. We'll update the documentation to make this more clear and consider making mobileRedirect false the default for the new UI as iframe issues seem to be less common in newer mobile browsers.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Wednesday, June 27, 2018 at 4:16:03 PM UTC-7, David Compton wrote:

Hi,

I've been trying out the WebViewer new ui beta.  I'm really pleased with the new interface and the unified approach to desktop and mobile :-).  Especially things like fit width, rotate and continuous being available on mobile (well I presume they are.... read on).

The app that we use WebViewer in is an Ionic app.  So I set up a very simple test project in Ionic for the new WebViewer ui.  This works fine on desktop in Windows and Mac.  However it will not work in the browser on an iOS device (Safari or Chrome) or an Android device (Chrome).  Nor will the hybrid native app work on iOS.  What I find in the instances where it does not work is that it loads the WebViewer interface but does not load the file.  The file is being loaded from a server (that handles CORS correctly) where we have logging enabled and I can confirm that in these instances where the file is not loaded there is no request even hitting the file server.

You can view my simple test project in action here:  https://newwebviewerui.docsontap.com.au/ .  And get to the code base here:  https://github.com/daveywc/webviewer-new-ui .  I'd really like to test this out on mobile - can you offer any suggestions as to why this is not working?

Kind regards,

David

--
You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webviewer+unsubscribe@googlegroups.com.
To post to this group, send email to pdfnet-webviewer@googlegroups.com.

Visit this group at https://groups.google.com/group/pdfnet-webviewer.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webviewer+unsubscribe@googlegroups.com.
To post to this group, send email to pdfnet-webviewer@googlegroups.com.

[David Compton]

In the end I tracked this down to a similar case sensitivity issue with the the webviewer.min.js (and webviewer.js) scripts.  In this case the problem was that the case of the scripts was not updating in the Git remote repository being used to build the iOS app.  I ended up having to explicitly change the case by using the following Git command:  git mv --force WebViewer.min.js webviewer.min.js

On Tue, 16 Oct 2018 at 08:14, David Compton via PDFTron WebViewer <pdfnet-webviewer+APn2wQdEfU_0bWn...@googlegroups.com> wrote:

Hi Matt,

A very similar error has cropped up again with version 4.0.  This time the error message on iOS (cordova) is ReferenceError: Can't find variable: PDFTron.  However the app runs fine with the same ionic code base in the web browser.  However the source of the problem must be different as my script block is as follows (with the correct case for webviewer.min.js):

<script src="assets/pdftron/core/external/jquery-3.2.1.min.js" onload="if (typeof require !== 'undefined') { window.$ = window.jQuery = module.exports; }"></script>

  <script src="assets/pdftron/webviewer.min.js"></script>

PDFTron seems to be the correct case to use for the PDFTron variable.  Do you have any idea what the source of this problem might be?  I cannot be sure that it is a case sensitivity issue - like it was last time - but it may well be.

Thanks,

David

On Tuesday, 10 July 2018 03:00:56 UTC+10, David Compton wrote:

This ended up being a case sensitivity issue that only showed up on iOS.  I was referencing webviewer.min.js instead of WebViewer.min.js.

To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webview...@googlegroups.com.
To post to this group, send email to pdfnet-w...@googlegroups.com.

Visit this group at https://groups.google.com/group/pdfnet-webviewer.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webview...@googlegroups.com.
To post to this group, send email to pdfnet-w...@googlegroups.com.

Visit this group at https://groups.google.com/group/pdfnet-webviewer.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webview...@googlegroups.com.
To post to this group, send email to pdfnet-w...@googlegroups.com.

[Justin Jung]

Hi David,

Yes git in some OS has trouble dealing with case sensitivity. The git command you used should fix the issue.

Justin Jung