MobifyのWeb Push Notifications：プロジェクトの作成

Progressive Web Appsの特徴の一つにWebサイトからのプッシュ通知があります。
この記事はMobifyのProgressive Mobileの機能として提供される
Webプッシュ通知（Web Push Notifications）に関する情報です。

MobifyのWebPushを利用するために、ローカルにプロジェクトファイルを作成します。
公式ドキュメントの「Development」に沿って進めます。
http://docs.mobify.com/messaging/1.0/development/

環境のセットアップ

以下のツールがインストールされている必要があります。

Grunt CLI

# Grunt: http://gruntjs.com
npm install -g grunt-cli

Macの場合は頭に「sudo 」をつけて実行。パスワードを訊ねられるのでMacのユーザーパスワードを入力する。

Grunt init

# Install `grunt-init`: http://gruntjs.com/project-scaffolding
npm install -g grunt-init

Macの場合は頭に「sudo 」をつけて実行。

grunt-init-webpush

プロジェクトの作成用の「grunt-init-webpush」をルートにGithubから一式をクローンします。

terminal

git clone [e-mail]:mobify/grunt-init-webpush.git ~/.grunt-init/webpush

既にインストール済みの場合は最新版か確認して次のプロジェクト作成に進みます。

プロジェクトの作成

まずプロジェクトファイルを入れるディレクトリを作成します。
そして初期化コマンドを実行すると、ウィザード形式でプロジェクト名などの質問が出るので、これに答えながらプロジェクトを作成します。

cd /path/to/your/project-root
grunt-init webpush

質問	回答	備考
site_id	サイトID
mobify hosted	y/n	ServiceWorkerの対象ドメイン。基本はMobifyドメインを利用するので「y」とする
font-family	フォント名	CSSの「font-family」を入力
container-width	サイトのコンテンツ幅	PCの場合バナー幅は100％だが、バナー内のテキストやボタンを収める領域の幅を入力する。
brand_color	#aaa	デフォルトアイコンなどに使用するメインカラー
differnt_desktop_copy	y/n	PC用のテキストを使用するかどうか
checkout_flow_path	/checkout	カートページのパス（バナーを表示させないページを指定する）

以上を入力すると最後に変更するかどうか訊ねられるので、
問題がなければ「N」を入力してください。
Scaffoldからプロジェクトファイル一式が生成されます。

ファイル構成

生成されるプロジェクトは以下のような構成になっています。

/custom
    /production                     # Root folder of what gets deployed
        /images
            icon-*.svg              # SVG icons used in the opt-in dialog
            notification-icon.png   # A square 192x192px logo used in notifications
            icon256x256.png         # A square 256x256px logo used by Safari
            logo.png                # The logo in its original shape
            [e-mail]             # Same as logo.png, but double its dimensions
        /js
            webpush-shared.js       # A place to customize the opt-in dialog
        /styles
            stylesheet.css          # The generated CSS file
        *.html                      # Raw HTML files that dictate the opt-in and subscription page
        custom.js                   # Dictates when/where the opt-in appears
/src
    /sass                           # Raw SCSS files
/tests                              # A Nightwatch.js test suite for automated tests
<site-id>.yml                       # The configuration file used by the backend system
web.*.pem                           # A certificate to enable messaging for Safari

「custom」フォルダ内にsoftask.htmlなどサイトで表示されるバナー用のファイルがあります。
基本的にはこの「custom」フォルダ内をサイトに合わせてカスタマイズしていきます。

stylesheet.css

バナーで使用するCSSは「/src/sass」フォルダ内のSCSSファイルから生成されます。
「grunt」コマンドを実行するとlintやSassのコンパイルが自動で行われます。

npmモジュールのインストール

MobifyのWebPushではgruntコマンドで上記のコンパイルやサーバへのアップロードなどのタスク処理を行います。
必要なライブラリ一式を下記のコマンドでインストールします。

npm install

以上でプロジェクトの作成は終わりです。