超プログレッシブウェブアプリ | SuperPWA
超プログレッシブウェブアプリ

超プログレッシブウェブアプリ | SuperPWA

説明

プログレッシブウェブアプリ(PWA)は、最高のモバイルウェブと最高のモバイルアプリを組み合わせて、優れたモバイルウェブエクスペリエンスを作成する新しいテクノロジーです。通常のアプリ(ウェブアプリ)と同じように携帯電話にインストールされ、ホーム画面からアクセスできます。
ユーザーは、ホーム画面からアプリを起動してWebサイトに戻り、アプリのようなインターフェイスを介してWebサイトを操作できます。リピーターは、ほぼ瞬時の読み込み時間を体験し、PWAの優れたパフォーマンス上のメリットを享受できます。
スーパープログレッシブウェブアプリを使用すると、WordPressウェブサイトをプログレッシブウェブアプリに簡単に変換できます。
SuperPWAがインストールされると、サポートされているモバイルデバイスからWebサイトを閲覧しているユーザーには、(画面の下部から)「ホーム画面に追加」通知が表示され、デバイスのホーム画面に「Webサイトをインストール」できるようになります。訪問したすべてのページはデバイスにローカルに保存され、オフラインでも読むことができます。
SuperPWAは簡単に構成でき、プログレッシブWebアプリのセットアップに1分もかかりません。 SuperPWAは、作成したすべてのデータベースエントリとファイルを削除することにより、クリーンアンインストールを実行します。実際、最初に手動で保存するまで、デフォルト設定はデータベースに保存されません。さあ、試してみてください。
そして最良の部分は?あなたが立ち往生した場合、私たちはあなたの背中を見るためにここにいます!質問がある場合や機能が必要な場合は、サポートチケットを開いてください。皆様からのフィードバックをお待ちしております。WordPressウェブサイトに最適なプログレッシブウェブアプリの構築を心からお手伝いしたいと思います。
クイックデモ?

サポートされているデバイスでSuperPWA.comを開きます。
[ホーム画面に追加]プロンプト(Chrome for Android)またはブラウザーメニューから、Webサイトをホーム画面に追加します。
ホーム画面からアプリを開くと、スプラッシュ画面が表示されます。
データとWi-Fiをオフにしてオフラインにし、アプリを開きます。あなたはまだアプリを見て、あなたがすでに訪れたページを閲覧することができます。
これまでにアクセスしたことのないページを参照します。オフラインページが表示されます。

PWA愛好家に感謝します!
コミュニティからのフィードバックに心から感謝しています。私たちを信じてプラグインを試したすべての人に感謝します。あなたのフィードバックは非常に貴重であり、私たちはあなたの経験から多くを学びました。あなたの愛とサポートに感謝します、そして私たちはあなたにWordPressのための史上最高のプログレッシブウェブアプリプラグインをもたらすために努力することによって愛を返すことを望んでいます!
箱の中は何ですか
スーパープログレッシブウェブアプリの現在の機能は次のとおりです。

Webサイトのマニフェストを生成し、Webサイトのヘッドに追加します。
プログレッシブウェブアプリのアプリケーションアイコンを設定します。
プログレッシブウェブアプリのスプラッシュ画面の背景色を設定します。
サポートされているブラウザでアクセスすると、Webサイトに「ホーム画面に追加」の通知が表示されます。
CacheStorageAPIを使用したページの積極的なキャッシュ。
一度キャッシュされたページは、ユーザーがオフラインの場合でも提供されます。
カスタムオフラインページの設定:キャッシュにないページにアクセスし、ユーザーがオフラインになったときにユーザーに表示するページを選択します。
バージョン1.2の新機能:theme-colorメタプロパティのサポート。 Chrome、Firefox OS、Operaのブラウザのアドレスバーの色をウェブサイトの色に合わせて変更します。
バージョン1.2の新機能:アプリケーション名とアプリケーションの短縮名を編集できるようになりました。
バージョン1.2の新機能:PWAの開始ページを設定します。
バージョン1.2の新機能:スタートページのAccelerated Mobile Pages(AMP)バージョンを設定します。サポートされているプラ​​グイン:WordPress用AMP、WP用AMP、Better AMP、AMP Supremacy、WPAMP。
バージョン1.3の新機能:高品質のスプラッシュ画面のサポートが追加されました。プログレッシブウェブアプリのスプラッシュ画面に512×512のアイコンを設定できるようになりました。
バージョン1.3の新機能:スーパープログレッシブウェブアプリがコンテンツの更新を考慮し、ウェブサイトを更新するとキャッシュが更新されるようになりました。
バージョン1.3の新機能:ブラウザー内のServiceWorkerの更新処理が改善されました。
バージョン1.4の新機能:PWAのデフォルトの向きを設定できるようになりました。 「any」(デバイスの向きに従う)、「Portrait」、「Landscape」から選択します。
バージョン1.4の新機能:マニフェストでtheme_colorプロパティを設定できるようになりました。
バージョン1.5の新機能:プッシュ通知用のOneSignal統合。
バージョン1.6の新機能:WordPressマルチサイトネットワークの互換性。
バージョン1.7の新機能:SuperPWAのアドオンがここにあります! PWAからの訪問を追跡するためのUTMTrackingアドオンが付属しています。
バージョン1.8の新機能:OneSignalとの互換性の問題が解決されました!
バージョン1.8の新機能:新しいアドオン:アプリアイコンをApple TouchIconsとして設定するAppleTouchIcons。
バージョン2.0の新機能:SuperPWAは、サブフォルダーにインストールされたWordPressと互換性があります。
バージョン2.0の新機能:SuperPWA設定から表示プロパティを設定できるようになりました。
バージョン2.1.1の新機能:SuperPWAはマスク可能なアイコンをサポートするようになりました。

