javascript - 存储网页以供离线查看ionic 3

我想知道是否可以像在ionic 2/3中处理图像那样将网页放置在localstorage中或将其保存在本地以供离线查看。这是我使用google docs访问远程图书的一段代码：

book.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser';

import { Storage } from '@ionic/storage';

@IonicPage()
@Component({
  selector: 'page-view-book',
  templateUrl: 'view-book.html',
})
export class ViewBookPage {
    book: any;
    pdfUrl: SafeResourceUrl;

  constructor(private domSanitizer: DomSanitizer,
              public navCtrl: NavController,
              public navParams: NavParams) {

    this.book = navParams.data.book;
    // get url of pdf and embed in iframe from google docs
    this.pdfUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(
        'http://docs.google.com/gview?url='+this.book+'&embedded=true');

  }

book.html

<ion-header>

  <ion-navbar>
    <ion-title>View book</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

 <iframe width="100%" height="100%" [src]="pdfUrl" frameborder="0" allowfullscreen>
</iframe>


</ion-content>

现在，我需要的是在首次加载后能够离线查看该网页（也许在iframe中）。谢谢

最佳答案

我强烈建议您使用Ionic cache service。


  离子缓存服务，可以缓存几乎所有内容。它缓存
  请求，可观察，承诺和经典数据。它使用离子
  存储，因此我们在此支持IndexedDB，SQLite（Cordova），WebSQL
  订购。可以在Angular 2应用程序中单独使用它。

npm install ionic-cache @ionic/storage --save

很好video and article from Simon。