IT用語解説ブログ

2017年02月28日 ハ行

PWAとは?

皆さんこんにちは!長崎のホームページ制作会社、合同会社WebJoyです。

スマホアプリとwebページの合体?PWAについて

PWAは(Progressive Web Apps)の略でwebサイトにネイティブアプリ(スマホアプリなど従来のアプリ)の要素を追加したWebアプリケーションのことです。
webページを開くだけで、ダウンロードもアップロードもいらないスマホアプリのようなwebページができるようになりました。

具体的には次の4つの条件を満たした場合GoogleからPWAを利用していると認められます。

  • ユーザーが5分以上間隔を空けて2回訪れるか
  • HTTPSをサポートしているか
  • 有効なJSONのマニフェストが含まれているか
  • Service Workerが含まれているか

ホームページとアプリのいいところを合わせた、今注目されている技術です。

PWAの技術

PWAで実現できることを紹介します。

Androidのホーム画面にアイコンを追加

ホーム画面に追加をクリックするとモバイルのホームにアイコンを追加することができます。アイコンをクリックするとそのwebページに入ることができます。また、アイコンも独自で制作することができます。

<ios不可>

アイコンクリック時にスプラッシュスクリーンを表示

上記で記載したアイコンをクリックするとスマホアプリのように画像が表示されてページに移動します。まさにスマホアプリと同じように起動できます。

オフラインキャッシュ

1度見ればキャッシュをローカルに保存することができるためオフラインでも閲覧可能にできます。

またつぎアプリを開いた時の起動をはやくすることができます。

プッシュ通知

スマホアプリ同様、プッシュ通知が可能です。情報が更新された時などにダイアログでお知らせされます。モバイルだけでなく、PCでも可能です。

常にアップデート

スマホアプリでは入手やアップデートのたびに長いダウンロードの時間がかかりましたが、webページ上のためダウンロードの必要がなく、更新のたびに最新の情報に自動で切り替わるためアップデートの必要もありません。

PWAの仕組み

なぜキャッシュや通知などアプリのような動きがWebサイトでできるのか?

それはGoogleChromeのアプリなどでも使用されている「Service Worker」というスクリプトを利用しているからです。

Service Workerはオフラインのアプリを実現するためにつくられたスクリプトでService Workerを登録・読み込むことでキャッシュの利用やプッシュ通知を可能にします。

PWAを制作するときはServer Workerを軸にして制作することになります。

PWAの対応ブラウザ

PWAはGoogleChrome,Firefox,Operaなどのブラウザには Android、ios、PC問わず対応しています(バージョンによっては対応していない、Androidのみで使用可能の機能など制限がある場合があります)。

しかし、iphoneのブラウザsafariには対応しておりません。

まとめ

PWAはアプリの良さとWebページの良さを合わせた素晴らしい技術です。

Webサイトを制作する人もServer Workerを読み込んでPWAを制作してみてはいかがでしょうか?

safariに対応するまでは難しいと思いますが、いつかPWAがアプリの常識になり、アプリのダウンロードやアップロードがなくなる日が来るかもしれませんね。


無料!簡単!すぐ結果が出る!自動見積システムで弊社サービスの料金がわかります!

関連記事

この記事を書いた人

長崎のホームページ制作会社 合同会社WebJoy
サポートメンバー 山崎真紀

合同会社WebJoyの山崎です。IT用語の解説ブログで皆様のお役に立てればと思います。
また、WebJoyでは集客効果のあるホームページやチラシなどの販売促進ツールを提供しています。興味のある方はお問い合わせください。

IT業界に必須の情報をまとめたブログWebJoyのつぶやきIT業界に必須の情報をまとめたブログWebJoyのつぶやき
こんなわがまま答えます。まずは無料提案させてください。こんなわがまま答えます。まずは無料提案させてください。
  • メールでのご相談
  • お電話でのお問い合わせ 095-894-8430
  • Facebookページ
  • 公式twitterアカウント