【アプリ】Webアプリがネイティブアプリのように使える「PWA(Progressive Web Apps)」

村上 著者:村上

【アプリ】Webアプリがネイティブアプリのように使える「PWA(Progressive Web Apps)」

業務でネイティブアプリの開発をすることが多いですが、今回、初めて「PWA」というものに触ってみました。
PWA とは「Progressive Web Apps」の略で、「プログレッシブWebアプリ」という、Webアプリをネイティブアプリのように使えるようにするしくみのことです。
これを使うことにより、モバイル端末でWebページを表示する際、ネイティブアプリのような挙動をさせることが出来ます。

PWAについては、こちらのサイトを参考にさせていただきました。

いまさら聞けないPWAとAMP – Qiita
https://qiita.com/edwardkenfox/items/4c0b9550ffa48c1f0445

サンプルあり!Googleが推奨するPWAに既存サイトを対応させる方法 – WPJ
https://www.webprofessional.jp/retrofit-your-website-as-a-progressive-web-app/

特に下のサイトがおすすめ!
GitHubのサンプルコードも紹介しているので、とりあえず PWA ってどんな感じ?という人が試しに触るのにはちょうどいいと思います。
やはり 0からコードを書くよりも、ひな形があるほうが簡単ですしね!

 

さて、まずWebサイトを PWA 対応させるためにやらなければならないことは下記のとおりです。

  1. WebサイトをSSL化する(HTTPSを有効にする)
  2. Webアプリのマニフェストを JSON で作る
  3. Service Workersを作る

最低やらなければいけないことは、上記の3点です。
特に 3.Service Workersを作る については、私はなかなか理解するのが難しかったので、最初はサンプルコードをそのままコピーして利用しています。

また、PWA はキャッシュを保存してオフラインでも動作する仕様になっています。
そのため、開発中は Google Chrome のシークレットウィンドウを使い、キャッシュを残さないようにすると開発がしやすいらしいです。
ただし、ホーム画面に追加する機能のテストは、シークレットウィンドウでは動かないので、その点はご注意ください。

 

まだ触り始めたばかりなので、挙げられる注意点は以上です。
正直、アプリを開発するよりもかなり楽なので、新しいサービスの開発を考えている方は、PWAの使用も視野に入れてみてはいかがでしょうか。

  • この記事いいね! (1)

著者について

村上

村上 administrator