이 기사는 Ionic Advent Calendar 2017의 18 일째입니다.

사회인 3년째에 드디어 기술이 즐거워져 왔습니다 @ 좋게 067 입니다.
최근에는 Ionic으로 만든 iOS 앱을 Appium에서 테스트라든지 시험해 좌절하거나,
FullCalendar를 Ionic에 내장하고 놀고 있습니다.
잘 부탁드립니다.

Ionic을 1년간 사용해 보고 느낀 이점 중 하나는
경험이 얕은 엔지니어라도 고객의 눈에 멈추기 쉬운 그것 같은 프로토 타입 앱을 손쉽게 만들 수 있으므로,
단점은 그 프로토 타입으로 돌진하면 사고하기 쉽지 않을까 라는 곳입니다.

했던 일

Bakaus의 개인 블로그 에서 소개되고 있는 데모 앱 을 Ionic판으로 해 보았습니다.
요컨대, 요 그 사이트에 있는 AMP 페이지를 당겨 Ionic으로 만든 PWA에 묻었습니다.

아티팩트 (모바일 또는 브라우저의 모바일 에뮬레이션 모드로 표시해보십시오)

GitHub 저장소는 여기 -> amp-in-pwa-by-ionic

했던 일에 대해 자세히 알아보기

하고 싶은 것을 여러가지 시험하고 있으면, 정리하지 않게 되었으므로 AMP에 관계가 있는 부분만 발췌해 소개합니다.

AMP 공식 사이트 그럼
AMP와 PWA의 조합으로서 이하의 3종류가 소개되고 있습니다.

PWA 기능을 통합 한 AMP 페이지 (AMP as PWA)

PWA에 대한 진입점으로 AMP (AMP to PWA)

PWA 데이터 소스로 AMP(AMP in PWA)

이번에 시도한 것은 세 번째 "PWA 데이터 소스로 AMP (AMP in PWA)"입니다.

그렇게 한 것은 AMP를 포함하여 데이터 소스로 사용의 내용을 그대로 추적 한 형태로 표시하는 내용을 Bakaus의 데모 앱과 동일하게했습니다.

index.html에서 "Shadow AMP"를 포함

index.html을 아래 (발췌)와 같이 편집하여 Shadow AMP API를로드하고, Service Worker를로드하고,
cordova 로드를 제외했습니다.

    <!-- cordova.js required for cordova apps (remove if not needed) -->
    <!-- <script src="cordova.js"></script> -->

    <script async src="https://cdn.ampproject.org/shadow-v0.js"></script>

    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('service-worker.js')
                .then(() => console.log('service worker installed'))
                .catch(err => console.error('Error', err));
        }
    </script>

보려는 AMP 페이지를 가져와 퍼가기

보려는 AMP 콘텐츠를 당겨서 표시합니다.
이번에는 취득하는 AMP 페이지에 헤더와 메뉴의 정의가 있으므로, 그것을 제거하는 위생도 실시하고 있습니다.

article.ts

  ionViewDidLoad() {

　　　　　　　　// this.article.linkがURL
    // AMPが使用可能かチェックする
    (window.AMP = window.AMP || []).push((AMP: any) => {
      const container = document.getElementById('container');
      this.articleService.getArticlePage(this.article.link).then(doc => {
        // データ整形
        this.sanitize(doc);
        // AMPページをレンダリングする
        this.ampDoc = AMP.attachShadowDoc(container, doc, this.article.link);
      });
    });
  }

  sanitize(doc: Document) {

    // ヘッダーを取り除く
    let header = doc.getElementsByTagName('header');
    if (header.length) {
      header[0].remove();
    }

    // サイドメニューを取り除く
    let sidebar = doc.getElementsByTagName('amp-sidebar');
    if (sidebar.length) {
      sidebar[0].remove();
    }

    // コンテンツのヘッダー部を取り除く
    let contentHead = doc.querySelector('header.content__head');
    if (contentHead) {
      contentHead.remove();
    }

    // AMPページのTop画像を取り除く
    let featuredImage = doc.querySelector('.media-primary amp-img');
    if (featuredImage) {
      featuredImage.remove();
    }

  }

article.html

<ion-header>
    <ion-navbar color="primary">
        <ion-title>
            AMP in Ionic
        </ion-title>
        <ion-buttons end>
            <button *ngIf="!navCtrl.canGoBack()" ion-button icon-only (tap)="onHome()">
                <ion-icon name="home"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content no-padding class="card-background-page">
    <parts-card [article]="article"></parts-card>
    <div id="container">
    <!-- ここにAMP記事がはめこまれる -->
    </div>
</ion-content>

article-service.ts

  getArticlePage(url: string): Promise<Document> {

    let ampUrl = this.backend.getAMPUrl(url);

    var xhr = new XMLHttpRequest();
    return new Promise((resolve, reject) => {
      xhr.open('GET', 'https://amp-in-pwa-by-ionic.herokuapp.com/' + encodeURIComponent(ampUrl), true);
      xhr.responseType = 'document';
      xhr.setRequestHeader('Accept', 'text/html');
      xhr.onload = () => {
        var isAMP = xhr.responseXML.documentElement.hasAttribute('amp') || xhr.responseXML.documentElement.hasAttribute('⚡');
        return isAMP ? resolve(xhr.responseXML) : reject('Article does not have an AMP version.');
      }; // .responseXML contains a ready-to-use Document object
      xhr.send();
    });
  }

정리

여기의 움직임의 상세를 확인하고 있지 않습니다만, 클린 업을 실행하는 것으로 이 문서를 더 이상 사용하지 않는 것이 AMP에 전해져, 메모리나 CPU의 오버헤드가 해방되는 것 같습니다.
ionViewDidLoad에서 실행하기로 결정했습니다.

  ionViewDidLeave() {
    // クリーンアップ
    this.ampDoc.close();
  }

AMP 기사를 표시하는 데 정말 필요한 것은

의외로 필요한 준비는 적었습니다.
물론, 표시하고 싶은 대상이나 백엔드의 구성에 따라 해야 할 일은 여러가지 있습니다.
이번이라면,
· CORS
· 기사의 위생
등등

결론

만들고 즐거웠습니다.
내가 웹 프론트 엔드가 아닌 네이티브보다 모바일 출신이라는 것도 있고,
PWA의 큰 프레임을 Ionic으로 하는 것으로, 화면 천이나 라이프 사이클의 제어가 하기 쉬워졌다고 느꼈습니다.

또, RSS 피드의 제어에 rxjs를 채용해 보았습니다.
나에게 빨랐을지도 모른다 (웃음)
여기 이해에 상당히 시간이 걸렸습니다.

Readme를 준비하거나 코드를 리팩토링하는 등, 아직 할 일이 많이 있으므로,
숙련되게 진행해 나가려고 생각합니다.

고마워요.

참고로 한 사이트

Embed & use AMP as a data source
Building a PWAMP #0: Introducing the ShadowReader