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.