Using AngularJS HTML 5 Mode in Salesforce Communities

AngularJS HTML 5 Mode in Salesforce Communities

If you’ve developed an AngularJS app before or another Single-Page Application (SPA) you are familiar with the URL hash fragment identifier pattern representing the current view/screen state. For example, the phone listing page of an app might be at http://www.example.com/app#!/phones.  AngularJS supports HTML5 mode which uses the HTML 5 History API (pushState, replaceState) to allow URLs to be changed to values that don’t have the hash bang. Instead of the app#!/phones, the URL would change to http://www.example.com/app/phones. This post describes how you can develop with AngularJS HTML 5 Mode in Salesforce Communities.

HTML and JavaScript

The $locationProvider has a method to set the HTML 5 mode to on.  This can be set in the app’s config method.

The page needs a base tag specified. It can be switched off but will have adverse side-effects in IE9 and other browsers that don’t support the HTML 5 History API methods. If you do not specify it and you do not explicitly turn off the need for it, you’ll get an error “$location in HTML5 mode requires a tag to be present!”.

Browsers that don’t support the History API methods (e.g., IE9) will fallback to using the !# notation. This is handled by the framework and is transparent to the programmer.

Server Side

If a user requests a screen in the app directly (e.g., linked to or just type directly in browser bar) the server will respond that the page was not found. For example, if the user goes directly to http://www.example.com/app/phones, the server will attempt to serve a phones page, which doesn’t exist. The solution to this is to implement a Site.UrlRewriter that redirects to the app Visualforce page when any fragment that is a part of it is requested. For example, when http://www.example.com/app/phones is requested, the UrlRewriter needs to redirect to the Page.app Visualforce page and let the AngularJS app kick in to handle the phones routing. The redirect is on the server-side.

Search Engines

Google announced a bit more than a year ago that they have started to execute JavaScript when crawling pages, but that’s just Google and not Bing, Yahoo, etc. The official docs from Google still reference the _escaped_fragment_ scheme, but you can use their Search Console to see what they see with a Fetch and/or Fetch and Render as Google.  Hopefully there will be some more official documentation from Google than just a blog post, but it is not unreasonable to expect that all relevant search engines will eventually attempt to execute well-written JavaScript on crawling due to the ubiquity and proliferation of JavaScript based sites/apps.

More Thoughts

Implementing an HTML 5 mode AngularJS app for a community can be achieved with the correct set up and results in friendlier URLs.  It isn’t possible to do it outside of a community (i.e., internal Salesforce), in a way that will allow linking to screens inside of the app, because there is no UrlRewriter available. However, that likely doesn’t matter for internal Salesforce, because how the URL looks to a logged in Salesforce user isn’t as important and would never be crawled.

9 thoughts on “AngularJS HTML 5 Mode in Salesforce Communities

    1. Yeah this is a good point. Haven’t run across it yet, but I did think of it when I found your solution.

      Having some trouble getting this running with ui.router, but hopefully I’ll figure that out soon enough. Only been working on it for about an hour now.

      1. After working a bit longer I realized the issue(as I expected) was just an issue on my end not being familiar enough with ui router. Thank you again for this solution, awesome!

        As a side note, I am also working on adding a list in of pages which the rewriter will not redirect. The list will be controllable by admin users who can access the tab that we will create to manage them.

Leave a Reply

Your email address will not be published. Required fields are marked *