Я пытаюсь сохранить веб-страницу для просмотра в автономном режиме, но не совсем удача.
Страница довольно сложная, поскольку включает в себя аудио и видео проигрыватели javascript, HTML-медиа.
Кроме того, когда я просматривал источник, я заметил ember-cli-fastboot комментариев и кое-что прочитал об этом здесь: https://github.com/ember-fastboot/ember-cli-fastboot. Итак, это ember-cli- fastboot , кажется, все о рендеринге на стороне сервера, который, как мне кажется, побеждает цель сохранения сайта в автономном режиме.
Я пробовал различные расширения Chrome, такие как Страница сохранения WE , WebScraper . Они довольно близко подходят ко мне: текст, изображения и базовая структура страницы выглядят хорошо, но проигрыватели на базе flash и JS не загружаются .
Я также пытался загрузить страницу в Chrome Developer Tools с использованием Сохранить все ресурсы * расширение 1022 *, но это, похоже, дает результат, аналогичный тому, который я получаю с Страница сохранения WE , а именно весь текст и изображения загружены, но аудио и видео проигрыватели не загружаются.
Вот пример кода для одного из игроков:
<div id="area49254180_6" class="component interaction_component float-none clear-none hideSlideshowControls interaction_booted"><div role="status" class="int-prep hidden"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div><div>
<div class="data-field interaction-type">Slideshow</div>
<div class="data-field interaction-init">
<span class="field">jplayer_swf_path</span><span class="value"><a target="_blank" href="https://dvgddacn5gars.cloudfront.net/691v.swf?response-content-disposition=inline%3Bfilename%3D%22Jplayer.swf%22&Expires=2147483647&Signature=BUOmjigHUL9go1MM~SvrLXLDR8gJZzCVKEUrXoUw~49Qn4g54HUK3nQpFpLUD8IXZiuv3ygkyqcxNMdhZg1V2g4DnvIql-tnGGZ2E1Kdyz3c6SIfbNx-LZasBf5M9jvoXFYGqEtugXZV0etgoGrL9CRV0Xnwn~Ee09DCrzdRPLQ_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/691v.swf?response-content-disposition=inline%3Bfilename%3D%22Jplayer.swf%22&Expires=2147483647&Signature=BUOmjigHUL9go1MM~SvrLXLDR8gJZzCVKEUrXoUw~49Qn4g54HUK3nQpFpLUD8IXZiuv3ygkyqcxNMdhZg1V2g4DnvIql-tnGGZ2E1Kdyz3c6SIfbNx-LZasBf5M9jvoXFYGqEtugXZV0etgoGrL9CRV0Xnwn~Ee09DCrzdRPLQ_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ</a></span>
</div>
<div class="data-field interaction-asset">
<span class="field">audio_track</span><span class="value"><a target="_blank" href="https://dvgddacn5gars.cloudfront.net/5fkk.mp3?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.mp3%22&Expires=2147483647&Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/5fkk.mp3?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.mp3%22&Expires=2147483647&Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ</a></span>
</div>
<div class="data-field interaction-asset">
<span class="field">images</span><span class="value"><a target="_blank" href="https://dvgddacn5gars.cloudfront.net/5fkj.xxx?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.xxx%22&Expires=2147483647&Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/5fkj.xxx?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.xxx%22&Expires=2147483647&Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ</a></span>
</div>
<div class="data-field interaction-init">
<span class="field">initial_json</span><span class="value">[{"imageIndex":0,"time":0,"rect":null}]</span>
</div>
<div class="interaction_title"></div>
<div class="interaction_content Slideshow" style="min-height: 50px; width: 400px;"><div id="ember7214" class="ember-view"><div class="slideshow-jplayer" id="slideshow_player_49254180_6"></div>
<div class="slideshow-player">
<audio class="player" src="https://dvgddacn5gars.cloudfront.net/5fkk.mp3?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.mp3%22&Expires=2147483647&Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ"></audio>
<div class="audio-controls">
<i class="fa fa-play playpause"></i>
<i class="fa fa-pause playpause inactive"></i>
<input id="player-seek" type="range" min="0" max="100" value="0" onchange="">
<i class="fa fa-retweet loop"></i>
</div>
</div>
<div class="controls fr hidden">
<i class="fa fa-arrow-circle-left back"></i>
<span class="pages">1 of 1</span>
<i class="fa fa-arrow-circle-right forward"></i>
</div>
<div class="page_container">
<div class="highlight hidden"></div>
<div class="image-area"><immg src="https://dvgddacn5gars.cloudfront.net/5fkj.png?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.xxx%22&Expires=2147483647&Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ"></div>
</div>
</div></div>
<div class="interaction_data" style="display: none;"></div>
</div></div>
Обратите внимание на первый элемент div , приведенный выше, этот текст: "Interaction_booted" в имени класса.
Кажется, это ключ к происходящему . Когда я сохраняю страницу и затем загружаю ее, используя один из методов, упомянутых выше, я вижу это в том первом элементе div (что соответствует тому, что я вставил выше):
<div id="area49254180_6" class="component interaction_component float-none clear-none hideSlideshowControls"><div role="status" class="int-prep"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div>
Таким образом, мы больше не видим «взаимодействие загружено» в имени класса. Поэтому каждый раз, когда я открываю сохраненные версии этой страницы, javascript, кажется, выполняет какую-то проверку, а затем не загружает содержимое, а вместо этого заменяет элемент в соответствии с тем, что вы видите в приведенном выше фрагменте кода.
Теперь я не разработчик. Я сделал немного PHP-кодирования и довольно техничен в этом деле для не-dev, но эй, я прежде всего гитарист, и я определенно не в своей технической лиге, пытаюсь это выяснить ...
Действительно любопытно, как эксперты будут сохранять этот вид контента для просмотра в автономном режиме, чтобы все ресурсы сохранялись в автономном режиме без необходимости рендеринга на стороне сервера. Если для этого требуется какой-то нестандартный сценарий, я бы, наверное, справился, просто нужно понять общую идею.
Спасибо!