backend(mBaaS)。Monaca最近PWAという技術ワードに注目が集まっています。Appの略で、スマートフォンやタブレット向けのWebアプリケーションをより、ネイティブアプリのようにしていくためのベストプラクティスを呼びます。大きく分けて以下の技術要素になります。Worker通知ストレージHTTPSこれらの技術要素の詳細については様々なブログやメディアで語られていますので、そちらに譲りたいと思います。今回は、そのPWAにMonacaが対応したことと、PWAをどうmBaaSで活かすかについて紹介します。PWAテンプレートではじめてみるまずはMonacaのPWAテンプレートでプロジェクトを作成します。Workerがあらかじめ登録されていること、manifest.jsonが用意されていることが特徴です。見ると、次のようなJavaScriptが用意されています。Workerの登録処理になります。見ての通りですが、service-worker.jsを読み込んでいます。定義されているURLのリストをキャッシュに登録する処理を行っています。イベントが実行されますが、こちらは不要なキャッシュを削除しています。);});キャッシュからの読み込み一度目に表示した時点ではキャッシュの登録、二回目以降のアクセスではキャッシュから返却することで表示を高速化します。キャッシュにあれば、それを返却し、なければネットワークアクセスを行って結果を返却しています。);});これはオンライン、オフラインに関係なく行われるので、オフライン時でもコンテンツを表示できるようにしたり、オンライン時にはキャッシュを使うことで表示が高速化します。IDEからFirebaseのホスティングサービスにデプロイができます。利用するためにはまずFirebaseへのプロジェクト登録が必要です。インストールする必要があります。firebase-toolsインストールされたらFirebaseにログインします。loginログインしたら適当なディレクトリで初期化します。するとFirebaseプロジェクトを選択しますので、デプロイ先のプロジェクトを選んでください。init最後にAPIトークンを取得します。login:ci認証が終わると最後にトークンが表示されます。IDEのデプロイサービスとしてFirebaseを選択して、出てきたモーダルに設定します。プロジェクト名などは分かりやすいものを入力してください。IDE上でPWA開発を行って、Firebaseでデプロイするだけです。PWAとしてビルドを行った後、Firebaseへのデプロイが可能です。Zipでダウンロードして任意のサービスにデプロイもできます。注意点PWAはWebアプリケーションなので、幾つかの制約があります。WorkerはHTTPSでないと使えないという制約があります。Workerは動きますが、MonacaデバッガーやMonacaアプリとしては利用できません。Cordovaアプリはネイティブ(SwiftやJava、Kotlinなど)を使いますので、PWAでは利用できません。mBaaSと組み合わせる場合にはクライアントキーの取り扱いが問題になります。ACLを正しく設定すれば問題はないのですが、それでも安全のために隠蔽しておいた方が良いでしょう。そこでお勧めなのはWebAssembly版を利用することになります。まとめPWAは今後のWebアプリケーションを語る上で欠かせないキーワードになっていくと考えられます。Monacaが対応したことで、スマートフォンアプリとともにPWAにも対応したいというニーズが出てくることでしょう。篤司NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。Pushを送ってみよう最近、PWAに注目が集まっています。Service)とは、スマートフォンアプリでよく利用される汎用的な機能をSDKとクラウドから提供するサービスです。backendのちょっと便利な使いかた・非公式SDKやアプリ開発の関連情報などをお届けするブログです。※記事内には、サポート対象外の内容も含みます。本ブログではコメント機能を公開しておりません。アプリ開発を行う上での課題解決には、ユーザーコミュニティやもくもく会などもご活用ください。LIMITEDスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。