如何将使用ember-cli-fastboot呈现的网页离线保存？

时间：2018-11-01 20:23:56

标签： javascript ember.js google-chrome-extension offline-browsing

我正在尝试保存一个网页以供离线查看，但运气不佳。

该页面非常复杂，因为它涉及JavaScript音频和视频播放器，HTML嵌入式媒体。

最重要的是，当我查看源代码时，我注意到了 ember-cli-fastboot 注释，并在此处进行了一些阅读：https://github.com/ember-fastboot/ember-cli-fastboot。因此，该 ember-cli-fastboot 似乎完全是关于服务器端渲染的，对我而言，我认为这违背了将网站离线保存的目的。

我尝试了各种Chrome扩展程序，例如Save Page WE，WebScraper。 它们使我与文本，图像和页面的基本结构看起来相当接近，但是没有加载基于Flash和JS的播放器。

我还尝试使用扩展名Save All Resources在Chrome开发人员工具中下载页面，但这似乎产生的效果与Save Page 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&amp;Expires=2147483647&amp;Signature=BUOmjigHUL9go1MM~SvrLXLDR8gJZzCVKEUrXoUw~49Qn4g54HUK3nQpFpLUD8IXZiuv3ygkyqcxNMdhZg1V2g4DnvIql-tnGGZ2E1Kdyz3c6SIfbNx-LZasBf5M9jvoXFYGqEtugXZV0etgoGrL9CRV0Xnwn~Ee09DCrzdRPLQ_&amp;Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/691v.swf?response-content-disposition=inline%3Bfilename%3D%22Jplayer.swf%22&amp;Expires=2147483647&amp;Signature=BUOmjigHUL9go1MM~SvrLXLDR8gJZzCVKEUrXoUw~49Qn4g54HUK3nQpFpLUD8IXZiuv3ygkyqcxNMdhZg1V2g4DnvIql-tnGGZ2E1Kdyz3c6SIfbNx-LZasBf5M9jvoXFYGqEtugXZV0etgoGrL9CRV0Xnwn~Ee09DCrzdRPLQ_&amp;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&amp;Expires=2147483647&amp;Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&amp;Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/5fkk.mp3?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.mp3%22&amp;Expires=2147483647&amp;Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&amp;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&amp;Expires=2147483647&amp;Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&amp;Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/5fkj.xxx?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.xxx%22&amp;Expires=2147483647&amp;Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&amp;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&amp;Expires=2147483647&amp;Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&amp;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&amp;Expires=2147483647&amp;Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&amp;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编码，并且对于非开发人员来说，在这方面是相当技术的，但是嘿，我首先是吉他手，而且我绝对不在我的技术联盟中试图解决这个问题...

真的很好奇您的专家将如何保存此类内容以供脱机查看，以便所有资源都脱机保存，而无需服务器端渲染。如果它需要一些自定义脚本，我可能可以处理它，只需要了解一般的想法即可。

谢谢！

1 个答案:

答案 0 :(得分：-1)

布莱恩，您正在寻找的是所谓的服务人员。您必须在项目上设置服务工作者，以使内容脱机可见。

服务人员在您的浏览器上运行，并且在您进行服务器调用时，服务人员将缓存响应并将其提供给您。由于服务器响应是由浏览器缓存的，因此当没有互联网时，SW会拦截API调用，并返回缓存的响应。

Dockyard可以use this awesome plugin来为您的项目设置服务工作者。

相关问题
最新问题