Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

AMPページをPWAに対応させてみる

More than 1 year has passed since last update.

先日作ったAMPのページを、PWA(Progressive Web Apps)にも対応させてみたいと思います。

1. PWAとは?

PWAとは特定の技術を指すものではなく、より良いユーザー体験を実現するためのベストプラクティス集のようなものと言われています。

では、どのような体験を実現することが出来るのでしょうか?
実装できる主な機能はこちら。

  1. オフライン対応
  2. ホーム画面へのアイコン追加
  3. プッシュ通知
  4. 自動ログイン 

どれも使い方によってはメリデメがありますが、まずは上記の中からホーム画面へのアイコン追加(Add to Homescreen、A2HS)を、AMPのページに実装してみようと思います。

2. ServiceWorkerのインストール

ServiceWorkerをインストールするのには、2つのソースコードの記述が必要です。
※どちらもAMPページ用の記述ためご注意ください

index.html※headタグ内
<script async custom-element="amp-install-serviceworker" 
  src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js">
</script>
index.html※bodyタグ内
<amp-install-serviceworker
  src="/serviceworker.js"
  layout="nodisplay">
</amp-install-serviceworker>

上記で読み込ませているsevicewoker.js内の記述です。

sevicewoker.js
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.3.1/workbox-sw.js');

self.addEventListener('fetch', function(event) {});

3. manifest.jsonの作成

ボタン設置用の設定ファイルを作成します。

ServiceWorkerにおける各種設定ファイルを作成するのには、Workboxを利用するのが便利と聞きましたが、manifest.jsonの設定だけであれば、下記をオススメします。

Web App Manifest Generator

スクリーンショット 2018-07-01 14.18.30.png

必要項目を入力後、ホームボタン用の画像をアップロードして[GENERATE ZIP]ボタンを押せば、jsonファイルとサイズ展開されたアイコン画像が自動で生成されます。

※manifest.jsonの中身はこんな感じです

manifest.json
{
  "name": "ホームボタンの名前",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "Scope": "/",
  "start_url": "https://ホーム画面から遷移するURL",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

4. manifest.jsonを読み込ませる

上記で作成したjsonファイルをHTML内で読み込ませます。

index.html※headタグ内
<link rel="manifest" href="/manifest.json">

5. 動作テスト

それでは、ChromeのDevToolsを使って動作確認を行います。

DevToolsの[Application]を開くと、App Manifest内にmanifest.jsonで設定した項目が表示されます。[Add to homescreen]を書かれたリンクをクリックしてみましょう。

スクリーンショット 2018-07-01 14.43.09.png

アドレスバーの下に「このサイトをシェルフに追加するといつもで使えるようになります」という表示が出てきたら、設定は成功です!

スクリーンショット 2018-07-01 14.43.09.png

Android端末のお持ちの方は、是非実機で試してみてください。


以上で、AMPページにおけるPWA対応の第一段階(ホーム画面へのアイコン追加)は完了です。
今日はここまで。

FUJI_Lab
京橋で働くWEBエンジニア(サービス開発室所属)Front-end Developer / UIUX Designer / DesignersGym二期生 // FUJI Records主宰 @fujirecords
https://fujirecords.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away