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

Question

I am trying to save a webpage for offline viewing but not exactly having luck.

The page is fairly intricate, as it involves javascript audio and video players, HTML embedded media.

On top of that, when I view the source I noticed ember-cli-fastboot comments and did some reading about it here: https://github.com/ember-fastboot/ember-cli-fastboot . So this ember-cli-fastboot seems to be all about server side rendering which for me I guess defeats the purpose of saving a website offline.

I have tried various Chrome extensions such as Save Page WE , WebScraper . They get me fairly close, with text, images, and the basic structure of the page looking fine, but the flash and JS-based players are not loading .

I also tried downloading the page in Chrome Developer Tools using Save All Resources extension, but that seems to produce similar result to what I get with Save Page WE , namely all text and images are loaded but audio and video players don't load.

Here is an example snippet of code for one of the players:

<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>

Notice in the first div element above, this text: "interaction_booted" in the class name.

This seems to be the key to what is happening . When I save the page and then load it, using one of the methods I mentioned above, I see this in that first div element (corresponding to what I pasted above):

<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>

So we no longer see "interaction booted" in the class name. So anytime I open saved versions of this page, the javascript seems to be making some sort of check and is then not loading the content, and instead replaces the element along the lines of what you see in the above code snippet.

Now, I am not a developer. I have done some PHP coding and am fairly technical at this stuff for a non dev, but hey I am a guitarist first and foremost and I am definitely out of my technical league trying to figure this out...

Really curious how you experts would go about saving this sort of content for offline viewing, such that all resources are saved offline, with no need for server side rendering. If it requires some custom scripting, I could probably handle it, just need to understand the general idea.

Thanks!

Answer 1

Brian, what you're looking for is something called service workers. You have to setup service workers on your project to make the contents visible offline.

Service workers run on your browser and as soon as you make a Server call, your service worker will cache the response and serve it to you. Because of the server responses being cached by the browser, when there's no internet, the API calls are intercepted by the SW and the cached response is returned.

You can use this awesome plugin by Dockyard to setup service workers on your project to start with. 🙌