PlayTube PWA Documentation

Version 1.0

Getting Started #back to top

Get started



There are a few prerequisite to handle first

  • Site MUST be HTTPS enabled
  • Setup OneSignal account

Upload all contents in public_html folder to the the PlayTube root directory after making the your edits. If you are using another directory for PlayTube such as then you will need to edit the folder structure of the following files

  • main.js
  • manifest.json
  • service-worker.js

For example


Would become


Of course if you are not using the default theme then you have some additional edits to make. =[

Note: The service worker MUST be in the root directory of the server. So if you have your PlayTube installation located in /public_html/playtube/ then your main.js, service-worker.js, and OneSignal JavaScript files must be located in /public_html/

Edits #back to top


You will need to edit the included files and make a template edit in order for this to function properly

In manifest.json replace YOUR WEBSITE NAME with the name of your website. This is how the name will be displayed in the PWA. (Progressive Web App)

Make note that there is a name and a short name, the short name will be displayed on the homescreen if the name is longer than 15 characters, otherwise it will cut off part of the name.

You can also change the color of the browser bar by changing theme_color to a hex code of your choosing.

You will then need to enter your gcm_sender_id provided in the manifest file in the provided SDK from OneSignal.

Now you need to edit your template file to include the following code below {{OG_METATAGS}}

<!-- START OneSignal -->
<script src="" async=""></script>
	var OneSignal = window.OneSignal || [];
	OneSignal.push(function() {
		appId: "YOUR APP ID",
<!-- END OneSignal -->
<!-- START Favicons -->
<meta name="apple-mobile-web-app-title" content="Vigeos">
<meta name="application-name" content="Vigeos">
<meta name="theme-color" content="#000000">
<link rel="apple-touch-icon" sizes="180x180" href="../../themes/default/img/pwa/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../../themes/default/img/pwa/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../../themes/default/img/pwa/favicon-16x16.png">
<link rel="mask-icon" href="../../themes/default/img/pwa/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="../../themes/default/img/pwa/favicon.ico">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-config" content="../../themes/default/img/pwa/browserconfig.xml">
<!-- END Favicons -->
<!-- LOAD Manifest -->
<link rel="manifest" href="../../manifest.json">
<!-- END LOAD Manifest -->

Again if your PlayTube installation is in a directory other than root you will need to add that directory after any ../../

You will also need to add your OneSignal App ID in place of YOUR APP ID

Get a Installation Service Ask a Question

Icons #back to top

In order to get icons for your app you need to visit Real Favicon Generator and upload a 512px x 512px transparent PNG so that it can generate all the required sized icons for PlayTube PWA. Once you have them delete the manifest file and upload them to /themes/default/img/pwa/

Credits #back to top

Version History (Changelog) #back to top


                                        1.0 - Release


Copyright and license #back to top

* Unauthorized copying of this PlayTube Progressive Web App (PWA) script or it's documentation, via any medium is strictly prohibited
* Proprietary and confidential