フロントエンドに明るくない人のためのPWAざっくり解説

フロントエンドエンジニアをしているまっちゃそ(CSSおじさん)です。
25歳なのでおじさんとは言えないかもしれませんが、周りに大学生インターン生が多く、気持ち的にはおじさんなのでCSSおじさんを名乗っています。

この記事は「PWA Advent Calendar 2018」1日目の記事です。
1日目と言いつつ、この記事を書いているのは12/4です。自分でアドベントカレンダー作ったくせに初日を落とすという本当にダメな感じになってしまって、もうホントごめんなさい、という気持ちです。

モチベーション

PWAで新しくプロダクトを作る機会を得るため、少しずつ調査や説明をしてフロントエンドが専門ではないエンジニアの方や、非エンジニアの方などに説明する機会があったので、まとめておこうと思いました。

前提

Serverless Framework + Nuxt.jsでWebアプリケーションを構築する際に調べたことを書いていきます。

フロントエンドに明るくないエンジニア向け

フロントエンドで利用される技術
全体の構成について触れるため、フロントエンドについても説明を挟みます。

基本的には、フロントエンドはReact.jsやVue.jsといったJavaScriptフレームワークが利用されることが多いようです。単純にServiceWorkerなどを利用するだけであれば、こういったフレームワークは必要ありません。

ですが、オフライン対応やServiceWorkerを使った処理が必要なものの多くはネイティブアプリに近いものになります。複雑なWebアプリケーションの作成にはやはりReact.jsやVue.jsといったものが適している場合が多いため、結果としてPWA=JavaScriptフレームワークが使われている、という認識で良いと思います。

インフラで使用される技術
フロントエンドがJavaScriptで構成されるため、SEOを意識する場合はServer Side Rendering(以下、SSR) を行うことが多いです。ログインして使うことが前提となっている業務アプリケーションでは、画面のロード時にチラつく(JavaScriptの読み込み前後で表示されるHTMLが異なる)ことを許容できるのであれば、SSRをなしにすることも選択できます。

Serverless Frameworkを使うことで、簡単にSSR対応の環境を作ることができます(いくつかハマりポイントはありますが)。AWSの場合は、API Gateway, Lambda, S3, CloudFormationを利用した環境を自動的に構築することができます。

バックエンドで使用される技術
Serverless Frameworkを使ってAWSにデプロイする場合は、aws-serverless-expressを使うことで、SSR環境の構築ができます。

そのため、Express(Node.js)でバックエンドを構築することが多くなりそうです。また、APIサーバーはRailsなどで開発し、Expressからそのサーバーに向けてリクエストする形式も取れます。

全体の構成例
Serverless Framework(AWS)+ Nuxt.js + API Server

Serverlessを使ってAWS上にNuxt.jsアプリケーションをデプロイする形式です。デプロイは1度設定してしまえばほとんど変更することはなく、設定自体も簡単なため、インフラのセットアップが短時間でできます。(僕はAWS自体の学習も必要だったので1週間ぐらいはかかりましたが。。。)

また、Nuxt.jsも学習コストは低くないですが、meetupなども開催されていて磐石なコミュニティが形成されています。Vue.js入門やNuxt.js入門などの初心者向けの本も最近発売されており、新しく採用するハードルも低めです。(Nuxt.js or Vue.js経験者がいることがもちろんベストです)

API Serverについては、Rails等のMVCフレームワークで開発し、View部分は使わずにAPIの提供だけを役割として持たせることで、フロントエンド部分と完全な切り離しができます。バックエンドの開発時にはJSONを返すことに徹底すれば良いので、APIの仕様策定=>実装の流れがかなりスムーズになると思います。

PWAでできること

簡単にですが、これまでのWebアプリでは実現できず、PWA特有の要素となる部分についての紹介です。

オフライン対応
ServiceWorkerで画像やHTMLのキャッシュをすることで、オフライン状態でもWebアプリを表示することができます。

Background Sync
Webページが閉じられていた場合でも、オフラインからオンライン状態になった時に、データを同期することができます。身近な事例でいうと、Googleドキュメントのようなオフライン時に編集したものをオンラインになった時に同期する機能を持たせることができます。

プッシュ通知
ServiceWorkerを用いると、Webアプリでのプッシュ通知が可能になります。これまで、ネイティブアプリを選択する要素の1つとしてプッシュ通知がありましたが、Webアプリでもプッシュ通知を送ることが可能になっています。

インストール(ホーム画面に追加)
通常のWebサイトでもホーム画面に追加することができますが、PWAではmanifest.jsonを設定することで、ネイティブアプリのように動作をすることが可能です。

PWAを使っている事例

Googleが公開しているCase Studiesで、PWAを利用したサイトでのWebパフォーマンスの改善実績や、ビジネスへの影響がまとめられています。日経の例も取り上げられており、海外だけでなく国内でも既にPWAを使ったWebアプリでの実績があります。

まとめ

全体的に広く浅く触れてきましたが、やはり実際にPWAを構築してみることが一番の学習につながると思います。Serverlessで使用しているAWSのサービスはどれもほとんど無料と言えるレベルなので、個人で開発する場合でも、金銭的なコストは少ないです。

年末年始にちょこっと試すにはぴったりだと思うので、まだPWAやったことない方は触ってみて欲しいです。国内の事例をどんどん増やして、みんながPWAやりやすい空気を作っていきましょう!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

いつも読んでくださってありがとうございます。いただいたサポートは学習に使っています。

スキありがとうございます!励みになります!
40
デザインよりのフロントエンドエンジニア。良いデザイン・体験をたくさん実装したいエンジニアです。

この記事が入っているマガジン

コメント2件

分かりやすかったです!
ところで「公開」の誤字かと思いますが、、
> Googleが後悔しているCase
PBWさん
ありがとうございます、思いっきり誤字ですね…
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。