今後の機能:

オフラインインジケータ通知。

プログレッシブウェブアプリの最小要件
プログレッシブウェブアプリでは、WordPressウェブサイトが安全なオリジンから提供される必要があります。つまり、ウェブサイトはHTTPではなくHTTPSである必要があります。ウェブサイトがHTTPSでない場合は、ホストに連絡してください。また、サポートが必要な場合はお問い合わせください。
PWAのデバイスとブラウザのサポート
プログレッシブウェブアプリには、マニフェストとサービスワーカーをサポートするブラウザーが必要です。現在、Google Chrome(バージョン57以降)、Chrome for Android(62)、Mozilla Firefox(57)、Firefox for Android(58)は、PWAをサポートする主要なブラウザーです。
このリストは急速に成長しており、今年の終わりまでにほとんどの主要なブラウザでサポートされる可能性があります。
WordPressウェブサイトをプログレッシブウェブアプリに変換する方法
WordPressのインストール

WordPress管理>プラグイン>新規追加にアクセスします
「スーパープログレッシブウェブアプリ」を検索する
「今すぐインストール」をクリックしてから、「アクティブ化」するスーパープログレッシブウェブアプリ

手動でインストールするには:

super-progressive-web-appsフォルダーをサーバーの/ wp-content / plugins /ディレクトリにアップロードします
WordPress管理>プラグインに移動します
リストからSuperProgressive WebAppsプラグインをアクティブ化します。

プログレッシブウェブアプリのカスタマイズ
プログレッシブウェブアプリは、アクティベーション時にデフォルト設定でテストする準備ができているはずです。あなたはそれをさらにカスタマイズして、それを本当にあなた自身のものにすることができます。

WordPress管理> SuperPWAに移動します
PWAをモバイルデバイスで開いたときに表示されるスプラッシュ画面の背景色を設定します。
アプリケーションアイコンを設定します。これは、モバイルデバイスのホーム画面に追加されたときのPWAのアイコンになります。アイコンはPNG画像で、サイズが正確に192 x192ピクセルである必要があります。
オフラインページを設定します。このページは、ユーザーがオフラインで、要求したページがまだキャッシュされていない場合に表示されます。理想的には、専用のWordPressページを作成し、ここに設定する必要があります。作成したページ内に、「オフラインのようで、リクエストしたページは現在利用できません。オンラインになったら、もう一度確認してください。」
「設定の保存」をクリックします。

プログレッシブウェブアプリのテスト

サポートされているデバイスでサポートされているブラウザを開きます(例:AndroidフォンのChrome for Android(62以降))
あなたのウェブサイトに入り、それが完全にロードされるまで待ちます
アプリケーションアイコンと「ホーム画面に追加」というボタンが表示されたポップアップが表示されます。
それをクリックすると、PWAがホーム画面に追加されます。インストールが完了するのを待ちます。
ホーム画面に移動して、PWAを開きます。必要に応じて、いくつかのページを参照してください。アプリを閉じます。
インターネットから切断し、PWAを再度開きます。以前に閲覧したすべてのページが表示されるはずです。
以前にアクセスしたことのないページにアクセスしてみてください。 SuperPWAの設定で、「オフラインページ」として設定したページが表示されます。

プログレッシブウェブアプリのトラブルシューティング
ええとああ。 PWAが期待どおりに機能しませんでしたか? 「ホーム画面に追加」の通知が表示されませんか?

WebサイトにSSL証明書がインストールされていることを確認してください。つまり、Webサイトはhttpではなくhttpsである必要があります(https://your-domain.comのように)。
サポートされているデバイスとサポートされているブラウザを使用していることを確認してください。上記の「PWAのデバイスとブラウザのサポート」リストを参照してください。
アプリケーションアイコンとスプラッシュ画面アイコンのサイズがそれぞれPNG形式で192pxX192pxと512pxX512pxであることを確認してください。
ブラウザのキャッシュをクリアして、再試行してください。 Chrome for Androidで、[設定]> [プライバシー]> [閲覧履歴データを消去]に移動します。
最初のインストール後にアプリケーションアイコンが更新されない場合は、電話機からPWAを削除し、ブラウザのキャッシュをクリアしてから再度インストールしてください。 (私たちはそれをより良くするために取り組んでいます。)
新しいサポートチケットを作成し、Webサイトへのリンクを共有します。私たちはあなたのためにそれを見て理解します。

機能リクエスト、問題、プルリクエスト
これがGitHubのリポジトリです。プルリクエスト、機能リクエスト、または問題がある場合は、それを送信してください。
私たちに関しては
私たちはそのアイデアに興奮したデュオです。私たちの使命は単純です。ユーザーがホーム画面に表示したい素晴らしいPWAの構築を支援することです。
PWAについて最初に聞いたとき、私たちはそれについてすべてを学びたかったのです。私たちは数え切れないほどの時間を学習に費やし、それを世界と共有したいと考えています。
建設的なフィードバックとサポートをお寄せください。

インストール

このプラグインを

インストール

するには:

WordPress管理インターフェースからプラグインを

インストール

するか、FTPを使用してプラグインフォルダーを/ wp-content / plugins /にアップロードします。
WordPressの「プラグイン」画面からプラグインをアクティブ化します。
WordPress管理> SuperPWAに移動します

プラグインの作者

SuperPWA

プラグインの公式ウェブサイトアドレス

https://wordpress.org/plugins/super-progressive-web-apps/
超プログレッシブウェブアプリプラグインの使用で問題が発生した場合は、以下にコメントしてください。問題の解決に最善を尽くします

コメントを残す