仲間機能情報を掲載しました!

SOLID DAYSサイトがPWA(Progressive Web Apps)とプッシュ通知に対応 設定方法

SOLID DAYSサイトがPWA(Progressive Web Apps)とプッシュ通知に対応 設定方法

SOLID DAYSサイトのVer.アップについて紹介します。大きく分けると2つ。

①PWA(Progressive Web Apps)に対応。

WEBサイトを端末にインストールして、アプリのように使える仕組みです。


Advertisement

②プッシュ通知に対応。

スペック表の更新があった際、通知でお知らせします。


サイトのPWA(Progressive Web Apps)化

Android端末でのサイトのアプリ化

https://soliddays.comを開いてメニューを表示させ、ホーム画面に追加を押します。

②自動で名前が入るので、追加します。

③ホーム画面にアイコンが追加されます。

④開いた際や使用中は、アプリの様な扱いになります。


Advertisement

iOS端末でのサイトのアプリ化

①サイトを開いて、下部の真ん中のアイコンを押します。

②「ホーム画面に追加」を選びます。

③追加します。

④ホーム画面にアイコンが表示され、PWA化完了です。

※オフラインでもある程度は使用可能です。
※戻るボタンが無いので横方向のスワイプで対応します。

Advertisement

PC(Chrome)でのサイトのアプリ化

①サイトを開くと、右上のアドレスバーに「+」マークが表示されるので、インストールします。

②インストール後は、アプリの様な扱いになり、厳密にはChromeアプリとなります。

③独立した形として使用可能です。

プッシュ通知設定方法

Advertisement

Android端末でのプッシュ通知設定方法

①サイトへ訪れると、通知の確認画面が表示されるので、「はい」を選択します。

②確認画面では許可をします。

③スペック表の更新や、記事の投稿などがされると、プッシュ通知が届きます。

※iOS端末はAppleの気まぐれか、WEBプッシュ通知に対応していないため、通知のお届けが出来ません。現状Androidの特権です。

PCでのプッシュ通知設定方法

基本的にはどのブラウザでも対応しています。

Advertisement

①サイトへ訪れると、通知の表示の許可画面が表示されるので、許可します。(Chromeの例)

②新しい情報などが更新されると、プッシュ通知が届きます。

③Safariではこの様な確認画面となります。

使用WordPressプラグイン

Advertisement

PWA(Progressive Web Apps)化には
Super Progressive Web Apps – WordPress プラグイン | WordPress.org 日本語

プッシュ通知には
OneSignal – Web Push Notifications – WordPress プラグイン | WordPress.org 日本語

を使用しています。