FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

PWAを構成する技術と、それを支えるサービスについて

f:id:mbaasdevrel:20190930153559p:plain

PWA(Progressive Web Apps)は単一の技術を指し示す言葉ではなく、ユーザがより良いWeb体験をするための総合技術となっています。そのため、これをすればPWA対応した、とは言い切れません。

今回はPWAを構成する技術と、それを利用するためのクラウドサービスを紹介します。

ホスティング

f:id:mbaasdevrel:20190930153547p:plain

PWAはオフラインでも使えるのが大事であり、そのためにはWebフロントエンドとサーバサイドはAPIを通じた疎結合になっている必要があります。そこでフロントエンドのコードは静的ホスティングサイトに置いておくことができます。

例えば以下のようなサービスが挙げられます。

独自ドメインを使う場合にはAmazon S3 + Cloudfrontという組み合わせになるでしょう。NetlifyやFirebase HostingはカスタムドメインのSSL/TLS証明書(Let's Encript利用)発行に対応しています。

Webプッシュ

f:id:mbaasdevrel:20190930153559p:plain

Webプッシュはベンダー独自のものとVAPIDとがあります。macOSのSafariを除外すれば、VAPIDでChrome/Firefox/EdgeといったWebブラウザに対応できます。Webプッシュ通知を送った後の開封、数値分析を行うならばプッシュ通知配信を行うサービスを使うのが良いでしょう。

Webプッシュ通知を5分で導入 - 効果を求めるならPush7

GraphQL

f:id:mbaasdevrel:20190930153608p:plain

フロントエンドとサーバサイドでREST APIを使うのも良いですが、最近ではGraphQLの採用も進んでいます。GraphQLのクラウドサービスは最近では減っており、以下のAWSのサービスが安心して利用できるでしょう。

AWS AppSync(アプリデータをリアルタイムで保存、同期)| AWS

その他の技術

PWAを担う技術としては、残りはレスポンシブWebデザイン、SSL/TLS、アプリマニフェスト、Service Workerになります。これらはクラウドサービスを使うものではありません。Service WorkerはWebプッシュ、オフラインアクセス(CACHE API)で利用するものなので重要です。ぜひ使い方を覚えてください。

PWAでバックエンドが必要になったら、ぜひニフクラ mobile backendをご利用ください!

mBaaSでサーバー開発不要! | ニフクラ mobile backend

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。