9つの驚くべきPWAの秘密

コンテンツ

• 01.WebAPKとAndroidのショートカット
• 02.カスタムWebアプリインストールバナーを作成します
• 03.PWAのコンテンツを共有する
• 04.分析追跡
• 05.互換性のあるiOSPWAを作成する
• 06.バックグラウンドでデータを同期する
• 07.ソーシャルネットワークと疑似ブラウザ
• 08.Androidデバイスとエミュレーターでテストする
• 09.店舗への公開

プログレッシブウェブアプリ（PWA）は、レスポンシブウェブデザインの新しいフロンティアであり、人気が高まっています。 PWAのサポートはAndroidのChromeで始まり、Opera、Firefox、Samsung Internet、UCWebなどの他のほとんどのAndroidブラウザ、iOS 11.3のiPhoneとiPad、デスクトップオペレーティングシステムのEdge forWindowsとChromeで利用できるようになりました。

あなたが良いものを作るのを助けるために ユーザー体験 この増え続ける聴衆のために、私たちはいくつかの重要なトリックとアイデアを共有するつもりです。さらにアドバイスが必要な場合は、に関する記事をご覧ください。 アプリの作成方法.

01.WebAPKとAndroidのショートカット

2017年、ChromeはAndroidユーザー向けの新機能であるWebAPKを公開しました。これで、ユーザーがPWAをインストールすると（要件を満たしている場合）、Google PlayサーバーがAPK（Androidパッケージ、ネイティブアプリコンテナー）をその場で作成し、Playストアからのものであるかのようにデバイスにインストールします。 。ユーザーは、安全でないソースを有効にしたり、他の設定に触れたりする必要はありません。

PWAをインストールすると、ホーム画面、アプリランチャー、[設定]、およびシステムで使用されているバッテリーやスペースに関する情報など、OSの他のファーストクラスの市民アプリと同じように表示されます。

PWAがすべての要件を満たしていない場合、Playサービスがダウンしている場合、接続に問題がある場合、またはFirefoxやSamsung Internetなどの別のAndroidブラウザが使用されている場合は、ホーム画面への標準ショートカットが作成されます。そのアイコンは、Android8以降からブラウザブランドになります。

WebAPKは、注意が必要な優れた危険な機能も有効にします。PWAは、AndroidOSの境界内でドメインとパスを所有します。 Webアプリマニフェストのスコープ属性に基づいて、ユーザーがそのスコープに受信するすべてのリンクは、ブラウザーではなくフルスクリーンアプリに転送されます。つまり、使用するURLに注意する必要があります。

モバイルユーザーにサービスを提供するPWAがあり、ドメインのルートフォルダーにあるとします。アプリがWebAPKを介してインストールされると、ドメイン全体がPWAによって所有されるようになります。 Facebookを介して共有する/ surveyでの調査、または/terms.pdfでユーザーに電子メールで送信する契約条件を含むPDFがある場合、これらのリンクをクリックすると、OSはブラウザーではなくPWAを開きます。 PWAルーティングシステムがそれらのURLとそれらを提供する方法を認識しているかどうかを確認し、認識していない場合は、別のスコープのブラウザでそれらを開くことが重要です。

02.カスタムWebアプリインストールバナーを作成します

いくつかのブラウザは、特定の条件が満たされた場合にPWAをインストールするようにユーザーを招待します。これには、PWAに対するそのユーザーからの繰り返しのアクセスが含まれます。現時点では、バナーには、ユーザーが受け入れる必要がある理由についての十分な情報が含まれていません。ただし、イベントを使用してバナーを回避し、さらに重要なことに、インストールアイコンなど、受け入れを生成する可能性が高いもののためにバナーを延期することができます。

最初のステップは、バナーの表示をキャンセルし、後で使用できるようにイベントオブジェクトを保存することです。

//イベントオブジェクトのグローバル変数varinstallPromptEvent; window.addEventListener（ ’beforeinstallprompt’、function（event）{event.preventDefault（）; installPromptEvent = event;}）;

次のステップは、インストールの利点を説明するユーザーインターフェイス、または[インストール]ボタンを提供することです。そのユーザーインターフェイスは、次の関数を呼び出します。

