業務でネイティブアプリの開発をすることが多いですが、今回、初めて「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 対応させるためにやらなければならないことは下記のとおりです。
- WebサイトをSSL化する（HTTPSを有効にする）
- Webアプリのマニフェストを JSON で作る
- Service Workersを作る
最低やらなければいけないことは、上記の3点です。
特に 3.Service Workersを作る については、私はなかなか理解するのが難しかったので、最初はサンプルコードをそのままコピーして利用しています。
また、PWA はキャッシュを保存してオフラインでも動作する仕様になっています。
そのため、開発中は Google Chrome のシークレットウィンドウを使い、キャッシュを残さないようにすると開発がしやすいらしいです。
ただし、ホーム画面に追加する機能のテストは、シークレットウィンドウでは動かないので、その点はご注意ください。
まだ触り始めたばかりなので、挙げられる注意点は以上です。
正直、アプリを開発するよりもかなり楽なので、新しいサービスの開発を考えている方は、PWAの使用も視野に入れてみてはいかがでしょうか。
