Single Page Static Website (SPSW) Tutorial

WebRocketX can be used to convert your current static content website into an SPSW with some very simple changes, and can be used along with any existing Bootstrap template. We also provide a free fully functional Bootstrap template with WebRocketX already integrated on our Download page. The downloadable template can be taken for a test drive by going here Take an SPSW for a Test Drive. The website you are using right now is also an SPSW!

A WebRocketX SPSW has some clear benefits over traditional full page refresh static websites, as well as some maintained behavoir, and currently one important difference.

• Maintain your header and footer in only one file - Many developers opt for overcomplicated frameworks like WordPress just to avoid maintaining copies of their headers and footers in every HTML page in their website. With an SPSW you are always in your welcome page, so the header, footer, and menu never go away. Navigation inside the website is done by pulling in new body content with Ajax calls.
• Speed - Since headers, footers, style sheets, javascript references and everything else, that is loaded in a welcome page, is only loaded once and up front, internal navigation within the website is greatly accelerated. Navigation to internal pages only involves pulling in the HTML for that page, minimizing the amount of data sent from the server. Furthermore, using the browser back button will not result in trips to the server. Instead WebRocketX pulls the back content from its fully rendered DOM stack, making it even more efficient than most browser caching mechanisms.
• Still Bookmark Compliant - WebRocketX URL's are designed to be bookmarked.
• Browser Refresh Still Works - WebRocketX URL's are designed to be refreshable from the browser.
• Not SEO Compliant - As of November 2017 ajax driven web applications, like WebRocketX SPSW, are still not Search Engine Optimization (SEO) compliant. As of 2015 Google announced that its spiders would be able to index ajax web applications, but our research has shown that this is still not the case. So, an SPSW is not recommended for a static website that needs its interior pages indexed by the major search engines. This is usually an important requirement for a static website, and usually not important for a dynamic web site.

The HTML code shown below contains the core components necessary to create and SPSW welcome page. The parts of the page can be broken down as follows. All of the WebRocketX specific sections of the page are marked with a comment.

• Setting of the staticPage global variable - This variable has to be present and is set to true for an SPSW.
• Javascript and style sheet includes - The header of the page needs to include the jquery library reference. The lastest version of jquery and version included in the past 5 years will work well with WebRocketX. The jquery library requirements of your boostrap template will be more restrictive than WebRocketX will. Following the jquery reference are the 3 WebRocketX js files, followed by the WebRocketX style sheet.
• Page navigation - First of all, it is recommended that navigation to the homepage be done using a traditional full page refresh hyperlink going to index.html. The reason to do this is simply out of convenience so that separate copy of the home page body content does not need to be brought in asynchronously when clicking on this link.
  
  All other navigation within this website should be done using the getStaticContent() method. Note that this method returns false from the onclick method which will bypass the execution of the reference in the href attribute. Even though the href is not used it is recommended that the bookmark reference to this page be correctly coded as shown so that if by chance any search engine spider records it, then it will record the correct entry path to your page from outside.
  
  The method closeMobileDropDownMenu() is not a WebrocketX call but something of this nature will most likely be needed to close the mobile device "hamburger" drop down when the user clicks here. Drop downs are not traditionally closed in css templates, when clicked, because the developers of those templates expected the user to go to another full page. In an SPSW, the menu will need to close because we are not leaving the page. Hyperlinks outside of the menu, for example in the body of the page, will of course not need a method to close the menu.
• Page body - The page body must include a div that is marked by the class name "startingTarget". This class name does not style this div but instead marks it so that WebRocketX knows which target contains the first capsule it will register upon entry into the welcome page. The startingTarget must have an id.
  
  The inline starting capsule div is inside the startingTarget. Its id must be the filename of the welcome page, and it must be marked with the class name "metaCapsule". Its targetId must refer to the id of the enclosinng startingTarget div. Set the window title attribute to whatever wording you want to show up at the top of your browser.
  
  The content inside the capsule will contain whatever you want to display in the body of your page. Note that an example of a link in the body is given here, and that it looks very similar to the links in the menu, but it does not execute a close menu method.
• CSS considerations - One thing worth noting is that WebRocketX does include all delivered content in a capsule div. Even though this div is invisible, it is an extra layer of markup that a css stylesheet template may not account for. If this is a problem it is usually fixable by putting a couple of extra lines in your css. For example, in adapting a bootstrap template to make the downloadable SPSW on this site we put the following extra line in the style sheet "div > section {padding: 20px 0; font-size:16px; }" because the original only defined the section padding inside the body and not a div.

All of the other pages in the website, other than the welcome page, only need to have their content wrapped in a simple capsule, as shown below. The capsule div must be marked with the class name "metaCapsule", and have a targetId indicating the same location as the starting capsule, which is the id for the startingTarget div. The windowTitle attribute is optional but recommended. Developers familiar with WebRocketX running in dynamic mode might wonder where the capsule id is. However in the case of an SPSW, WebRocketX will automatically set the id to the name of the file being injected.

The single line of javascript above the capsule is included in case the search engines link to your internal pages directly without including the landing page and navigation hash. We have seen this happen with the Google spiders. The good news is that the spiders definitely index the internal pages in a WebRocketX SPSW. The bad news is that they might do so in a way in which your injected page will be orphaned, when a user clicks on its reference in the search engine listing. Fortunately, the solution to this problem is a one liner. Simply copy this line to the top of your pages and replace the last html file reference ("myPageName.html" in this case) with the name of the page this code is in. Make sure to get the case and spelling correct. The text "index.html" refers to your landing page and should be the same for every internal page.

A WebRocketX SPSW can be developed in a directory on your local file system just like any traditional website can. However, Firefox is the only browser that allows Ajax calls to access your local file system so it is the recommended browser for local development. All other browsers will require the developer to run a local webserver. It seems silly that the other browsers consider it a security risk for a local file to access a local file through an async call but that is how they work.