Home Blog CV Projects Patterns Notes Book Colophon Search

Pjax

On the latests iOS, if you have a full screen web page added to your Home Screen that changes the URL (even if it is only via history.pushState), the page will open in a popup.

To fix this you need to use PJAX page loading and disable URL changes if you are in single page mode. Here's some code that does this:

<script>
if (navigator.standalone) {
  console.log('Loading ...')
  var pjax_elem = document.createElement('script');
  pjax_elem.setAttribute('src','https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.min.js');
  document.head.appendChild(pjax_elem);
  var interval = setInterval(function(){
    if (typeof Pjax != 'undefined') { 
      clearInterval(interval);
      var pjax = new Pjax({selectors: ["title", ".js-Pjax"], elements: "a", history: false, cacheBust: false, debug: true, analytics: false})
     }
   }, 200);
}
</script>

Then add this to your HTML page.

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

iOS should now be able to treat your site as a full screen single page app.