function callInstallPrompt（）{//デフォルトのブラウザダイアログを防ぐ前にダイアログを起動することはできませんif（installPromptEvent！== undefined）{installPromptEvent.prompt（）; }}

03.PWAのコンテンツを共有する

PWAが全画面モードの場合、ユーザーがソーシャルネットワークとコンテンツを共有するためのURLバーやブラウザーからの共有アクションはありません。 Web Share APIを利用して、ネイティブソーシャルアプリを開くためのフォールバックを行うことができます。

function share（）{var text = ’URLと共有するテキストを追加’; if（ 'share' in navigator）{navigator.share（{title：document.title、text：text、url：location.href、}）} else {//ここではフォールバックとしてWhatsAppAPIを使用しています。 URIの場所のテキストをエンコードすることを忘れないでください。href= ’https：//api.whatsapp.com/send？text =’ + encodeURIComponent（text + ’-’）+ location.href}}

04.分析追跡

PWAがある場合は、できるだけ多くのイベントを追跡する必要があるため、現在測定できるすべてのものを見てみましょう。 Google Analytics APIまたはその他の分析ツールを使用して、後でこれらのイベントを追跡できます。

window.addEventListener（ ’appinstalled’、function（event）{//イベントの追跡：アプリがインストールされました（バナーまたは手動インストール）}）; window.addEventListener（ 'beforeinstallprompt'、function（event）{//イベントの追跡：Webアプリのバナーが表示されましたevent.userChoice.then（function（result）{if（result.outcome === 'accepted'）{//イベントの追跡：Webアプリのバナーが受け入れられました} else {//イベントの追跡：Webアプリのバナーが却下されました}}）;}）;

次の重要な追跡イベントは、ユーザーがホーム画面からアプリを開いたときです。これは、ユーザーがアプリのアイコンをクリックしたか、WebAPKをサポートするAndroidの場合は、PWAスコープを指すリンクもクリックしたことを意味します。

これを行う最も簡単な方法は、マニフェストのstart_url属性を使用して、次のようなAnalyticsスクリプトからのオリジンとして自動的に使用できるトラッキングイベントをURLに追加することです。

start_url： ’/？utm_source = Standalone＆utm_medium = pwa’

また、次のスクリプトは、ユーザーが現在ブラウザー（true）またはスタンドアロンアプリモード（false）のどちらを使用しているかを示すブール値を残します。

var isPWAinBrowser = true; //マニフェストに応じてスタンドアロンをフルスクリーンまたはminimal-uiに置き換えますif（matchMedia（ ’（display-mode：standalone）’）。matches）{// AndroidおよびiOS11.3 + isPWAinBrowser = false; } else if（navigatorの「standalone」）{// iOS11.3で便利isPWAinBrowser =！navigator.standalone; }

次に、プッシュ通知を使用すると、ServiceWorkerで次のようないくつかのイベントを追跡できます。

self.addEventListener（ ’push’、function（e）{//イベントの追跡：プッシュメッセージの受信}）; self.addEventListener（ ’notificationclick’、function（e）{//イベントの追跡：メッセージがクリックされた場合、e.action.idを読み取ってアクションを追跡できます}）; self.addEventListener（ ’notificationclose’、function（e）{//イベントの追跡：プッシュメッセージが却下されました}）;

05.互換性のあるiOSPWAを作成する

多くの人がPWAサポートがiOS11.3に初めて登場すると考えていますが、真実は、名前は異なりますが、10年以上前にWWDC07でSteveJobsによって提示されたということです。そのためiOSはホーム画面をサポートしていました。レガシー技術を使用して、しばらくの間オフラインアプリ。ただし、iOS 11.3からは、Androidと同じ仕様のサポートが開始されます。

iOS 11.3より前のインストールエクスペリエンスを引き続き提供する場合は、メタタグを追加するか、https：//github.com/firtman/iWAMで作成されたこの作成者のポリフィルを使用する必要があります。

これで、iOSにオプトインしなくても、PWAはオフライン対応になり、iOSにインストールできるようになります。 iOSでのPWAユーザーエクスペリエンスに影響を与える可能性のあるいくつかの違いを理解することが重要です。

1. iOSのアイコンは、UIの問題を回避するために、正方形で不透明である必要があります。 Androidと同じアイコンを使用しないでください。 iPhoneには120x120と180x180を使用してください。
2. SPAを使用している場合、またはスコープ内の他のページにリンクしている場合は、ナビゲーションに注意してください。UI内にナビゲーションリンクを指定しないと、iOSユーザーは前後に移動できません。スワイプジェスチャは、フルスクリーンPWAでは機能しません。
3. iOS 11.3の最初のバージョンでは、OSはアプリへのアクセスごとにPWAをリロードするため、ユーザーがアプリから出て後で戻る必要がある場合（たとえば、双方向認証プロセスの場合）、覚えておいてください。アプリはデフォルトで最初から起動します。

06.バックグラウンドでデータを同期する

サービスワーカーには、PWAウィンドウまたはブラウザのタブとは別のライフサイクルがあります。そのため、ユーザーがPWAを閉じた後でも、バックグラウンドでネットワーク操作を行うことができます。保留中の操作があり、その時点で利用可能なネットワークアクセスがない場合、後で接続が検出された場合、エンジンはバックグラウンドで処理を許可します。

現在、Background Sync APIは一部のブラウザでのみ使用できるため、フォールバックを提供する必要があります。 PWAが文字列タグでフラグを設定し、バックグラウンド同期操作を実行する必要があることを示すという考え方です。

navigator.serviceWorker.ready.then（function（reg）{reg.sync.register（ ’myTag’）}）;

次に、ServiceWorkerでイベントを聞き、それがラベルの場合は、約束を返すことを期待しています。約束が果たされた場合、操作には終了のフラグが立てられます。そうでない場合は、後でバックグラウンドで試行を続けます。

self.addEventListener（ ’sync’、function（event）{if（event.tag === ’myTag’）{event.waitUntil（doAsyncOperationForMyTag（））;}}）;

07.ソーシャルネットワークと疑似ブラウザ

ユーザーがソーシャルネットワークでPWAコンテンツを共有する場合、または疑似ブラウザー（独自のエンジンを持たないがWebビューを使用するブラウザー）を使用する場合は、いくつかの問題に注意する必要があります。

たとえば、FacebookはAndroidアプリとiOSアプリ内でWebViewを使用して、ユーザーがリンクをクリックしたときにアプリ内ブラウジングエクスペリエンスを提供します。 Androidでは、ほとんどのWebViewがService Workerをサポートしておらず、PWAをインストールできないため、ユーザーがFacebookからコンテンツを開くと、PWAは、キャッシュされたファイルやセッションの詳細がない互換性のないブラウザーであるかのように動作します。 。

iOS 11.3以降、WebViewはサービスワーカーをサポートしますが、ユーザーがSafariや、iOS上のChromeやFirefoxなどの他の疑似ブラウザーで使用したものと同じPWAのクローンになります。

したがって、アプリのインストールの価値を説明するインストールバナーまたはインストールヒントダイアログをレンダリングする場合は、ユーザーが手順を実行できないため、WebView内にいるかどうかを確認してください。その情報を非表示にするか、デフォルトのブラウザでURLを開くようにユーザーを招待します。これは、AndroidのFacebook、iOSのFacebook、iOSのChrome、iOSのFirefoxなどのアプリに適用されます。 WebViewを使用しているかどうかをライブチェックするのは難しいですが、ヘルパーツールを利用できます。

08.Androidデバイスとエミュレーターでテストする

サービスワーカーとWebアプリマニフェストのテストには、ローカルホストを除いてhttpsが必要です。ローカルデスクトップテストは最初は問題ありませんが、ある時点で、AndroidデバイスでPWAが動作していることを確認したいと思います。どうすればそれができますか？携帯電話またはAndroidエミュレーターから開発サーバーにアクセスすることは機能しません。これはhttpsではなく、AndroidOSの観点からはローカルホストではないためです。

解決策はChromeデベロッパーツールで表示されます。 chrome：// inspectにアクセスして、USBデバッグが接続されたエミュレーターまたは実際のデバイスを開くと、ポート転送を有効にできます。次に、Androidデバイスのhttp：// localhostが、ホストコンピューターのlocalhostまたはその他のホストに転送されます。このトリックを使用すると、Androidは安全でない接続を介してPWAを適切にレンダリングします。ただし、WebAPKはパッケージを作成してインストールしますが、スタンドアロンモードでは機能しない可能性があることに注意してください。

09.店舗への公開

PWAのアプローチは店舗を念頭に置いて開始されたわけではありませんが、PlayストアのTwitterLiteやGoogleMaps Goなどの一部のサービスでは、店舗でPWAを提供し始めました。これが興味のあるものである場合、Cordovaでパッケージ化せずにPWAを配布するには、使用可能なオプションは次のとおりです。

• Microsoftストア：pwabuilder.comの公式ツールを使用してWindows10用のPWAを作成できます
• Google Playストア：執筆時点で、カナリアチャネルで利用可能な信頼できるWebアクティビティを使用すると、所有しているPWAを開いてストアに配布するだけのAndroidアプリを作成し、WebAPKと同様のソリューションを作成できます。詳細については、こちらをご覧ください。
• Apple App Store：現在、PWAを配布するための公式のソリューションはありませんが、WKWebViewはiOS 11.3のサービスワーカーをサポートするため、PWAの単純なラッパーを作成することは難しくありません。問題は、Appleがストアでそれを承認するかどうかです。 Appleは、ラッパーが付いた単なるWebサイトのソリューションを望んでいません。

この記事はもともとの304号に掲載されました ネット、ウェブデザイナーと開発者のための世界で最も売れている雑誌。 ここで304号を購入 または ここで購読する.