コンテンツ
レスポンシブウェブデザインが数年前にデスクトップサイトとモバイルサイトの間のギャップを埋めたように、プログレッシブウェブアプリのテクニックは現在、ウェブとアプリの世界の間のギャップを埋めています。デスクトップからモバイルアプリへのユーザーエクスペリエンスが急速に収束しているため、より洗練された、より効率的なインターネットが進化しているように見えますが、基礎となる遺伝暗号に大幅な変更がないわけではありません。
- プログレッシブウェブアプリを構築する方法
明らかに、これを推進するいくつかの重要な選択的圧力があります。まず第一に、すべてのニッチにネイティブアプリを作成することは、必ずしもリソースを効率的に使用することではありません。ユーザーは、帯域幅と貴重なディスクスペースを浪費する何百もの大きなアプリに行き着き、企業は、放棄するためだけにアプリを作成するために多額の費用を費やします。彼らの最初のバージョンの後。そして、これらのアプリのほとんどは、Webコンテンツ（Webサービスまたはコンテンツ管理システムからの情報）によって駆動されています。
プログレッシブウェブアプリの定義は具体的ではありません。 PWAは、プログレッシブエンハンスメントを使用してWebプラットフォームでいくつかの新しいAPIと機能を使用し、同じコードベースですべてのプラットフォームでアプリのようなエクスペリエンスを提供する単なるWebアプリです。これは、ユーザーに優れたアプリのようなエクスペリエンスを提供する一連のベストプラクティスとAPIの使用法であるため、PWAを持っている、または持っていないわけではありません。それはあなたのサイトが多かれ少なかれPWAであるようなものです。
新しいサイトの構築を始めようとしていますか？ウェブサイトビルダーを使用してみてください。そして、あなたがまともなウェブホスティングサービスからもあなたが必要とするサポートを受けることを確認してください。または、少し異なる点については、最高のクラウドストレージに関するガイドをご覧ください。
PWAの上昇
PWAという名前は2015年にGoogleでChromeチームのために働いているAlexRussellによる記事「EscapingTabsWithout our Soul」で造られましたが、彼らの旅は実際にはそこから始まりませんでした。以前は、1999年にMicrosoftによって作成されたHTMLアプリケーション（HTA）と、Nokia、BlackBerry、およびその他の企業の他の多くのWebアプリプラットフォームがありました。その後、2007年に、Steve Jobsは、元のiPhone用のアプリを作成する唯一の方法であるPWAを発表しましたが、名前は異なります。 Chromeはそこから始まり、数年後にAPIを改善し、PWAの名前を発明しました。
ウェブコンテンツをアプリの世界に持ち込もうとして失敗した経験がこれまでにたくさんあるのに、なぜ今はうまくいくと思うのでしょうか。主に、Microsoft、Google、Apple、Mozillaなど、PWAの背後にあるテクノロジーを現在取り組んで推進している企業にかかっています。また、適切に設計されたPWAをネイティブアプリと比較した場合、Webプラットフォームのパフォーマンスに違いは認められませんでした。これらの条件はこれまで存在したことがなく、それがWebコミュニティがPWAの時期が来たと判断した理由の1つです。
今日稼働中のPWA
現在、PWAは完全に機能し、次の場所にインストールできます。
- ほとんどのブラウザを搭載したAndroid、Chromeが最高のエクスペリエンスを提供
- Safariを搭載したiOS
- Chromebook
- MicrosoftStoreのWindows10
- Firefox OSのフォークであるKaiOSを搭載したフィーチャーフォンは、現在、主にインドで数百万人のユーザーが利用できます。
今年後半には、Chromeを介してmacOS、Windows、Linuxもサポートされる予定です。今すぐお試しになりたい場合は、実験的なフラグ「デスクトップPWA」として本日ご利用いただけます。特定の時間枠は定義されていませんが、ストアを使用せずにWindows onEdgeにインストールすることも後で行われます。
リストを読み直すと、すべてのプラットフォームが次の月に完全にインストール可能なPWAをサポートしている、またはサポートしようとしていることがわかります。また、PWAは、互換性のあるブラウザでのみアクティブ化される機能を備えたWebサイトであるため、基本的な機能からすべてのブラウザと互換性があるとさえ言えます。
また、PWAは現在、Angular 6+ CLI、React Create App、PolymerのPWAスターターキット、Preact CLIなど、さまざまなフレームワークのほとんどのCLIから生成されています。最後に、Ionic Frameworkチームは、すべてのアプリストアでネイティブPWAを可能にするオープンソースのCordova代替品であるCapacitorのアイデアを思いつきました。
インストール
PWAの重要な側面の1つは、アプリのインストールです。このプロセスは、アプリのファイルのダウンロードとオフラインストレージ、およびOSへのアイコンのインストールという2つのオプションのステップで実行されます。どちらの手順もオプションであるため、ブラウザーでオフラインエクスペリエンスを提供することも、オフラインインストールなしでアイコンを提供することもできます。ただし、真のPWAには両方を含める必要があります。HTTPSでTLSを使用して提供する必要があり、ユーザーはブラウザで使用するか、独自にインストールしたアイコン内で使用するかを決定します。
オフラインで即時起動
PWAの頭脳は、サービスワーカーです。これは、ユーザーのデバイスにインストールされたJavaScriptファイルであり、アプリのファイルをダウンロードしてキャッシュに保存し、後で必要に応じて提供します。 Service Workerがインストールされると、Webアプリが必要とするすべてのリソースのネットワークプロキシのように機能します。ネットワークからフェッチするか、ローカルキャッシュから配信するかを決定できます。これにより、アプリはオフラインで利用できるようになり、ユーザーが接続している場合でも、ネイティブアプリの起動をエミュレートして数ミリ秒。
Service Workerをインストールするには、HTMLドキュメントに次のようなものを含める必要があります。
if（navigatorの「serviceWorker」）navigator.serviceWorker.register（ "sw.js"）;
これにより、ファイル「sw.js」が現在のドメインの現在のフォルダのユーザーのデバイスにインストールされます。これはスコープと呼ばれる概念です。インストール後、そのスコープ内のURLへの次回のアクセスは、そのサービスワーカーによって管理されます。
index.html、app.js、app.css、logo.pngの4つのファイルを持つPWAがあるとします。まず、これらのファイルをsw.jsファイルのキャッシュにインストールします。
const resources = ["index.html"、 "app.js"、 "app.css"、 "logo.png"];自己。 addEventListener（ "install"、event => {event .waitUntil（caches.open（ "myPWAcache"）。then（cache => cache.addAll（resources）））;}）;
次に、PWAが常にキャッシュから提供されるようにするには、Service Worker内でフェッチイベントをリッスンし、使用するキャッシュポリシーを決定する必要があります。たとえば、最初に次のスニペットを使用してキャッシュします。
self.addEventListener（ "fetch"、e => e.respondWith（caches.match（e.request）。then（res => res）;
この場合、ユーザーが（ブラウザーまたはインストールされたアイコンの両方から）PWAにアクセスするたびに、エンジンはキャッシュからファイルを取得します。 PWAとネイティブアプリの利点は、変更があったときにデバイスがすべてのファイルを再度ダウンロードする必要がなく、透過的なプロセスで変更されたファイルのみをダウンロードできることです。また、アプリの一部をオンデマンドでダウンロードすることもできます。
しかし、課題は、サーバー上で更新されたファイルをどのようにして把握し、キャッシュ内でそれらを置き換えることができるかということです。これを管理するための低レベルのサービスワーカーを作成したくない場合は、オープンソースライブラリのワークボックスを使用できます。これは、サービスワーカーの生成と、インストールされたパッケージを更新するためのリソースマニフェストに役立ちます。
デバイスにストレージの負荷がかかると、可能な場合は永続ストレージを要求しない限り、PWAのファイルが削除されることに注意してください。
if（navigatorの「storage」&& navigator.storageの「persist」）navigator.storage.persist（）;
ChromeとほとんどのAndroidブラウザでは、アプリは利用可能なスペースの5％以上を使用できません。 iOSでは、ホストあたりのみ50MiB（50MB近く）です。 Edgeでは、合計メモリサイズに応じて変化し、Windowsストアでは無制限です。
一流の経験
私たちには頭脳があり、今こそ心の時です。ウェブアプリのマニフェストです。ウェブサイトをPWAに変える目的は、ウェブサイトをすばやくまたはオフラインで利用できるようにするだけでなく、OSに独自のアイコンを持たせ、他のインストール済みアプリと同じように完全にスタンドアロンのエクスペリエンスを提供できるようにすることです。
マニフェストは、インストール動作を定義するためにブラウザーまたはアプリストアで使用されるPWAのメタデータを定義するJSONファイルです。
このファイルは、PWAのメタデータとしていくつかのプロパティを定義しています。各OSはこれらのプロパティを読み取り、好みのエクスペリエンスに一致するように最善を尽くします。たとえば、Androidは「display：standalone」を読み取り、通常のアプリエクスペリエンスを作成します。 「display：minimal-ui」を使用すると、目に見えるURLとTLS証明書を使用してエクスペリエンスを作成できます。これは、セキュリティが重要なアプリに役立ちます。 「display：fullscreen」を使用すると、ステータスバーや表示される戻るボタンのない完全に没入型のアプリを作成できます。アイコンと色のセットは、スプラッシュ画面またはタイトルバーがアプリのウィンドウをどのように検索するかを定義します。
Web App ManifestGeneratorやPWABuilderなど、高解像度のアイコン（最小512ピクセル）を提供すると、アイコンのサイズをさまざまな解像度に変更するマニフェストジェネレーターがいくつかあります。
マニフェストファイルをHTMLドキュメントにリンクすると、ユーザーはブラウザに応じてさまざまな手法を使用してアプリをインストールできます。これは通常、[ホーム画面に追加]、[インストール]、または単に[追加]と呼ばれます。 PWAがBingでクロール可能な場合、Microsoftは自動的にPWAをMicrosoftストアに追加するため、Windows10ユーザーはそこからPWAをインストールできます。
一部のオペレーティングシステムでは、PWAにリンクをキャプチャする機能があります。つまり、ユーザーがアプリをインストールした後、マニフェストの範囲内のURLは、ブラウザーに表示されているか、WhatsApp、Facebookなどの他のアプリに表示されているかに関係なく、ブラウザーではなくアプリの境界内で開かれます。またはメール。
ここで定義しているPWA要件に合格すると、一部のプラットフォームでは、アンビエントバッジ（通常、Webがインストール可能であることを示すURLバーの小さなアイコン）またはWebアプリバナーが提供されます。必要に応じて、次のスニペットを使用して独自のカスタムインストールボタンを追加することもできます。
window.addEventListener（ "beforeinstallpr ompt"、function（e）{e.prompt（）; //インストールのネイティブプロンプトを表示します}）
PWAがインストールされている場合、イベント「appinstalled」がウィンドウオブジェクトで発生するため、それをリッスンしている統計を追跡できます。
アプリストア
ブラウザからインストールする主な利点の1つは、アプリストアの承認プロセスを回避できること、またはパブリッシャーになるために料金を支払う必要があることです。これには、インスタントパブリッシング、企業向けのプライベートアプリの作成、店舗で受け入れてはならないアプリなどの明らかな利点があります。
しかし、一部の企業は店に行きたいと思っています。現在、PWAを正式に受け入れているストアはWindowsストアとkaiOSストアのみです。幸い、Capacitor（現在はAlpha）やPWA Builderなどのツールを使用して、他のプラットフォーム用のネイティブパッケージを作成して署名することもできます。
TwitterLiteやGoogleMaps Goなど、Google Playストアですでに公開されているPWAがいくつかあり、現在カスタム実装されています。 Chromeは、信頼できるWebアクティビティを介してChrome68のソリューションを提供します。その時点から、ランチャーを使用してAndroidパッケージ（APK）をPWAに作成し、ストアにアップロードできるようになります。 Windows10上のMicrosoftStoreの場合、サイトPWA Builderは現在、APPX Windows10パッケージの生成を支援しています。 Webビューを使用すると、App Store用のiOSアプリを手動で作成できる場合がありますが、ストアのルールには細心の注意を払ってください。
プラットフォーム統合
プログレッシブエンハンスメント技術を実装することにより、プッシュ通知、カメラとマイクへのアクセス、ジオロケーション、センサー、支払い、共有ダイアログ、オフラインストレージなどの多くの機能を使用できるようになります。これらの機能はすべて、権限ダイアログを含め、ブラウザのセキュリティモデル内で直接実行されます。
また、Twitter、YouTube、WhatsAppをURLやwhatsapp：//などのカスタムURIで開くなど、URIスキームを介して他のアプリと通信することもできます。
最後に、Capacitorを使用してストアまたはMicrosoftストアに公開されるネイティブPWAを作成すると、ネイティブAPIにブリッジして、事実上すべてのネイティブコードを実行できるようになります。 Windows 10との統合には、ハードウェアアクセスだけでなく、OSとの統合も含まれ、Pin toStartなどのオプションが提供されます。たとえば、Twitter PWAを使用すると、任意のユーザーをスタート画面に固定できます。
デザインとUXの課題
PWAの設計には固有の課題があるため、調査、可能な限りのテスト、および次の点を考慮するために時間を費やすことが重要です。
- ユーザーはアプリのような体験を期待します。
- インストールプロセスはまだ新しいので、アプリのインストール方法を説明するために特別な努力をする必要があります。
- ユーザーの操作なしでバックグラウンドでアプリを更新することは素晴らしいことですが、UXにいくつかの課題も追加します。
- デスクトップでは、レスポンシブWebデザインは、PWAウィンドウが小さく、モバイルビューポートよりもはるかに小さいため、新たなフロンティアを取ります。これは、今日のChrome OSに見られるように、この形式の特定のビューまたは小さなウィジェットを作成する必要があることを意味します。
- プッシュ通知はユーザーにのみ価値を付加する必要があるため、適切なタイミングで質問することを学び、役に立たない、または面白くないメッセージを送信する機会を無駄にしないでください。
- Webパフォーマンスとオフラインアクセス用に設計する必要があります。
PWAの年
今年iOSとデスクトップが追加されたことで、PWAは今日どこにでもあります。しかし、彼らの旅はまだ始まったばかりであることを覚えておく必要があります。頻繁な変更を期待し、プラットフォームが進化する間、優れたユーザーエクスペリエンスを提供するために、最新の技術とアイデアを常に最新の状態に保つようにしてください。
この記事はもともとの308号に掲載されました ネット、ウェブデザイナーと開発者のための世界で最も売れている雑誌。 ここで308号を購入 または ここで購読する.
