Qiita
You are not logged in to any team
Log in to Qiita:Team...
Community
List of all usersList of all organizatioinsAdvent Calendar
Qiitadon (β)
Community GuidelineHow to write good articles
Sign upLog in
1482899948 @umamichi
Edited at

PWA 入門 〜iOS SafariでPWAを体験するまで〜 2018年3月版

JavaScriptAndroidiOSServiceWorkerPWA

What's PWA ?

Progressive Web Apps （プログレッシブ　ウェブ　アップス）の略。

PWAは、わざわざApple StoreやGoogle Play Storeからインストールする必要はありません

不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。

ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。

▼このように、Webサイトを直接ホームに追加することでアプリケーション化されます

導入事例

trivagoTwitterLightsuumo楽天レシピ

Can I use PWA?

Android Chromeはすでに対応済み

iOSは11.3から対応予定

※iOS11.3を先取りインストールしてiOSでPWAテストする方法は下記に書きます

PWA対応させてみる

この3つだけ

  1. HTTPS対応
  2. manifest.json設置
  3. Service Workerを有効にする

1. HTTPS対応

SSL証明書の購入が必要で、6千円〜数万円/年程度。

ただし、無料でSSL証明書を発行できる Let's Encrypt というものもあり、

さくらサーバーやロリポップと連携してお手軽にHTTPS化できるようになってきています

今回は、割愛するためにすでにHTTPS化されている、Github Pages（github.io）を使います

Github.com にログインし

あなたのユーザーネーム.github.io

という名前のリポジトリを作り、index.html を master branch に push しましょう

<!-- index.html -->
<html>
<head>
  <title>github pages test</title>
</head>
<body>
  <h1>github pages test</h1>
</body>
</html>

https://あなたのユーザーネーム.github.io

にアクセスして、「github pages test」と表示されていたらOKです

httpsでアクセス出来ていることに注目してください

2. manifest.json設置

index.htmlと同じ階層に manifest.json を作成しましょう

▼manifest.json

{
  "name": "PWA Sample",
  "short_name": "PWA",
  "background_color": "#fc980c",
  "icons": [{
      "src": "./icon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },{
      "src": "./icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }],
  "start_url": "./?utm_source=homescreen",
  "display": "standalone"
}

ここで指定するホームスクリーン用アイコンもindex.htmlと同じ階層に配置しましょう

今回はサイズの違う2種類です

https://umamichi.github.io/pwa-sample/icon-256.png

https://umamichi.github.io/pwa-sample/icon-192.png

Googleによると、192x192のpngアイコンが登録されていないと、

ホーム画面に追加バナーが表示されないので注意しましょう

▼ 起動時のURLです。PWAとしてアクセスしたことが分かるように、URLにクエリを付与しています
ここで使用している値は、Google Analytics において意味があるというメリットもあるそうです

  "start_url": "./?utm_source=homescreen",

▼ display タイプを standalone に設定すると、ウェブアプリでブラウザの UI を非表示にすることができます。

  "display": "standalone"

3. Service Workerを有効にする

Service Workerは、オフライン体験をサポートするために重要です

index.htmlと同じ階層に配置しましょう

// service-worker.js
self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
});

// 現状では、この処理を書かないとService Workerが有効と判定されないようです
self.addEventListener('fetch', function(event) {});

4. index.html から manifest.json service-worker.js を呼び出す

index.htmlをこのように変更しましょう

さらに、オフラインでアプリケーションが動作することを明確にするために

2種の画像と p.html も追加してみましょう

<!-- index.html -->
<html>
<head>
  <!-- manifest.jsonを呼び出しています -->
  <link rel="manifest" href="./manifest.json">
  <script>
    // service workerが有効なら、service-worker.js を登録します
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js').then(function() { console.log('Service Worker Registered'); });
   }
  </script>
  <title>Hello PWA.</title>
  <style>
    body {
      text-align:center;
      font-size: 40px;
      vertical-align: middle;
    }
    .image {
      width: 80%; 
      margin: auto;
      display: block;
    }
  </style>
</head>
<body>
  <h1>Hello PWA.</h1>
  <img src="./pwa-logo.svg" alt="PWA logo" class="image" />
  <a href="p.html">p.html</a>
</body>
</html>

<!-- p.html -->
<html>
<head>
  <title>Hello PWA. p.html</title>
  <style>
    body {
      text-align:center;
      font-size: 40px;
      vertical-align: middle;
    }
    .image {
      width: 80%; 
      margin: auto;
      display: block;
    }
  </style>
</head>
<body>
  <h1>p.html</h1>
  <img src="./p-chan.jpg" alt="p-chan" class="image" />
  <a href="index.html">index.html</a>
</body>
</html>

すべて、index.htmlと同じ、ルートディレクトリに配置するだけです

あとは、master branch に push しましょう

https://あなたのユーザーネーム.github.io

にアクセスして、このようなページ になればOKです👌

5. PC版Chromeで確認する

PC版Chromeで以下にアクセスし、Developerツールを開きましょう

https://あなたのユーザーネーム.github.io

PWA check

[Application] パネル -> [Manifest] タブから

Add to homescreen をクリックしましょう

Webページが、PWAとして追加されるはずです

6. Androidで確認する

Androidでアクセスすると、ホームスクリーンに追加を促すポップが出現します

ちなみに、Googleによると、出現には以下の条件があります

※ 2 回以上のアクセスがあり、そのアクセスに 5 分以上の間隔がある。

ホームスクリーンに追加できたら、起動してみましょう

トップレベルの全画面表示でWebページが表示されたはずです

7. iOS SafariでPWAを体験する

Appleによると、iOS11.3からPWAをサポートします

現状（2018年3月20日）ではまだ11.3はリリースされていませんが、beta版をインストールして試すことはできます

https://beta.apple.com/sp/betaprogram/

こちらから登録して、iPhoneにインストールしてみましょう

※iOSアップグレードの前にバックアップをとっておくことをお勧めします

iOSではホームスクリーンに追加バナーなど、まだ未実装の部分もありますが、

このようにPWAとして起動することが確認できます👇

機内モード、つまりオフラインでも動作していることに注目してください

PWAとネイティブアプリの比較

PWA ネイティブアプリ
速度 少し遅め 早め
インストール ブラウザからワンタップ Storeから検索が必要
開発コスト 低 高
リリースのタイミング developerの任意のタイミング Store申請＆ユーザーが手動で行う
オフラインで動作 ○ ○
ハードウェアアクセス △ ○
push通知 ○ ○
iOS, Android ワンソースで完結 OSごとに開発が必要

PWAの大きなメリットの一つとして、インストールとStore申請の手間が省かれることがあります

また、1ソースで複数のプラットフォームに対応でき、開発コストが少なくて済みます

リリースタイミングも通常WEBサイトと同様、開発者の任意のタイミングで行えるので、開発者とユーザー両方にとって良いことばかりです🤗

まとめ＆今後

  • ネイティブアプリは徐々にPWAに移行するでしょう
    （iOS11.3が今春リリースされるので、移行はさらに加速されるでしょう）

  • ユーザーにとっても、PWA体験はネイティブアプリより好まれるでしょう

  • 高度なグラフィック処理・大量の計算処理が必要なアプリケーションのみ、ネイティブアプリとして残るでしょう

参考

https://qiita.com/j16a/items/d3f7f7c3bb283bb20f23

https://developers.google.com/web/fundamentals/app-install-banners/?hl=ja

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.

Report article

Help us understand the problem. What is going on with this item?


Feedback

We don't reply to any feedback.
If you need help with Qiita, please send a support request from here.