Building a Progressive Web App with Showcase - jwplayer/jw-showcase GitHub Wiki

Important: These instructions are only relevant if you are building from the JW Showcase source code. They cannot be used with the precompiled app (i.e., the precompiled-static-app.zip download).

If you are unfamiliar with PWAs, read Google's Progressive Web Apps page to learn more.

The JW Showcase PWA enables users to save your Showcase as an icon on the homescreen of their mobile device. When the user taps the icon, it opens your Showcase in a "chromeless" user experience, just like a native app. The Showcase PWA also enables users to save videos to their device for offline viewing (Android devices only).

Prerequisites

  • HTTPS must be enabled on the site that hosts your PWA

Clone Showcase from Github

Follow all steps in the Building from the Source Code page to setup a local build environment.

Edit the config.json file

Open app/config.json in a text editor and make the desired changes. Read more about the Showcase config.json on the Getting Started page.

Edit the manifest.json file

The manifest file contains configuration settings for your PWA. For more information about the properties in the manifest, see the Web App Manifest specification.

Open app/manifest.json in a text editor and make the following changes:

  • Enter your app's name and short_name. The short_name is the text that will accompany the app icon when a user saves your app to the home screen.
  • Enter your app's description.
  • Enter a color in hex format for background_color.
  • Enter a color in hex format for theme_color.
  • If your Showcase is being served from a subdirectory (like https://domain.com/showcase) you must change the start_url to the same name as your subdirectory (for example, /showcase/).

Icons

Replace all the default icons in the app/images/ directory with your own custom icons. Make sure that the size corresponds with the size in the filename.

Build the PWA

Build Showcase with the following command and wait for it to complete:

$ grunt build --pwa

Copy the Showcase Files to Your Web Server

Make sure you copy all the files and directories to the root directory of your web server, including the .htaccess file, from your build's dist folder. Mac OS Finder and Windows File Explorer usually treat .htaccess as a system file and thus don't show it by default, so you might need to temporarily change your computer's settings to display hidden files.