How to know if a website is a single page application?

Question

I have extremely little experience with web tech, only know basic HTML and CSS. I have an assignment where I'm supposed to evaluate a website and identify web techs that can help improve the site. One of the first things I want to figure out is whether the one I've chosen is a multi or single page application. I've been googling for hours for code that's 'typical' for SPA, but haven't found anything other than this:

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Single Page Sliding Layout - Design Shack Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="https://designshack.net/favicon.ico">
<link rel="icon" href="https://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

Does this indicate that it's a SPA? Or am I completely off track? This is the website if that helps: http://www.mrbottles.com/

Thanks!

/Person who is about to pull all their hair out

Answer 1

SPAs - Single Page Applications

Precursor

One thing to get out of the way: there are Single Page Applications and Single Page Websites. There is a difference, although they both can have similarities.

A Single Page Website is a website that tries to put all the content on one page, you normally scroll through the page to get to the other sections and often there is a sticky navigation that follows you and tells you which section you're on. Also clicking on navigation is often an anchor link that will keep you on the page and jump you to the section without reloading (this can be done without javascript).

A Single Page Application is often seen in two flavors when page interaction or navigation occurs. One flavor is that the URL will have a # in it which the contents behind the # character change upon interactions. This is similar to the Single Page Website when clicking an anchor, except content is normally dynamically loaded in rather than the page scrolling to a section of the page. The other utilizes something called the browser history state. The javascript is able to change the page's path without reloading the window.

Why do you care? What is your mission, what are you trying to accomplish? Most people care about knowing if a page is an SPA because they're scoping the viability of whether or not their product offering will work with a client's website. Ultimately you want to know if content is dynamically loading in. If your offering modifies content on the page but content is changing there's no real great ways to fire your code off again upon SPA navigation/content change. Without knowing the reason, it makes it difficult to answer this question, but I will try to cover a wide scope.

How do I detect an SPA?

It wasn't really stated whether you're trying to manually detect or programmatically detect an SPA. Unfortunately there are no flags that would be set and just because you find a framework doesn't mean that it is being utilized to make the page an SPA.

Manually Detecting an SPA

The most straightforward method to detect an SPA is to manually check it.

Steps to Manually Detect SPA

1. Open developer tools / inspector
2. Reload the page or navigate to it
3. Notice the timeline/waterfall of the requests
4. Click on a link or other interaction you have in concern
   • If the timeline refreshes and causes a page reload then it's not an SPA
   • If the timeline shows the first hits and additional hits after your interaction then you have an SPA.

Programmatically Detect an SPA

This can be complicated because SPAs can hook events and even prevent them from bubbling up or propagating if you're trying to listen to determine if the page is an SPA.

Here are a few ideas I came up with to detect SPAs.

---

When the window navigates away you can determine that a reload is about to take place. At this point you can say that the page is not an SPA. If you interacted and expected the reload to take place but did not then you have an SPA.

window.onbeforeunload = function(event) {
  var text = 'Not an SPA!';
  event.returnValue = text; 
  return text;
};

---

• You could hook/proxy the history state APIs to know if they were called.
• You could watch the history state. If a change occurs then you have an SPA
• You could come up with some crazy link/element click event watcher that delays for some arbitrary time and if the time passes and the timed event fires then it's probably an SPA otherwise the page navigated away and the event never finishes firing. This isn't great because you have to wait some arbitrary amount of time; what if you didn't want long enough and the page was being slow and still navigates away?