• 会員限定
  • 2019/04/15 掲載

どのように「PWA対応」すればいいのか? 効果を最大化するポイント

  • icon-mail
  • icon-print
  • icon-hatena
  • icon-line
  • icon-close-snsbtns
記事をお気に入りリストに登録することができます。
WebサイトやWebアプリをネイティブアプリのようにインストールできる技術「PWA(Progressive Web Apps)」。Webサイトとネイティブアプリの両方の利点を兼ね、「オフラインでも利用可能」「プッシュ通知を利用可能」などが特徴として挙げられ、新しいWebサイトのスタイルとして注目されています。本記事では、既存のWebサイトをPWAに対応するにあたって、実施すべき点や注意点について解説します。
photo
PWAをどのように仕事に生かすか
(Photo/Getty Images)

「PWA対応」の際に実施すべきこと

 はじめに、PWAについての基礎知識やメリット、用語についてはすでに公開されている「PWA(Progressive Web Apps)はどうスゴイのか?基本知識と12のメリットを解説」の記事をご確認ください。

 この記事は、PWA対応する際に実施すべきことを解説します。

 いきなりですが、実は既存のWebサイトを「PWA対応」するために実施すべきことは、そんなに多くはありません。

●PWA対応手順
  1. WebサイトのHTTPS化
  2. 起動画面に表示するアイコン作成・設置
  3. WebアプリManifest(manifest.json)の作成・設置
  4. Service Workerの作成・設置

 常にWebサイトの機能拡張などを実施していれば、サイトによっては2~4番のみでPWA対応が完了するサイトもあるのではないでしょうか。弊社のオウンドメディアも2~4番のみ実施して、容易にPWAに対応することができました。

 実施すべき内容の詳細については、グーグルがPWA対応する開発者のために、Progressive Web App Checklistを公開しています。PWAへの対応を検討する際に、ぜひご確認ください。既存のWebサイトで対応すべき項目が網羅されているので、イメージしやすくなるかもしれません。

画像
Progressive Web App Checklist
(出典:Google)

PWA対応前の注意点

関連記事
 PWAへの対応を検討する際に最も重要なのが、「PWA対応することによって実現したいこと」の明確化です。実現したい目的がネイティブアプリでしか実現できない可能性もあります。すぐに実装に飛びつかず、必ず目的を明確にしておきましょう。

 たとえばユーザーに対してプッシュ通知を行いたい場合は、ネイティブアプリという選択肢だけではなく、PWAのWebプッシュ通知でも要件を満たせるかもしれません。プッシュ件数の上限などはありますが、無料でWebプッシュ通知配信をするSaaSもいくつか用意されているため、ネイティブアプリを作らなくていいケースもあります。

 そしてPWAに対応することが決まったら、既存のWebサイトがレスポンシブデザインに対応をしているか確認をしてください。

既存のWebサイトをレスポンシブデザイン化せよ

 レスポンシブデザインとは、ユーザーのデバイスに依存せず、画面サイズに最適な状態でコンテンツを表示するデザインのことです。PCやスマートフォン、タブレットなどの異なる画面サイズでもアクセスするWebサイトの同じURLで同じHTMLを表示します。

 最近ではデスクトップPWAも少しずつ普及しはじめていますが、PWAはWebサイトをネイティブアプリと同じ要領で起動および操作が可能となるため、さまざまな画面サイズに柔軟に対応できなければいけません。

 またスマートフォンなどのモバイルデバイスでのWeb検索が多くなり、グーグルもMFI(モバイル・ファースト・インデックス)の導入などモバイルでのUX向上を進めています。

 PWAへの対応だけでなく、AMP(Accelerated Mobile Pages)など自社サイトのモバイルへの対応が適切にできているのか、このタイミングで確認してみるのもいいかもしれません。

【次ページ】PWA導入で成果を出すために

関連タグ タグをフォローすると最新情報が表示されます

関連コンテンツ

あなたの投稿

    PR

    PR

    PR

処理に失敗しました

人気のタグ

投稿したコメントを
削除しますか?

あなたの投稿コメント編集

機能制限のお知らせ

現在、コメントの違反報告があったため一部機能が利用できなくなっています。

そのため、この機能はご利用いただけません。
詳しくはこちらにお問い合わせください。

通報

このコメントについて、
問題の詳細をお知らせください。

ビジネス+ITルール違反についてはこちらをご覧ください。

通報

報告が完了しました

コメントを投稿することにより自身の基本情報
本メディアサイトに公開されます

必要な会員情報が不足しています。

必要な会員情報をすべてご登録いただくまでは、以下のサービスがご利用いただけません。

  • 記事閲覧数の制限なし

  • [お気に入り]ボタンでの記事取り置き

  • タグフォロー

  • おすすめコンテンツの表示

詳細情報を入力して
会員限定機能を使いこなしましょう!

詳細はこちら 詳細情報の入力へ進む
報告が完了しました

」さんのブロックを解除しますか?

ブロックを解除するとお互いにフォローすることができるようになります。

ブロック

さんはあなたをフォローしたりあなたのコメントにいいねできなくなります。また、さんからの通知は表示されなくなります。

さんをブロックしますか?

ブロック

ブロックが完了しました

ブロック解除

ブロック解除が完了しました

機能制限のお知らせ

現在、コメントの違反報告があったため一部機能が利用できなくなっています。

そのため、この機能はご利用いただけません。
詳しくはこちらにお問い合わせください。

ユーザーをフォローすることにより自身の基本情報
お相手に公開されます