igataをPWA化する4
はじめに
結局今回もアプリの中身には入らずにプッシュ通知の実装をしました。
参照
以下のサイトを参考に進めました。
内容
プッシュ通知はGoogleChromeのDevToolsを使って試しました。
写真のPush
というボタンを押したら
こんな感じでメッセージを受信できるようにします。
template.htmlを拡張
template.html
の<script>
を拡張してpushメッセージを受信できるようにします。
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('sw.js')
.then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope)
registration.pushManager.subscribe({userVisibleOnly: true})
})
.catch(function(err) {
console.log('ServiceWorker registration failed: ', err)
})
}
</script>
加えたのはregistration.pushManager.subscribe({userVisibleOnly: true})
だけです。
webpack.common.jsを改造
WorkboxWebpackPlugin.generateSW
をやめてWorkboxWebpackPlugin.InjectManifest
を使うようにします。プッシュ通知のロジックをsw.js(自動生成されるServiceWorkerのスクリプト)
に付け足す必要があるからです。plugins
をこんな感じで書き換えます。
const plugins = [
new HtmlWebpackPlugin({
favicon: param.faviconPath,
templateParameters: { title: param.title },
template: param.templatePath,
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new WorkboxWebpackPlugin.InjectManifest({
swSrc: param.swSrcPath,
swDest: 'sw.js',
}),
new CopyWebpackPlugin(['src/assets/manifest/manifest.webmanifest']),
]
このswSrc
のパスで指定したスクリプトを土台にsw.js
を自動生成します。土台となるスクリプトをこんな感じで実装します。
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js')
workbox.core.skipWaiting()
workbox.core.clientsClaim()
self.addEventListener('push', event => {
const title = 'Get Started With Workbox'
const options = {
body: event.data.text(),
}
event.waitUntil(self.registration.showNotification(title, options))
})
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST)
さいごに
また今回もアプリ開発をしませんでしたが、気楽に進めて行きたいと思います。
Author And Source
この問題について(igataをPWA化する4), 我々は、より多くの情報をここで見つけました https://qiita.com/ufoo68/items/5cf65f0e2897bdc76a5e著者帰属:元の著者の情報は、元の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 .