PWA

Safariなどのmanifest.jsonに非対応ブラウザに

PWACompatは、manifest.jsonの対応していないブラウザをサポートすることができるGoogle製のライブラリです。 このライブラリを使用すれば、iOSのためにメタタグを羅列したり、スプラッシュスックリーン用の画像を準備する作業から開放されます。 デモ Google Developers デモサイト 実装方法 各ブラウザへの効果 iOS Safari apple-mobile-web […]

http上でのService Workerの動作確認

Service Workerとは Service WorkerはWebページのバックグラウンドで動くスクリプトです。 オフラインでの起動や通知機能を実現することができるので、ネイティブアプリのような実装をすることができます。 通常は、セキュリティの都合上HTTPSでしか動作しません。 ブラウザの対応状況 IE以外のモダンブラウザで動作します。 Service Workerの設定方法 以下のソースを […]

PWAをGoogle Playにリリースする方法【PWA2APK】

昨日、PWAをGoogle Playをアップロードできるようになったと話題になりましたが… 実際は、PWAをそのままGoogle Playにリリースすることができるようになったわけではなく、Chrome72で実装されたTWA(Trusted Web Activity)を使用することで、URLバー無しでPWAページを開かせるAndroidアプリを開発できるようになったということらしいです。 しかし、 […]

PWA VS ネーティブアプリ

  • 2018.12.28

PWAとネーティブアプリについて、いい感じにプレゼンされている動画があったので、シェアしたいと思います。リスニングができなくても、パワポだけでおおよその内容は分かるかと思いますので、PWAに興味がある方は一度視聴されたら良いと思います。 ネーティブアプリのメリット ネーティブアプリがWEBに優っている項目は以下の3点です。 動作が速い 一貫したUIを オフラインでの動作 ネーティブアプリのデメリッ […]

最小構成のPWA

最小工数でPWAに対応する設定です。 HTML manifest.jsonの読み込み <link rel="manifest" href="/manifest.json"> iOSが完全にPWAに対応していないので、iOS用の設定が必要です。 <meta name="apple-mobile-web-app-capable" content="yes"> <link […]

PWAに必要な最小個数のアイコンサイズについて

  • 2018.09.13

WEBをPWA対応させるには、様々なアイコンが必要になります。 そして、以下のツール類を用いれば簡単に色んなファイルサイズの画像を生成してくれますが… Favicon Generator. For real. 様々なファビコンを一括生成。favicon generator App Manifest Generator 今回は、逆の切り口でPWAに最小個数のアイコン画像のサイズについて考えました。 […]