Nuxt.js+Push7でPWAアプリとプッシュ通知を実装する
Nuxt.jsを使うと、比較的簡単にPWA対応のサイトを作ることができます。
ただ、PWA対応と一言で言っても、PWAが指す機能は様々なものがあります。
- オフラインキャッシュ
- ホームスクリーン追加
- プッシュ通知
- カメラ
- 決済機能
- etc
iOSではAndroidと比べてPWAの対応が遅く、キャッシュ以外はあまり使うことがなかったのですが、
最近iPhoneからPixel4に機種変更したこともあり、手元の環境で色々とPWAを試すことができるようになったので、
色々実装して遊んでみました。
今回は、比較的簡単に実装ができる、
- オフラインキャッシュ
- ホームスクリーン追加
- プッシュ通知
をNuxt.jsとPush7というサービスを使って、実装してみたいと思います。
なお、今回作成したサンプルは以下のURLにアップしています。
https://nuxtpwa.netlify.com/
https://github.com/chieeeeno/nuxt_webpush_sample
オフラインキャッシュ対応
Nuxt.jsでは公式のモジュールでPWAのモジュールが提供されており、 create-nuxt-app
で雛形を作る時にPWAのモジュールを追加することで、ほぼコーディング無しでオフライン対応を行うことが可能です。
create-nuxt-app
を実行した時にいろいろ聞かれる質問で、 Progressive Web App (PWA) Support
にチェックを入れておきます。
? Choose Nuxt.js modules
◯ Axios
❯◉ Progressive Web App (PWA) Support
◯ DotEnv
そうすることで、@nuxtjs/pwa
のインストールと nuxt.config.js
にモジュールの記述を追加してくれます。
あとは、 nuxt build
を実行すると、オフラインキャッシュに必要な Service Worker
の設定などが記述された sw.js
が生成されて、ページ閲覧時にリソースファイルがキャッシュされるようになります。
一度見たことがあるページであれば、オフライン時でも閲覧することが可能になります。
細かいキャッシュの設定は、 nuxt.config.json
に pwa.workbox
の項目を追加して、デフォルト設定を上書きしたり追加したりすることができます。
export default {
・・・
pwa: {
workbox: {
/* workbox options */
}
}
}
ホームスクリーン追加
これは、 nuxt.config.js
に manifest
の項目を追加して、そこに設定を追加します。
export default {
・・・
/*
** PWAの設定
*/
manifest: {
name: 'Nuxt.jsのPWA', // アプリの名称
short_name: 'Nuxt PWA', // ホーム画面に表示される名称
display: 'standalone', // 表示モード 'fullscreen' 'standalone' 'minimal-ui' 'browser'
theme_color: '#ff4a93', // アプリケーションの既定のテーマ色を定義
background_color: '#ffdce6', // 背景の色
lang: 'ja', // 言語
start_url: '/?mode=pwa', // アイコンから起動した時のURL
icons: [
{
src: '/icon.png',
sizes: '512x512',
type: 'image/png'
}
],
}
}
追加して正しく設定が完了していると、画面下部にインストールを促すバナーが表示され、
追加をタップすると、ホーム画面にアイコンが追加されます。
追加されたアイコンをタップすると、manifestで設定したモードでアプリケーションとしてWEBページを起動できます。
今回はdisplayを standalone
で設定しているので、アドレスバーなどの表示を消え、テーマカラーに設定した色で画面上部のアイコンや時計のエリアが表示されるようになります。
デスクトップの場合
PWAとしてホームスクリーンの設定がされている場合、デスクトップPCでもアプリのようにインストールをすることができます。
対応しているサイトの場合は、アドレスバーの横に+ボタンが表示されるので、それをクリックするとインストールダイアログが表示されます。
「インストール」をクリックすると単体のウィンドウで起動することができ、デスクトップアプリのように使用することができます。
プッシュ通知の対応
次に対応したのはプッシュ通知。
今回は手軽にプッシュ通知を実装したかったので、 Push7というサービスを使っています。
導入は以下の手順で行います。
- 管理画面から
push7-worker.js
とmanifest.json
をダウンロード - push7-worker.js を
ルートディレクトリに配置
- ダウンロードしたmanifest.jsonの内容を
nuxt.config.js
内の manifestの項目に追記。 - 指定されたSDKのタグを貼り付ける。
3.に関しては、以下のようなコードがダウンロードできるので、それを予め設定しているNuxtの設定に追記します。
export default {
・・・
/*
** PWAの設定
*/
manifest: {
name: 'Nuxt.jsのPWA', // アプリの名称
short_name: 'Nuxt PWA', // ホーム画面に表示される名称
display: 'standalone', // 表示モード 'fullscreen' 'standalone' 'minimal-ui' 'browser'
theme_color: '#ff4a93', // アプリケーションの既定のテーマ色を定義
background_color: '#ffdce6', // 背景の色
lang: 'ja', // 言語
start_url: '/?mode=pwa', // アイコンから起動した時のURL
icons: [
{
src: '/icon.png',
sizes: '512x512',
type: 'image/png'
}
],
gcm_sender_id: 'XXXXXXXXXXXX', // Push7の設定を追記
gcm_user_visible_only: true // Push7の設定を追記
}
}
4.に関しては、直接HTMLにタグを貼っても良いのですが、今回はNuxtのプラグインとして作成し、
各ページにそれを読み込ませるかたちで実装をしています。
class PushNotification {
constructor(id) {
this.loadScript().then(() => {
this.init(id)
})
}
loadScript() {
return new Promise((resolve) => {
const doc = document
const script = doc.createElement('script')
script.async = false
script.src = `https://sdk.push7.jp/v2/p7sdk.js`
doc.body.appendChild(script)
resolve()
})
}
init(id) {
const p7 = window.p7
p7.init(id, {
mode: 'native',
subscribe: 'auto'
}).then(() => {
console.log('初期化済み')
// p7.subscribe()
})
}
}
export default (ctx, inject) => {
const $push7 = new PushNotification('プッシュ通知設定のIDを入れる')
inject('push7', $push7)
}
export default {
・・・
plugins: [{ src: '~plugins/PushNotification.js', ssr: false }],
}
サーバーにアップロードが完了したら、Push7の管理画面からプッシュ通知のテスト配信を行います。
送信ボタンをクリックし、数秒後にはスマホ宛にプッシュ通知が届き、タップすると設定したURLのリンクを開くことができます。
最後に
今回試した施策のうち、PWAによるプッシュ通知はAndroidしか対応していないため、iOSではその恩恵は得られないのですが、
本来ネイティブアプリでしか対応できなかったプッシュ通知がPWAとして実装を行うことで、WEB単体でもプッシュ通知を送ることができるようになりました。
また、デスクトップにも対応したため、WEBアプリをあたかも普通のアプリケーションとして見せるといったことも可能になります。
PWA本当に奥が深い。今度はカメラ周りとかでもっと色々遊んで見ようかと思います。
Author And Source
この問題について(Nuxt.js+Push7でPWAアプリとプッシュ通知を実装する), 我々は、より多くの情報をここで見つけました https://qiita.com/chieeeeno/items/183b3e12deba59048f32著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .