Building a PWA

Introduction: Progressive Web Apps (PWA’s) bring native app-like experiences and functionality, and are an extremely efficient way to deliver rich digital experiences that can be instantly consumed by anyone, anywhere, on any device.  PWA’s can be built in just a few minutes, can be fully customised and do not require submission to the Apple App or Google Play stores.

Creating a new PWA:

  1. Navigate to the ‘Publication / Brand Manager’
  2. Click the Settings of the Publication you would like to build a PWA for 

  3. From the ‘Publish Channels’ tab, select ‘Add New Channel' 

  4. Select “Web App (PWA)”, a number of configuration options will be displayed 

Configuring the PWA

The configuration area is where your PWA can be customised and designed.  This includes domain configuration, deployment settings and colour theming.  The following properties can be defined:

  • Channel Name: The name of your PWA channel.  This is only visible within the Canvasflow dashboard
  • Language: The default language of your content
  • App Title: The title of the app.  This is displayed when an app is installed to a devices homescreen
  • App Short Title: The title of the app to be used if there isn’t sufficient space for the full App Title to be displayed
  • Domain: The subdomain where the app will be hosted. This can be any valid subdomain (e.g. motornews, resulting in motornews.canvasflow.io).
    • Note: 1. The domain cannot be changed via the UI once the PWA is built. 2. The domain can be served from a custom or vanity domain / subdomain once in production. Please contact our support team for more information.
  • Issue Mode:
    • Single Issue: When the app is opened, a user will be taken directly to the first page of the latest issue.  When a new issue is published, only the latest issue will be visible.
    • Multi Issue: - The app displays a newsstand layout and all available Issues will be displayed when opening the app.

  • Paid Status:
    • Free - Set when the publication is free to access - all issues will be available without payment.
    • Paid -  Allows you to define the default price and currency for an issue.  The price and status can be overridden on a per issue basis if required.  Enable paid if you wish to sell one or more issues.
  • Additional Languages: Add support for multi language within the app. Additional languages can be enabled by adding comma delimited ISO 639-1 language codes (e.g. fr,de,en,es)
  • Reader Mode: Enabling provides the user with an option to hide article images for a more condensed reading experience
  • Font Size: Enabling to provide the user with a ‘Font Slider’ to manually control the size of content
  • Text to Speech (TTS): When Enabled, Text to Speech files will be automatically generated for each article and a play button will appear in the app.

  • Replica Mode: If enabled, the user will have the option to switch between the replica (PDF) version and responsive versions of the content
    • Is Default: Enabled: the replica version will be presented by default, the user can switch to responsive mode.  
    • Disabled: The responsive version of the content will be shown by default, the user can switch to the replica version of the content
      • Note: Replica Mode only has an effect if the source content was imported via the Canvasflow PDF XFlow import service.  Contact us to learn more about this service.

  • S3 Region: Define the specific geographical region where the apps assets will be hosted.  You can choose any region however we recommend selecting the region geographically closest to your audience to optimize latency.  The current regions are:
    • US East (Ohio)
    • US East (N. Virginia)
    • US West (N. California)
    • US West (Oregon)
    • Africa (Cape Town)
    • Asia Pacific (Hong Kong)
    • Asia Pacific (Mumbai)
    • Asia Pacific (Osaka-Local)
    • Asia Pacific (Seoul)
    • Asia Pacific (Singapore)
    • Asia Pacific (Sydney)
    • Asia Pacific (Tokyo)
    • Canada (Central)
    • China (Beijing)
    • China (Ningxia)
    • Europe (Frankfurt)
    • Europe (Ireland)
    • Europe (London)
    • Europe (Milan)
    • Europe (Paris)        
    • Europe (Stockholm)
    • Middle East (Bahrain)
    • South America (São Paulo)
      • Note: 1. All PWA’s sit behind an AWS Cloudfront CDN that securely delivers all data to customers globally, with low latency and high transfer speeds. 2.The S3 region cannot be changed via the UI once the app is built.

  • Prompt Install Message: When Enabled, readers who navigate to the PWA domain on mobile will be prompted with a message to install the app to the device
  • Analytics and Marketing tools: It is possible to add 3rd party analytics and marketing services into an app. To enable a service, simply enter the appropriate ID or domain.
    • The currently supported services are:
      • Google Analytics
      • Google Tag Manager
      • Caymland M4
      • Ackee
      • Hotjar
      • Hubspot
      • ShareThis
  • Auto Download:
    • Disabled: Users must explicitly click to download the current issue
    • Enabled:  Content is automatically downloaded and intelligently cached for offline reading as soon as the first article is viewed..
      • Note: Enabling ‘Auto Download’ may result in higher bandwidth consumption

  • Authentication:
    • Disabled: Users are not required to authenticate to access content.  This option cannot be selected if content is being sold.
    • Enabled: Users will be required authenticate via a sign in screen before content can be accessed or purchased using any of the following SSO authentication methods:
      • Apple
      • Google
      • Email
  • Protect App: Allows you to protect the PWA with a password.  When an app is protected, a password is required before the app can be accessed
    • Note: 1. This feature is only intended for restricting access when testing a new app build, or limiting access to a small number of people 2. The app password is stored locally on the device so it’s only required to be entered once when accessing an app. 
  • Zoom: If Enabled, a user can zoom in / out of the page
  • Image Zoom: If Enabled, the user can click an image to Zoom in / out

Designing the PWA

The design of the PWA is considered the 'Theme', split between a number of different components, including the control of colours of buttons, backgrounds, and the choice of whether components such as Issue Ribbons are displayed:

  • Splash Icon: App Splash Icon shown upon loading
  • App Splash Background: Background colour shown upon loading
  • App Icon Background: Icon background colour
  • Ribbons: Displayed in the corner of an issue, denoting their free or paid status
  • Issue Title
  • Background: Background colour in the PWA's root where the issues sit
  • Progress Bar: Reader progress bar shown at the top of an issue
  • Top Nav Bar: Top Navigation Bar that includes last page, download and Table of Contents controls
  • Buttons: Buttons for purchases and subscriptions
  • Bottom Bar

  1. Once all options are configured, select “Edit Channel” at the bottom of the modal window to begin the PWA build.
  2. When the app completes the build process, you can return to ‘Article Manager’ and begin publishing content. Alternatively, you can now navigate to the PWA via the subdomain you entered. 
    1. Note: The app build process typically takes 4-5 minutes, however due to DNS resolution times it may take up to 10 minutes before it becomes visible at the requested subdomain.

Still need help? Contact Us Contact Us