プログレッシブウェブアプリでスマホWebでの通知やオフライン化を試してみよう

こんにちは。UI/UXD領域を担当しているT.I.です。

プログレッシブウェブアプリ（以降、PWAと表記）をご存知でしょうか。
PWAとはAMPプロジェクトに並び、Googleが推進している次世代のウェブ表現技術のひとつです。
昨年のGoogle I/Oで発表されて以降、アプリとウェブのギャップを埋める技術として期待されています。

今回、我々のウェブサイトにスマホで来訪したユーザーがアプリインストールなどをせずに、更新をプッシュ通知（いわゆるNotification）やオフラインでの利用などが出来るようにしたく、PWAでの実装メモになります。

PWAとは

プログレッシブウェブアプリ（Progressive Web Apps）はウェブとアプリの両方の利点を兼ね備えたアプリで、特長としては「インストール不要」「プッシュ通知が可能」「ホーム画面にアイコン追加」や「通信が不安定でも高速起動、及び最新情報への同期」などがあり、技術者の間でも高い注目を集めています。

プログレッシブウェブアプリのサイト事例

The Weather Channel – オフラインでも天気予報を閲覧できる

産経ニュース – 最新のニュースをアプリ同様に通知

取り巻くトレンドや環境

既にマイクロソフトの新ブラウザEdgeはPWAへの対応をほのめかしています。
The Progress of Web Apps（Microsoft Edge Team）

仮に3ヶ月後に開催されるWWDC2017でAppleも対応を発表した場合、iPhone(iOS)でも利用可能となり、急速に普及する可能性を秘めています。

PWAのデモ

PWAのデモをUPしました。

天気予報アプリ

ホーム画面への追加や通知

※通知を許可後に改めて拒否（通知削除）したい場合はブラウザの設定画面から可能です。
参考：通知のオンとオフを切り替える（Chrome ヘルプ）

PWAを実装する

PWAなスマホサイトを作る上で最低限必要なこと

1. HTTPS
2. Web App Manifest
3. Service Worker

参考：　はじめてのプログレッシブ ウェブアプリ

1. HTTPSへの対応

今回は無料SSL証明書であるLet’s Encryptを利用しました。
certbotで簡単にインストール。作業時間2分程度でした。便利な時代です。
https://certbot.eff.org/

2. manifest.jsonを用意する

{
    "lang":"ja",
	"name": "GMOインターネット次世代システム研究室",
    "short_name": "GMO次世代",
    "icons": [
        {
            "src": "https://pwa2017.jisedai.cloud/pwa__icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
   "background_color":"#ffffff",
   "theme_color":"#ffffff",
   "start_url":"/",
   "display":"standalone"
}

short_nameが実際のホーム画面に表示されます。長すぎると省略されるので気を付けましょう。

3. Service Worker

serviceworker.jsを用意することで利用できます。

※Service Workerについては過去の記事も参考にしてください
Service Worker で進化する Cache

その他

通知などを行いたい場合は

今回の通知は以下のスクリプトをhtml内に記述しています。

<script>
let output = document.getElementById('PWAtxt');

if (typeof Notification === 'undefined') {
    output.textContent = 'ご利用の環境はNotificationに対応していません。';
}

// 通知の許可
Notification.requestPermission().then(
    (permission) => { 

        if (permission !== 'granted') {
            output.textContent = '通知が出来ませんでした';
            return;
        }

        let notification = new Notification(
            'Push通知タイトル',
            {
                body: 'ホームページを開く',
                icon: '//pwa2017.jisedai.cloud/pwa__icon.png'
            }
        );
        output.textContent = '通知が表示されましたか？';

        notification.onclick = (e) => {
            notification.close();
             open('http://recruit.gmo.jp/engineer/jisedai/');
        };
    }
);

</script>

firebase等でpushする他に、javascriptのコードを1行入れるだけでプッシュが出来るサービスが世の中に多く出ています。

https://push7.jp/
https://pushnate.com/

オープンソース化されたものなどもありますので興味ある方はご覧ください。
https://github.com/dotneet/bpush

最後に

次世代システム研究室では、スマートフォン向けアプリ開発者を募集しています。スマホアプリ開発者の方、スマートデバイスのUI/UX設計に興味がある方、次世代システム研究室にご興味を持って頂ける方がいらっしゃいましたら、ぜひ 募集職種一覧 からご応募をお願いいたします。

皆様からのたくさんのご応募、お待ちしてます。