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

Question

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

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

最重要的是，当我查看源代码时，我注意到ember-cli-fastboot评论并在此处进行了一些阅读：https://github.com/ember-fastboot/ember-cli-fastboot。所以这个ember-cli-fastboot似乎都是关于服务器端渲染的，对我来说，我想这违背了离线保存网站的目的。

我尝试过各种Chrome扩展程序，例如保存页面WE，WebScraper。它们让我相当接近，文本、图像和页面的基本结构看起来不错，但 Flash 和基于 JS 的播放器没有加载。

我还尝试使用"保存所有资源"扩展程序在Chrome开发人员工具中下载该页面，但这似乎产生了与"保存页面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编码，对于非开发人员来说，我在这方面的技术相当熟练，但是嘿，我首先是一名吉他手，我肯定超出了我的技术联盟，试图解决这个问题......

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

谢谢！

Answer 1

Brian，你正在寻找的是所谓的服务工作者。您必须在项目上设置服务工作进程才能使内容脱机可见。

服务工作线程在您的浏览器上运行，一旦您进行服务器调用，您的服务工作线程就会缓存响应并将其提供给您。由于服务器响应由浏览器缓存，因此当没有互联网时，API 调用会被软件拦截并返回缓存的响应。

您可以使用 Dockyard 的这个很棒的插件来开始在您的项目上设置服务工作者。 🙌