存储网页以供离线观看离子3

Question

我想知道是否可以在本地存储中放置一个网页，就像你可以用离子2/3中的图像一样，或者将它保存在本地以供离线查看。以下是我使用google文档访问远程图书的一段代码：

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中）。谢谢

Answer 1

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

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

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

伟大的video and article from Simon。