Super Progressive Webアプリ
Super Progressive Webアプリ
SuperPWAは、WordPressのWebサイトをプログレッシブWebアプリに簡単に変換するのに役立ちます。
ウェブサイトにアクセス»
報告バグ・WordPressプラグイン・レビュー・FAQ・貢献
Super PWA Githubリポジトリへようこそ
howased法：superpwa.comビデオをチェックして、それがどのように機能するかを知る
プログレッシブWebアプリとは何ですか
Progressive Web Apps（PWA）は、Webサイトとモバイルアプリとの間に中間地面を作成する新しいテクノロジーです。それらは通常のアプリ（Webアプリ）のように電話にインストールされ、ホーム画面からアクセスできます。
ユーザーは、ホーム画面からアプリを起動することでWebサイトに戻り、アプリのようなインターフェイスを介してWebサイトと対話できます。帰りの訪問者は、ほぼ内心の荷重時間を体験し、PWAの素晴らしいパフォーマンスの利点を享受します！
Super Progressive Webアプリを使用すると、WordPress Webサイトを簡単にプログレッシブWebアプリに変換しやすくなります。
プロジェクトをサポートします
あなたが非常に興奮していて、私たちを小さな方法でサポートしたい場合は、リポジトリを主演および/または共有することを検討してください！これは、私たちがコミュニティを知り、成長するのに役立ちます。
また、ソーシャルメディアをフォローすることで私たちをサポートし、私たちについて共有することができます。
？インストール
SuperPWA⚡️がインストールされると、サポートされているモバイルデバイスからWebサイトを閲覧するユーザーは、（画面の下部から）「ホーム画面に追加」通知が表示され、デバイスのホーム画面に「Webサイトをインストール」することができます。訪問されるすべてのページは、デバイスにローカルに保存され、オフラインであっても読み取ることができます！
SuperPWAは簡単に構成できます。プログレッシブWebアプリのセットアップには1分もかかりません。 SuperPWAは、作成するすべてのデータベースエントリとファイルを削除することにより、クリーンなアンインストールを行います。実際、最初に手動で保存するまで、デフォルト設定はデータベースに保存されません。先に進んで、試してみてください。
プログレッシブWebアプリの最小要件
ホーム画面への追加方法に関するビデオとプログレッシブWebアプリは、さまざまなブラウザーで機能します
Android用のGoogle Chrome |
AndroidのMozilla Firefox |
AndroidのMicrosoft Edge |
Samung Internet for Android |
iOSのPWA -Safariブラウザ |
|---|
ブラウザでPWAをテストするための詳細なドキュメント
- Android用のChromeのPWA
- デスクトップ上のPWA-クロム
- iOSデバイス上のPWA -Safariブラウザ
- Android用のMicrosoft EdgeブラウザのPWA
- Android用のSamsungインターネットブラウザのPWA
？箱の中にあるもの
Super Progressive Webアプリの現在の機能は次のとおりです。
- あなたのウェブサイトのマニフェストを生成し、それをあなたのウェブサイトの長に追加します。
- プログレッシブWebアプリのアプリケーションアイコンを設定します。
- プログレッシブWebアプリのスプラッシュ画面の背景色を設定します。
- あなたのウェブサイトは、サポートされているブラウザでアクセスされるときに「ホーム画面への追加」通知を表示します。
- CACHESTORAGE APIを使用したページの積極的なキャッシュ。
- ユーザーがオフラインであっても、キャッシュされたページが提供されます。
- カスタムオフラインページの設定：キャッシュにないページにアクセスしてユーザーがオフラインになったときにユーザーに表示するページを選択します。
- バージョン1.2の新機能：テーマカラーのサポート。
- バージョン1.2の新機能：アプリケーション名とアプリケーションの短い名前を編集できるようになりました。
- バージョン1.2の新しい：PWAの開始ページを設定します。
- バージョン1.2の新規：START PageのAccelerated Mobile Pages（AMP）バージョンを設定します。サポートされているプラグイン：WordPressのAMP、WP用AMP、より良いAMP、AMP Supremacy、WP AMP。
- バージョン1.3の新機能：高品質のスプラッシュ画面のサポートが追加されました。これで、プログレッシブWebアプリのスプラッシュ画面に512x512アイコンを設定できます。
- バージョン1.3の新機能：Super Progressive Webアプリがコンテンツの更新を考慮し、Webサイトを更新するときにキャッシュを更新します。
- バージョン1.3の新機能：ブラウザ内のサービスワーカーの更新処理の改善。
- バージョン1.4の新しい：PWAのデフォルトの方向を設定できるようになりました。 「任意」（デバイスの向きに従う）、「ポートレート」、「ランドスケープ」から選択します。
- バージョン1.4の新しい：Theme_Colorプロパティをマニフェストに設定できるようになりました。
- バージョン1.5の新規：プッシュ通知のためのOnesignal統合。
- バージョン1.6の新機能：WordPress Multisite Networkの互換性。
- バージョン1.7：SuperPWAのアドオンがここにあります！ UTMトラッキングアドオンを備えた船は、PWAからの訪問を追跡します。
- バージョン1.8の新しい：Onesignalとの互換性の問題が解決されました！
- バージョン1.8の新しい：新しいアドオン：AppleアイコンをApple Touchアイコンとして設定するApple Touchアイコン。
- バージョン2.0：SuperPWAは、サブフォルダーにインストールされたWordPressと互換性があるようになりました。
- バージョン2.0の新機能：SuperPWA設定から表示プロパティを設定できるようになりました。
- バージョン2.1.1の新機能：Maskabaleアイコンのサポート。
？今後の機能：
PWAのデバイスとブラウザのサポート
| クロム | Firefox | 角 | オペラ | サファリ | サムスン | UCブラウザ | 勇敢な |
|---|
| ホーム画面に追加します | | | | | | | | |
| サービスワーカー | | | | | | | | |
| Webプッシュと通知 | | | | | | | | |
| 支払いリクエストAPI | | | | | | | - | - |
| メタテーマの色 | | - | - | - | - | | - | |
開発におけるサポートベータまたは部分的なサポート
プログレッシブWebアプリには、マニフェストとサービスワーカーをサポートするブラウザが必要です。現在、Google Chrome（バージョン57+）、AndroidのChrome（62）、Mozilla Firefox（57）、Firefox for Android（58）は、PWAをサポートする主要なブラウザーです。
リストは急速に成長しており、今年の終わりまでにほとんどの主要なブラウザでサポートされる可能性があります。
なぜプログレッシブWebアプリを構築するのですか？
WordPressのWebサイトをプログレッシブWebアプリに変換する方法
WordPressのインストール
- WordPress Admin>プラグイン>新しい追加にアクセスします
- Super Progressive Webアプリを検索します
- [今すぐインストール]をクリックしてから、「アクティブ化」超プログレッシブWebアプリ
手動でインストールするには：
- サーバーに/wp-content/blagins/directoryにSuper-progressive-web-appsフォルダーをアップロードします
- WordPress admin>プラグインに移動します
- リストからSuper Progressive Webアプリプラグインをアクティブにします。
プログレッシブWebアプリのカスタマイズ
プログレッシブWebアプリは、アクティベーション時にデフォルトの設定でテストする準備ができている必要があります。さらにカスタマイズして、本当に自分のものにすることができます。
- wordpress admin> " superpwa ">設定に移動します
- PWAがモバイルデバイスで開かれたときに表示されるスプラッシュ画面の背景色を設定します。
- アプリケーションアイコンを設定します。これは、PWAがモバイルデバイスのホーム画面に追加されると、PWAのアイコンになります。アイコンは、PNG画像であり、正確に192 x 192ピクセルである必要があります。
- オフラインページを設定します。このページは、ユーザーがオフラインで、要求したページがまだキャッシュされていない場合に表示されます。理想的には、専用のWordPressページを作成してここに設定する必要があります。作成したページ内に、「オフラインであるように見え、リクエストしたページは今すぐ利用できないように見えます。オンラインになったらもう一度確認してください」と書くメモを追加できます。
- [設定の保存]をクリックします。
プログレッシブWebアプリのテスト
- サポートされているデバイスでサポートされているブラウザを開きます（例：AndroidデバイスでAndroid用のChrome（62以上））
- あなたのウェブサイトを入力して、それが完全にロードされるまで待ちます
- アプリケーションアイコンを備えたポップアップと、「ホーム画面に追加」を読み取るボタンが表示されます。
- それをクリックすると、PWAがホーム画面に追加されます。インストールが完了するのを待ちます。
- ホーム画面に移動して、PWAを開きます。必要に応じて、数ページに閲覧します。アプリを閉じます。
- インターネットから切断して、再びPWAを開きます。以前に閲覧したすべてのページを見ることができるはずです。
- 以前に訪問したことのないページにアクセスしてみてください。 SuperPWAの設定で「オフラインページ」として設定したページを表示する必要があります。
？私たちについて
私たちはこのアイデアに興奮したデュオです。私たちの使命はシンプルです。ユーザーがホーム画面に持ちたいと思う素晴らしいPWAを構築するのに役立ちます。 PWAについて最初に聞いたとき、私たちはそれについてすべてを学びたいと思っていました。私たちは数え切れないほどの時間を学び、それを世界と共有したいと思っています。建設的なフィードバックとサポートをお願いします。
⛷⛷§サポート
これは、Super Progressive Webアプリの開発者のポータルであり、サポートに使用するべきではありません。サポートフォーラムにアクセスしてください。
？バグの報告
あなたが行き詰まったら、私たちはあなたの背中を見るためにここにいます！質問がある場合、または機能が必要な場合は、新しいサポートトピックチケットを開きます。私たちはあなたのフィードバックを聞いてとても興奮しています。WordPressウェブサイトのために最高のプログレッシブWebアプリを構築するのを本当に助けたいと思います！
？貢献
誰でもスーパーPWAに貢献してスーパーを貢献できます。
貢献できるさまざまな方法があります。
- Githubで問題を提起します。
- ソーシャルメディアでフォローし、私たちに関与してください
Twitterで共有します
Facebookで共有します
LinkedInで共有します
？ Changelog
superpwa.com/changelog/。
絵文字クレジット：emojipediaソーシャルメディアアイコンクレジット：Flaticon
topに戻ります
