【漫画】フリーランスは“103万円の壁”にどう向き合うか?
- お金
- フリーランス/個人事業主
- 漫画
インストールしなくても、アプリのようなアイコンを端末のホーム画面に保管できるようにしたサイトを見たことはありませんか?それがPWA(プログレッシブアプリケーション)です。
「このサイトいいな」と思ってくれたユーザーがサイトにより簡単にアクセスできるようになります。PWAを使うことで、日経などが大きな成果をあげています。
今回は、PWAとはどのようなものなのか。また、作る上でポイントとなる項目をまとめました。
目次
PWA(プログレッシブアプリケーション)とは今までの「Webサイト」ではできなかった表現やインタラクションが可能になったWebブラウザベースで起動するアプリケーションです。
導入すると次のようなメリットが得られます。
PWAは、Webサイトの技術とアプリの技術どちらも必要とします。ストアやプレイストアからのダウンロードは不要ですが、UX設計とパスォーマンスが高さを求められます。PWAは、どんな方向性に基づいて使うべきな技術なのでしょうか。
どのデバイスでも、画面サイズでも全画面表示を維持する必要があります。
そのため、アプリーケーションらしいオーバーフロー、ズームイン、ズームアウトなどで動きを持った画面遷移が求められます。
ブラウザが古いバージョンである場合は、正常に表示されず離脱に繋がることもあります。
PWAでは、プッシュ通知が使用可能です。
ユーザーにプッシュ通知の許可を得て、プッシュ通知は実行が可能になります。
これは、ユーザーがアプリから離脱するのを防ぎ再訪問を促す効果があります。プッシュ通知のほかにプロンプトの使用も可能です。
データの整合性、ユーザーのプライバシーを守るためにはSSL証明書を取得し、Webサイトの安全性を保ちます。
SSLで保護されたURLにアクセスすると、セキュリティ基準がユーザーに伝わります。これによって信頼性は向上します。ログイン情報を守るセキュリティ対策としても有効です。
コードのエラーチェックをしてください。エラーは些細なものかもしれませんが、パフォーマンスやセキュリティに負荷を与えます。エラーは可能な限り残さない方が望ましいです。
Service Workerを使用して事前キャッシュが可能です。
アプリケーションシェルでは、HTML、CSS、JavaScriptをキャッシュします。
これによって、ユーザーがオフライン状態でも表示可能になります。
PWAはオンライン上で動作し、ホストとドメインを必要とします。
この条件を満たしていない場合は、動作しないことがあります。
セキュリティ証明書を取得し、Service Workerを利用します。
セキュリティ証明書はホスティング会社、もしくは一部のプロバイダーから取得できます。Service Workerを利用してオフラインでも表示できるように設定します。
Service Workerのライフサイクルを利用することで、オフラインファーストなアプリケーションとして作ることが可能で、これによってあらゆる環境下で表示が可能になります。
アクセス前に行われるファイルのキャッシュやプッシュ通知、コンテンツや見出しの更新はイベントリスナーやコマンドに依存しない独立した機能です。ただし、このイベントを可能にするにはユーザーの許可を得なければなりません。
Service WorkerのJavaScriptファイルを入手したら、イベントハンドラを追加して、ソースコードを事前に読み込みます。使用するイベントハンドラを追加して、最後にイベントが読み込まれて実行されます。
より閲覧がしやすく、有用な情報をユーザーに届けることをミッションに、Googleは日夜さまざまな概念の開発に勤しんでいます。
PWAはモバイルのWebサイトを、ネイティブアプリのようなUXで表示させるためのものですが、似たような響の言葉でAMPというものがありますね。これは、Accelerated Mobile Pages(アクセレイテッドモバイルページ)の略で、モバイルのWebサイトを高速化するためのものです。
GooglenによってAMP化されたサイトは、表示速度が早くなる一方、デザインが崩れてしまうことがあります。自分のサイトのAMPページがインデックス登録されたは、Serch Consoleから確認できます。
どちらも、モバイルデバイス化が進むWeb業界では欠かせない知識です。
特にまだ導入していないサイトの多いPWAは、時間と共に浸透することが見込まれている新しい技術です。実際に試してみたい場合は、Google Developersのチュートリアルが参考になります。
そのほかにも、PWAのチェックはGoogleの拡張機能「Lighthouse」を使いテストが可能です。また、PWAのアイコンはWebサイトとのデザインの一貫性を保ちつつ作成するようにしてください。
ぜひ試してみてください。
(翻訳:Yuri Tanaka)