BLOGMarTechのトレンドや要素技術、各種サービスについて取り上げて紹介していきます。Apps」、略して「PWA」。今回記事では、「基本的なPWAの仕組み」と「実際に本格的に実装・提供するための技術スタック」について触れたいと思います。基本的な「PWA」の仕組みPWAの実現に最低限必要なものは下記の3つのみです。Manifest(manifest.json)これは、Webアプリケーションに関するメタ情報を提供するjsonファイルです。"/"}上記のようなJSONファイルにより、下記などの情報を設定することができます。short_name)表示タイプのカスタマイズ(display)ページの最初の向きが縦表示か横表示か(orientation)このマニフェストファイルは自分で書くことも、ツールを使って画面上で生成することもできます。これをウェブサイトのトップディレクトリに配置し、index.html等で下記の通り指定します。Workers(serviceworker.js)サービスワーカーは、アプリケーションのバックグラウンドで実行され、ネットワークとアプリケーションの間のプロキシとして機能する、イベントドリブンのワーカーです。ネットワーク要求を傍受することで、バックグラウンドで私たちの情報をキャッシュすることができ、オフラインでの使用時にはそこからデータがロードされます。下記のようなjavascriptスクリプトにより、フェッチやインストールのようなイベントを待ち受け、タスクを実行します。fetch(request);}これをHTMLから呼び出します。}</script>SSLPWAになるためには、Webアプリケーションは安全なネットワークを介して提供されなければなりません。Workerは動かないことで常に安全な状態を保つためです。CloudfareやLetsEncryptのようなサービスでは、SSL証明書を取得するのは簡単です。本格的なPWA実装・提供に向けて基本的なPWAの仕組みは上記の3点で整います。プッシュ通知を配信するといった豊富な機能を持つウェブアプリをPWAで実装・提供においては、上記の要素をプリミティブに用意し、PWAの諸機能を1つ1つ作成していくのでは非効率です。このような場合には、下記のような技術スタックを利用することが一般的なようです。Ionic2Google社のAngularというアプリケーションフレームワークをベースに、HTML5アプリの開発に特化して作られたJavaScriptフレームワークです。アプリのいわゆるハイブリッド開発ができるフレームワークとして提供されていますが、PWAにも対応されています。Ionic2でどんなウェブアプリの提供が可能なのかについては下記のIonic2のカンファレンスアプリを見るのが良いでしょう。Serviceの略で、モバイルアプリ開発のバックエンド側のインフラを提供するサービス)です。下記の記事では、ユーザーを認証し、ユーザー情報を保存し、プッシュ配信機能を提供するウェブアプリの構成について紹介しています。STYLEこの中で紹介されている構成図は、ネイティブアプリのようなウェブアプリにおけるIonic2とFirebaseのわかりやすい関係図となっているかと思います。まとめ以上、PWAを提供するための要素と技術スタックについて紹介してきました。にわかに大きな注目を集めるようになった「PWA」ですが、エンゲージメントに活用しうるプラットフォームとして従来のウェブサイトやネイティブアプリをリプレイスしていくためには、「PWA」自体のさらなる普及と相まって、変化する技術トレンドにキャッチアップすることもハードルとなります。「その投資を自社かけられることができるか」は、マーケティングや商品開発の意思決定者にとって、今後、複雑でチャレンジングな検討課題になっていきそうです。-A/Bテストその他の「オンラインフィールド実験」は、マーケティ...2018-06-15本当に「サブスクリプション・エコノミーは拡大」しているのか?エビデンスまとめ以前も取り上げた「サブスクリプション・エコノミー」。»プロフィールデジタルマーケッターとしてキャリアを始めた後、ウェブエンジニアに転身し、コンバージョン率改善系のSaaSプロダクト開発・提供をリードエンジニアとして主導してきました。Technology)について紹介していきます。※ここで発信する情報は著者個人の見解に基づくものであり、所属企業・団体を代表するものではありません。(1)リンクこのブログについてスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。