Как обрабатывать ручку веб-приложения Google Play Music

Question

Я создаю одностраничное приложение, и я ищу, чтобы имитировать маршрутизацию, достигнутую на странице Google Play Музыки. Когда пользователь загружает мою страницу, я бы хотел, чтобы они получили весь необходимый HTML-файл, а затем динамически загружали данные при навигации по странице.

Чтобы сохранить историю навигации пользователей, мне нужна страница, чтобы иметь возможность управлять функциональностью кнопки «Назад» и маршрутизацией URL-адресов. Что я могу использовать для обработки новой записи URL-адреса, когда пользователю предоставляется только одна страница?

Если вы знакомы с страницей Google Music, вы увидите, что используется комбинация URL-адресов и загрузочных прядильщиков. Это говорит пользователю, что страница загружается, но они никогда не покидают исходную страницу.

Answer 1

Согласно this answer, вы можете выполнить это, используя HTML5 history API. То, на что вам нужно обратить внимание на этой странице, - это метод pushState() и событие popstate.

Использование this answer в качестве шаблона, некоторый код, который вы можете написать для достижения этой цели может выглядеть следующим образом:

window.onload = function() { 
    if (typeof history.pushState === "function") { 
     history.pushState("jibberish", null, null); 
     window.onpopstate = function(event) { 
      // you should deal with the back button in here 
      history.pushState("state object or string", "Title", "/some-page"); 
     }; 
    } 
    else { 
     // for browsers that don't support history 
     var ignoreHashChange = true; 
     window.onhashchange = function() { 
      if (!ignoreHashChange) { 
       ignoreHashChange = true; 
       window.location.hash = Math.random(); 
      } 
      else { 
       ignoreHashChange = false; 
      } 
     }; 
    } 
} 

Это позволит запретить пользователю нажать кнопку назад, вместо того, чтобы посылать их domain/hello в современных браузерах , Для вашего случая использования вы можете использовать event.state, чтобы отслеживать, где вы находитесь, и была ли предыдущая страница из вашего приложения или нет.