Mobile Website Template and PWA
Here are the most comon questions we get regarding our product.
We always learn from the support questions we get from our customers. While some questions help us make the product better and improve the code to make thing simpler, others require a detailed explanation, so you
better understand why a certain issue is happening to you, or why we chose to code the product in such way.
Please note. All the JS in our products is written to be as short, fast, easy to use and powerful as possible! We care a lot about the performance of our pages and we'll always strive to give you the best quality and biggest feature set for the best possible performance!
These are some minor issue that can appear to you, most appear due to following incorrect structures. Don't worry, we got you covered! In case you're still facing issues, please let us know via our support page and we'll gladly assist.
Absolutely. Many customers have converted our products to these SPA frameworks without issues. However, in order not to have conflicts with React/Vue/Angular or anyother SPA framework, please open custom.js and
set the isAJAX parameter to false. You can learn more about these global settings here. The AJAX system can cause conflicts with how virtualized DOM's are managed in SPA frameworks. Furthermore, these
frameworks don't require an AJAX system, since they already have state management and routers which handle the speed issues that our AJAX system is in place for.
Set isAJAX to false, and you can go ahead an convert our products to any framework you want! If you're facing issues, please let us know via our Contact Page
We describe the functionallity of the AJAX page changer in this question. But, to make things short, the page will attempt to load the external link inside the div id page, causing the page to reload. In order to avoid this, simply add the class default-link to any link you aim towards an external page. Your anchor will be a href="your-external-link" class="default-link"
Add all your JavaScript plugins inside all html files above custom.js and place your call function inside custom.js inside the init_template() function, NOT inside the HTML. Be sure to also checkout JS and CSS plugin imports. There are 2 ways of calling them, one being the one mentioned here and a modular loading system which is better for performance.
Simply add your jquery.js to the bottom of the page, just above boostrap.min.js. Be sure you add it to all pages!. After you've added jquery.js to the bottom of your page, place your jQuery call codes inside custom.js inside the init_template() function. If you want to add jQuery inside your HTML file, you will have to disable the AJAX page loading by following this question. Using AJAX is important for page speed unless you create pages in Angular or Vue or React, where routers can be used. We recommend keeping all custom call codes inside custom.js. Below is a sample sructure if you want to use jQuery
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/your-jquery-plugins-go-here.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="js/custom.js"></script> |
The plugins folder holds the plugins we use via our modular loader. (Tutorial Here). This system will make the page load much faster than normal, without performance loss. Check the tutorial for more
Our products use AJAX for page transitions, making them load much faster! This requires a local server for testing or at least a code editor that can simulate Live Previews. We recommend Brackets.io to edit the file,
since this simulates a local server like XAMPP or WAMPP or MAMP, and is absolutely free and made by Adobe ( we are not affiliated with Brackets, we recommend it because it's a GREAT tool we use everyday )
If you see white menus or the back button doesn't work, simply download brackets. Open your entire code folder in brackets, select index.html or whatever HTML file you want in the lefft sidebar and then click File -> Live Preveiew. It will simulate a local server with all AJAX functions activated.
These are global bolean values that can be used to modify the function of certain aspects of our product. Let's take them one by one and clarify.
var isPWA = true;
This varialbe enables or disables the item from being a pwa, meaning, if this variable is set to false, the service-worker will not be loaded, therefore, turning the page into
a classic HTML template.
var isAJAX = true;
Our page uses page transitions and an AJAX system described in detail in this FAQ question. In the case you want you use your own Router Logic, or implement
React, Angular, Vue and you're scripts are not loading, then you can set this variable to false. This is strongly recommended if you plan on implementing an external SPA framework such as React or Vue, where
the AJAX system is less powerful than those offered by these framework. The isAJAX system should not be removed otherwise as it does provide a speed boost for classic HTML templates.
var pwaName = 'Sticky';
The pwaName is the main variable that will be used to register the service worker with and also create all necessary localStorage variables for remembering dark mode, the color highlight you selected and also if the page was
installed or not to the homescreen. You should set the name of your business here to avoid issues with conflicting variables checking for localStorage values.
var remind = 1;
If you added the pwa-install boxes on the home screen of your page, which prompt the user to install the app, these have 2 options, install or maybe later. Once the user
taps maybe later, the value here represents how many days before the prompt will show again if they revisit. In our example, if the user rejects installing the app to his homescreen
the pwa install window / prompt will not appear again for 24 hours.
var pwaNoCache = false;
This ensures that your PWA will always serve fresh data. Whenever you launch your PWA after closing it on your phone (removed from multitask window) it will automatically clear all caches and pick up fresh content.
Please note that iOS devices may choose to ignore this feature, but iOS automatically purges the PWA cache once every 24 hours or so. This is a restriction from Apple to which we have no control over.
var pwaScope = "https://yourserver.com/yourfolder";
The PWA scope is where your PWA is stored on your server, this must be an absolute / full link to the folder where your PWA is installed in order for it to run. Please do not attempt to use a get URL system in here.
Some devices restrict this practice and your service worker may fail to load. Simply copy and paste your server location address in this variable.
var pwaLocation = "https://yourserver.com/yourfolder/_service-worker.js";
The PWA location is the place your service worker is placed. An absolute/full link to the service worker is required. Please keep the service worker file in the same folder as your HTML File, otherwise, this will
not register your PWA.
There can only be 3 reasons the PWA doesn't show the prompt to install the PWA, these are easy to fix, so let's get to them.
HTTPS/SSL - In order for PWA's to work your server must be secure. This a requirement for ALL pwa's and these cannot be installed without SSL. Please make sure your server is SSL before
attemting any of the following.
_service-worker or _manifest.json have no scope - a service worker is the heart of the pwa. This must be present in order for your site to become a PWA. At the top of custom.js
please locate var pwaScope and var pwaLocation. Please replace the addresses there with the main folder where your service worker is located and also the destination of the _service-worker.js file.
Once you've done this, open _manifest.json and set your scope and start_url. Once this is done your PWA is now setup properly. Please note!, do not move the service worker or manifest to the scripts folder. This must be in the same location with your index.html file
Trying to install locally - PWA's require a server to install. You must use a local server or your actual website with the above conditions met to install a pwa.
Missing install boxes - the install boxes can be found at the bottom of the index.html file, called menu-pwa-install-android and menu-pwa-install-ios. These must be on the page
you want them to show. These cannot be triggered manually or Programmatically by the user and will only show if the above conditions are met.
Firstly, if you're an absolute beginner in SCSS, don't be afraid. It's more like a CSS with re-usable variables, in the short way. You can read a small tutorial here
If you're already accustomed to SCSS, When editing our page, you can either edit the style.css element, by using CTRL+F or CMD+F to find the class you are looking for, or by using SCSS.
We structured the SCSS to keep Bootstrap's SCSS files in there and intact, in case you want to dive deep into customizing, and also included our own elements inside.
This is the structure of the SCSS folder
../bootstrap/
../components/
../pages/
../plugins/
../highlights/
../productName/
../_bootstrap.scss
../style.scss
Let's explain.
../bootstrap/ - contains the default Bootstrap SCSS system, unalatered. You can go to /bootstrap/bootstrap.scss to remove elements you don't need or follow
the Bootstrap SCSS logic to edit this file
../components/ - contains all our custom built adition to the component system already presented by bootstrap
../pages/ - contains all our custom built pages
../productName/ - contains all elements that our product depends on to run effectively, including the dark mode, header, footer, menu, logos but also the structure and utility classes. This will also contain the variables we used for fonts, borders, shadows and the dark mode color
To create your own color scheme, we recommend usign SCSS. While it can appear complicated, it actually takes 5 steps to create a new color from scrach.
Step 1. Download the scout-app SCSS compiler - https://scout-app.io/ - 100% free and the easiest compiler to use for SCSS to CSS conversion
Step 2. Open the scout-app application after installing. Now that you've opened it, just drag and drop the main folder (entire folder) where you have our product inside Scout App. Notice it will automaticall add the SCSS input and output files. Be sure you click the play icon in the left sidebar of scout-app so the product will start creating css files when it detects you edited any scss file. This means that now, when you open the product-folder/scss and make any edits to those files the changes will be automatically applied to the existing CSS files.
Step 3. Go to product-folder/scss/highlights and duplicate any file from the folder. Be sure you keep the same name convetion. For example if you want to create an awesomeBuyer color, your file must be named highlight_awesomeBuyer.scss
Step 4. Open the highlight_awesomeBuyer.scss in your code editor ( be sure scout app is opened, the product folder has been dragged and dropped into it, and you clicked the play icon). Once you've opened your highlight_awesomeBuyer at the very top of the code replace the colors found in $colorHighlightLight and $colorHighlightDark with your prefered colors. Be sure these are HEX colors. That is it! Once you save the new color scheme will be automatically imported.
Step 5. In your HTML file, in the body tag, you can now set data-highlight="highlight-awesomeBuyer" and our product will make sure that every element with the class color-highlight, bg-highlight, border-highlight, gradient-highlight will respect the color you added.
Bonus tip - when using scout-app, you can set the Enviroument to "Production - Compressed - LF" which will make your CSS files MUCH more optimized and faster loading.
It's very simple. We will release constant updates for you, and always metion the exact files that were changed. In most cases these will be SCSS files. It's much easier to replace a single SCSS file, and recompile to CSS rather than having to make a tone of changes in lines of code that don't match anymore with your edited code.
Let's say we improve the accordion. In style.css in the original code this could be on line 1000. If you made edits above that line this will be different for you when we release an update. Rather than stressing you with locating countless lines of code that now can differ for you based on your edits, it's much easier to say "just replace the _accordions.scss" file. Also, SCSS files are chunks, meaning less code, and far easier to follow update logs.
Yes, of course! Although, we strongly recommend giving SCSS a shot! We update our products and add new features on a constant basis, so this will be essential to you in updating in the shortest possible time with the least amount of stress. Using CSS will require you to manully CTRL/CMD+F (find) classes and replace or add new ones. SCSS is the way to go, and it's much easier than it looks! The first 3 steps above will cover everything there is to know for a beginner about SCSS and you can write classic CSS code inside it without having SASS knowledge. SCSS just compiles smaller, more programtic CSS into a normal CSS file.
Open the style.css and use CTRL+F or CMD+F to edit find header-logo, or footer-logo. You can find the class names that you wish to search for by right clicking in Google Chrome and clicking "Inspect Element". In the inspection window you will see the class name and on what line it can be found in style.css
Our page will remember the settings you have for the color highlight and the background color if you set them from the bottom menu, and even for the dark mode or light mode. This is automatically done with Cookies based on the color highlight or background you've selected from the page. To remove these cookies simply clear the cookies from the page. If your page doesn't use the menus for changing the colors and backgrounds, cookies won't be created.
When creating our previous framework, we used a very small and fast loading system that didn't necessarily require AJAX to work, but when working with Bootstrap, performance
for mobile devices is an issue.
The structure is designed like this for 2 reasons.
1. To enable our AJAX page transition system to change the content of a the div id="page"
2. To allow for effects when opening action sheets and action modals, a thing that is not offered in Bootstrap.
3. To load all scripts and styles only on the first page visit. This massively increases performance!
For most users, the structure is simple to follow. Think of the div id page as the body. Everything goes inside it. Think of the page-content as the place where only
the content that is on screen will go. It's the simplest possible alteration we can think of that won't requrie you to learn complex code structures.
The AJAX system is here to make pages load much faster and smoother.
Yes, absolutely you can! Just be sure that if you use Modals, Toasts, Snackbars you place these outside your div class="page-content" and make sure your call codes for these are inserted inside custom.js inside the init_template() function. You can read more about this in the How do I add my own JavaScript Code section.
The AJAX system we use is for page transitions and also for massively optimizing page speed. This works on a very simple concept.
When you first access the site, for example, you land on index.html. Our AJAX system will automatically "remember" (not cache) the styles and scripts
sections of your page. When you click a button to go to awesomeBuyer.html for example, the code will only replace the content found inside the div id="page".
Once the awesomeBuyer.html page is injected inside the div id="page" the init_template() function from custom.js will be destroyed and re-fired. This assures maximum
performance while making sure all your JavaScript still runs perfectly without the risk of memory leaks or performance issues on less powerful devices.
This means, there are no calls made to the JS or Style files, and they are still used as the ones originally loaded when you entered the site. For certain devices
that make calls on each page such as Androids and most of the times iOS, this increases the speed of the page dramatically.
If you disable AJAX page transitions your page will feel a bit slower, basically loading just like anyother HTML, CSS and JS site running Bootstrap.
However, this may be necessary if you are coding for WordPress, Laravel, Droopal, Joomla or any other CMS where you must pre-build pages.
To disable AJAX
all you have to do is open custom.js and set: isAJAX = false - at the very top of custom.js
All you have to do is open custom.js and set: isPWA = false - at the very top of custom.js
Our menus can be triggered Programmatically just like other Bootstrap elements with a simple function. In custom.js, inside the init_template() function after line 88 trigger menus by using the following codes
1 2 3 4 | //show menu$('#MENU_UNIQUE_NAME').showMenu();//hide menu$('#MENU_UNIQUE_NAME').hideMenu(); |
Follow the documentation from Bootstraps's 5 Official Website to trigger the menu you need. All our components except for the custom menus follow the official Bootstrap programatic logic.
To run any script and style on all pages, especially when using AJAX there is a correct way of doing it.
This is essential so the page will be able to access the script if you come from it directly or from a different page, and the init_template() function fires / is triggered when you are landing on a new page.
Yes, of course! In custom.js at the very top, find the isAJAX=true; parameter and set it to false
Since our page no longer uses jQuery by default, importing and calling plugins can be done modularly. Meaning, you can import these from custom.js based on a trigger. The trigger will be detected and the script loaded externally and fired once your page is fully loaded. This system is fully functional with any back-end or custom framework such as ReactJS or VueJS or AngularJS since it's built entirely in pure Vanilla JavaScript. Let's explain how this works, step by step. but first answer a few frequent questions about this system.
Why is this better than regular page by page loading?
Take for example the charts.js plugin. This plugin is about 320kb. This is a major hit for the first load time of the page which is highly important when you want to keep your bounce rate low, and your users on your page. Considering most sites don't serve a pie chart on the main page for example, having this plugin load with the page at the same time would be useless. Therefore, the modular system will know when a chart exists on the page, and load the plugin on demand, thus, making the overall User Experience much better by loading the page faster, a lot faster!
I can do this with any HTML page, why is your system better?
Of course, you can do this even with our page, just set isAJAX = false; at the top of custom.js and you can now load your JS files normally like in anyother basic HTML template. But the whole point of having the page built with AJAX is make the page faster! Much, much faster than normal HTML templates since there aren't calls for scripts when you go from page to page. The modular system does exactly this. It only serves large scripts on pages where they are needed, not on all pages.
But I need myAwesomePlugin on first load. What then?
Simply use the Classic Import System (link), (points 1 and 2) mentioned in the main chapter if your script is required on the first page. You can use the modular system as well, the overall performance will be the same. For absolute best performance, if you require the script on the first page, it is best to use the first method.
Go to custom.js and use CTRL+F or CMD+F ( find function in your code editor ) to search for the word "uniqueID". You will see a code similar to the one below.
|
1
2
3
4
5
6
7
|
{ id: 'uniqueID', // MUST EXIST plug: 'pluginName/plugin.js', // MUST EXIST call: 'pluginName/pluginName-call.js', // optional style: 'pluginName/pluginName-style.css', // optional trigger: '.pluginLoadTrigger' // MUST EXIST}, |
Let's explain step by step what each line does. The code above is one
Please note that all plugins are stored in the plugins/pluginName folder
Line 1 - Opens a new plugin array, where all actions related to your plugin will be placed
Line 2 - Is the unique identifier our system will use to determine if the plugin has already been loaded and of course to destroy/unload it once the page is no longer using it. This method is used to make sure the performance is at it's maximum and that there are no memory leaks.
Line 3 - is the main plugin location. This is the plugin itself, not the call function.
Line 4 - is the call function of the plugin. Once the plugin has successfully loaded, this file will be triggered, initializing your plugin.
Line 5 - is the stylesheet related to the plugin. No need to keep extra CSS for a plugin, so we will load this with the plugin itself as well.
Line 6 - is the trigger element that the JavaScript will read and determine the above lines need to be initiated. So, for example, in our case it is .pluginLoadTrigger but you can also use .yourClass - classes or #yourID - identifiers or [data-your-trigger] data tags.
Line 7 - is the closing of the array.
To import a new plugin for yourself, simply go to custom.js and use CTRL+F or CMD+F ( find function in your code editor ) to search for the word "uniqueID". There just duplicate an array element
In very simple terms. The modular loader works by looking for the trigger. If the trigger is located, then the plugin, call and style are loaded.
To import a new plugin for yourself, simply go to custom.js and use CTRL+F or CMD+F ( find function in your code editor ) to search for the word "uniqueID". There just duplicate an array element.
Yes, of course. Take for example our countdown plugin. It only loads the plugin, without any style or call. The importer requires the id, plug, trigger array items. Everything else is optional.
1 2 3 4 5 | { id: 'count', plug: 'countdown/countdown.js', trigger: '.countdown'}, |
We'll gladly analyze your page and give you the exact tips and changes you need to make to get the most out of your page. Here is a short list of things you should implement in your page.
If you've done this and it's still not as fast as it should be, feel free to contact us, and we'll gladly assist you, analyze your page and give you all the tips you need to achieve the best performance possible.
Even though on paper your Mobile Device has the power of a laptop, they all use Mobile Modems and these are very poor in loading performance if pages are not properly optimized.
Having multiple CSS files will allow you to organize and group your JS/CSS files properly in development. However, this also means that there are multiple HTTP requests to make. HTTP requests are more expensive in terms of loading time as it has to contact the server and fetch the file.
Remember, this is a Mobile product, and although you or I can have iPhone XXXXSSS and Galaxy Note Infinity, there are devices out there with less powerful modems. We want to keep the calls to a minimum to ensure the fastest loading time possible. Merging all CSS in a single or max 2 files and all JS plugins in 1 plugins file and one call file is the best way to assure maximum performance, especially since your page uses AJAX which ensures fast and reliable loading times.
Don't worry if you can't figure something out. We are always here to help.
In case you have any issues that are not mentioned here, please send us a ticket via our Support Forum. We
are always here to help and, unless we're sleeping, we answer all your questions in under 2 hours.