フリーランスらに無償やり直し243回。下請け法違反で公取が指導 他
- 隔週月曜更新!フリーランス・副業ニュース
どうもWorkshipMAGAZINEの中の人のつちやの人(つちやのひと)です。
最近PWAとAMPなど、Googleが新たしい技と次々と投入してきますが、ついていくのがなかなか大変。
今回はWordpressをPWA化させるということで、「そもそも出来るのかな……?」と思って調べたところ
まったく情報がねぇ
なので、できませーんと言ってノの民に戻ろうとしたのですが、それはだめみたいでした、無念。
なので、今回はWordpressをPWA……つまりWorkshipMAGAZINEをPWA化させるにあたって愚痴ハマったポイントを紹介したいと思います。
モバイルならPWA……そんな未来に向けて俺は一歩足を踏み出した……!
本記事は2018/04/24地点の情報になります、もし古い・記事が間違っているというご指摘はぜひお問い合わせ・ツイッターにいただければと思います。
またWordpressとWebアプリケーションではPWAの対応方法などが違うと思われますので、Webアプリケーションの場合は参考程度に見ていただければと思います。
なお今回の記事でPWAとはなんぞやという記事は本記事では一切触れません。
PWAとはのこちらを読んでいただければと思います。僕も読みました。
さらに前提としてですが、PWA対応させるためにはAMP対応が必要と書いてあるメディアもありますが、実際は不要です。
PWAとは?Webサイトをアプリ化して高エンゲージメントを得るためのUX設計
Workship MAGAZINE
必要なファイルたちを配置します。
このファイルはうちのサイトはこういうサイトだよ!という情報を定義するファイルです。
PWA時にアプリ名などは、このファイルの情報が使用されます。
{
"name": "Workship",
"short_name": "Workship",
"description": "Workship magazineはフリーランスのエンジニア・デザイナーをはじめとしたWebクリエイター向けの情報メディアです。海外発のトレンド情報、勉強会のレポート、最新ニュースをお届けいたします。",
"start_url": "/magazine/?utm_source=home-screen&utm_medium=pwa",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff",
"icons": [{
"src": "/magazine/icons/pwa-48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "/magazine/icons/pwa-72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "/magazine/icons/pwa-96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "/magazine/icons/pwa-144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "/magazine/icons/pwa-168.png",
"sizes": "168x168",
"type": "image/png"
}, {
"src": "/magazine/icons/pwa-192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/magazine/icons/pwa-256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/magazine/icons/pwa-512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
例としてはこんな感じです。
ほとんどのパラメータは見ればわかるようなパラメータが多いと思いますので、一点だけ解説しますと、
"display": "standalone"
こちらのパラメータが、重要でiOSでPWAさせるためには現状これ以外指定できません、詳しくは後述の注意点を見ていただければと思います。
これはPWAを登録させるために必要なファイルです。
PWA動作時にアプリケーションでどのようなこと(たとえばインストール時・ページ遷移時・・・など)をやりたいか、を記載するファイルです。
self.addEventListener( 'fetch', function( event ) {
});
ファイルはこのような感じで配置しました。
何かしら記載してあれば問題ないようです。
PWAで必要なJSファイルです。
window.addEventListener('load', function() {
console.log('pwa onload');
'serviceWorker' in navigator & amp; & amp;
navigator.serviceWorker.register('/magazine/service-worker.js').then(function() {
console.log('serviceWorker registed.');
})['catch'](function(e) {
console.warn('serviceWorker error.', e)
})
});
windowが読み込まれたときにPWAを登録させるプログラムです。
具体的にどのようなサイズが必要か・・・という情報がなくて以下のサイズを用意しました。
48 / 60 / 72 /76 / 96 / 114 /120 /144 /152 / 168 / 180 / 192 / 256 / 512
こちらのサイズ(正方形)でpngで用意しました。
アイコンサイズについてこれさえあればええんやで……みたいな情報をお持ちの方……ご共有いただければ……!
headタグに以下を追加します。
<link rel="apple-touch-icon" href="/magazine/pwa-images/pwa-48.png" sizes="57x57">
記述例はこんな感じで定義しました。
manifestファイルに書いたから、ここに書く必要ないんじゃないかーと思ったあなた、僕もそう思いました。
しかし現実とは非情で、残念ながらここでアイコンを定義しないとアイコンとして使用されません、がっでーーーーむ!!
<link rel="manifest" href="/magazine/manifest.json">
こんな感じ、hrefの配置場所は好きに変えてください。
<script src="/magazine/js/pwa.js"></script>
これでだいたいの開発は終わりました、これだけで済むと結構楽ですね。
せっかくPWAで動くようになったので、Webブラウザ通知も導入しましょう。
firebase・GCP の cloud functionsを使えば、ネイティブで実装することも出来るそうですが、本格的に作ると結構しんどいし、Wordpressなので、プラグインに頼る今回はonesignalという通知のSAASを導入しました。
こちらのプラグインについては、ドキュメントを見ながらで導入できるのでドキュメントを見ていただければと思います。
PWAは動作環境として以下の場合のみ動作します。
※ ちなみにSSLの場合はオレオレ証明書で作成したSSLはPWAでエラーが表示され動作しません。
Xcodeに搭載されているiOS iOSsimulatorを使用します。
Xcodeのメニューを押して
を選択して、iOSを起動します。
こちらはlocalhostが使用できるため、safariなどを起動してlocalhostに接続してデバッグしましょう。
Androidだとlocalhostが自分自身になってしまうためSSLが入っている環境で動作させる必要があります。
AndroidのエミュレータなどでAndroidを起動し、Chromeなどで対象のサーバーに接続しテストします。
iOS11.3の仕様です、対応を待ちましょう。
先程manifest.jsonで記載しましたdisplayパラメータ・これが結構めんどくさいことになってます。
このdisplayパラメータ何かと言いますと
Web アプリケーションで、開発者が好む表示モードを定義します。
ふむ、何言ってるか全然わからんな。
用はアプリケーション動作時の画面の見た目を変えるパラメータかー・・・と思ったがそうでもないらしい
まず最初にiOSだと“display”: “standalone”だとスワイプで戻ることができません。
これは多分別にWordpressのバグじゃない気がします、Safariの仕様です、もうどうすればいいんだこれ。
まぁ仕様ということでいいさ、ならdisplayの値をminimal-uiにすれば戻るボタンとは出るだろう。
・・・出ねぇ
それどころか、PWAで動作せず普通にブラウザで開くようになりました。
2点目は“display”: “minimal-ui”はiOSだと動作しない
以上がiOSでの注意点です、もっと開発進めれば解決する方法ありそうだけど、今のところ限界っぽいです。
PWA化してみましたが、現状では実装コストに対して評価は難しいかなという印象でした。
モバイルはアプリという風潮が大きかったですが、Swiftなどをやっている自分からすれば結構対応コスト安く対応できたのではないかな?と思いました。
特に日本はiOSのシェアが大きいので特にiOSのPWA周りがまだまだ弱いので対応コストも高いかなという印象です。
あとはこれからPWAも少しずつ良くしていく予定ですがPWAと絡ませれば、爆速アプリが作れるのではないかなと思います。
にしてもプラグインひとつで対応できるって・・・うらやましいなぁ(遠い目)