The Desktop Web Viewer is a modern browsing experience that displays content on computers in a full viewer. You have control over some settings to define the user experience.

The web viewer runs your full app in a desktop web browser, including browse page navigation, entitlement sign-in capabilities, and fixed-layout or HTML-based articles.

 

The web viewer displayed on a desktop computer. Users can scroll down the page, zoom in and out, and navigate easily between articles and browse pages.

Configuring the web viewer

  1. In the On-Demand Portal (https://aemmobile.adobe.com), choose Apps in the left rail. Then choose Create > Desktop Web Viewer.

     

  2. Specify Desktop Web Viewer settings, and complete the process.

    Custom Domain URL – Specify the URL (starting with https://) of the website that you've set up to host the web viewer URL. See the section later in this document about setting up a custom domain URL.

    Privacy Policy URL – If you specify a privacy policy URL, "Privacy Policy" appears in the web viewer menu. If a user clicks Privacy Policy, the specified web page is displayed.

    Terms of Use URL – Specify the URL of a web page that describes your app's terms of use. If a user clicks Terms of Use, the specified web page is displayed.

    Copyright – Specify the copyright notice that appears in the web viewer.

    Show analytics opt-in dialog – If you select this option, your customers will view an opt-in dialog box before viewing content, allowing them to opt out of data tracking. Whether this option is selected or not, users can use web viewer settings to opt in or out at any time. This option is especially useful for regions in which you are obligated to allow users to opt out of data tracking.

  3. If you want custom fonts to be available in web viewer, edit the fonts in the Fonts section of the Portal and select the "Enable web font for the public desktop web viewer" option.

    For information about uploading fonts, see Creating cards and layouts: Using custom fonts.

  4. Publish content to make it available for web viewer.

  5. Make the Desktop Web Viewer available to your audience.

    You can copy the "URL" link available in the Apps section of the Portal (see image below) and make it available to your customers on your web site or through other methods.

    If both Social Sharing and Desktop Web Viewer are enabled in a project, clicking a share link on a desktop or laptop computer opens the web viewer version of the article. See Social sharing in AEM Mobile apps.

Testing the web viewer

After you build the Desktop Web Viewer app in the Portal, click the Link on a computer to view the Desktop Web Viewer in your browser.

Additional web viewer information

General web viewer information

  • If the project includes both tablet and phone top-level collections, the top-level collection for tablet is used in web viewer.
  • Web viewer does not work with the Preflight option. Publish collections and articles to make them available in web viewer.
  • Web viewer does not work offline.
  • When navigating to a browse page or article, the most recent version is displayed. While that browse page or article is already displayed, web viewer will not detect when a new update is available.
  • Web viewer browse pages are rendered at a fixed width of 960 pixels. InDesign-based articles are rendered at the width of its target layout dimensions.

 

 

System requirements

  • Mac OSX 10.10 or later with the two most recent browser versions of Safari, Chrome, or Firefox.
  • Windows 7 or 8.x with the two most recent browser versions of Chrome or Firefox; Internet Explorer 11 or later.
  • Web Viewer not supported on tablets or phones.

The web viewer works only on computer browsers, not mobile devices. If the web viewer link is opened on a phone or tablet, the redirect goes to the social share landing page specified in article settings. The landing page can include links to the app stores. There isn't a landing page for collections, so a URL to a collection will result in a similar page with a link to the app store for that device. Specify app store links using the Store tab of project settings.

Hosting location

By default, the web viewer is hosted on Adobe servers at https://viewer.aemmobile.adobe.com.

You can host the web viewer URL on your own domain, as described later in this document.

Navigation

  • Readers can navigate back and forth using the navigation bar that appears when hovering over the bottom of the screen.
Hovering the mouse pointer over the bottom of the screen displays a navigation bar.

  • The navto://relative/parent format is unsupported but should be implemented soon.

Interactive overlay support and guidance

  • All InDesign-based overlays are supported.

 

  • Swiping in slideshows is not supported. We recommend that you enable tap to play or provide previous and next buttons.
  • For audio overlays, only MP3 files are fully supported. Other audio formats such as WAV, MP4, and OGG are not fully supported in all browsers.
  • Playing background audio files is not supported. Audio is limited to a specific article.
  • If an audio or video overlay in a container overlay is set to autostart, it will not start when it comes into view.
  • For video overlays, only MP4 and M4V formats are supported. For full support in Firefox, the MIME type is important. Externally hosted videos should be served with the video/mp4 MIME type. It's also preferable for videos to use the .mp4 extension instead of .m4v. You can simply rename the extensions of the video file.
  • If a video overlay is playing within a container overlay and the reader scrolls the container off the page, the video does not stop playing.
  • If a web overlay is inside a container’s state and the reader changes that state, the web overlay remains active.

Display of InDesign-based articles

  • The Horizontal Swipe Only option in InDesign-based articles is not supported. These "flattened" articles are displayed vertically.
  • If you create a smooth scrolling article in InDesign, make sure that you specify the target dimensions (such as 1024x768) rather than the page dimensions (such as 1024x3000) when exporting the article file.
  • Page-by-page InDesign articles are displayed in web viewer with separators between pages.
By design, gaps appear between page-by-page InDesign-based articles.

Analytics

  • In-app-messaging is not supported in web viewer. In-app messaging requires the Mobile SDK, which is not available on desktop computers.
  • For information about analytics captured in web viewer, see Analytics for AEM Mobile.

Disabling the web viewer

To disable Desktop Web Viewer for your project, select Desktop Web Viewer in the Apps section of the Portal and click the trash icon to delete it.

Setting up a custom domain URL

When you set up custom domain URL, all application code and content is still hosted on Adobe servers, but will appear to be on your domain to end users.

Example of default web viewer URL

https://viewer.aemmobile.adobe.com/index.html#project/abcdefgh-a123-4567-890a-ab1234567890/view/myView/article/myArticle

Example of custom web viewer URL

https://www.mydomain.com/custompage.html#project/abcdefgh-a123-4567-890a-ab1234567890/view/myView/article/myArticle

  1. Host a simple HTML page on your site. This web page can be named anything you like.

    Your page must be hosted on a valid domain, and it must be served via https, not http. Your hosting domain must have a valid SSL certificate associated with it.

  2. Include the following HTML code in the web page you specify.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="x-ua-compatible" content="IE=edge">
    	<script src="https://viewer.aemmobile.adobe.com/loader.js"></script>
    </head>
    <body></body>
    </html>

    The meta tag with http-equiv="x-ua-compatible” is used by Microsoft Internet Explorer to determine the document mode that should be used when rendering the page. Using this meta tag will avoid problems for users that have compatibility mode enabled in IE. Unlike other meta tags that are added dynamically, this one must be included in the page for IE to interpreted correctly.

    The script tag points to a JavaScript loader script that will dynamically generate the HTML elements required to display and render your app.  

  3. Specify your URL in the "Custom Domain URL" field when creating your Desktop Web Viewer app in the Portal. Specify the full URL to your custom hosting page, including protocol and page name, such as https://www.mydomain.com/custompage.html.

     

  4. After you build the Desktop Web Viewer app, click "URL" to display your content in your current browser. Your custom domain should be used in the URL.

The use of additional scripts, libraries, or other content is not officially supported for custom domain hosting. In particular, any code, such as ad libraries, that modifies the page’s DOM or adds visual elements to the page is not supported and may result in unexpected behavior. In addition, adding additional CSS styles to the page can result in unexpected behavior or visual artifacts.

Această lucrare este oferită sub licență Atribuire-Necomercial-FărăModificări 3.0 Ne-adaptată Creative Commons  Postările pe Twitter™ şi Facebook nu sunt acoperite de condiţiile de licenţiere Creative Commons.

Prevederi legale   |   Politică de confidențialitate online