1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
プライムデーセールがスタート!Amazon Echoシリーズが最大60%Offで大幅値引き!

プライムデーセールがスタート!Amazon Echoシリーズが最大60%Offで大幅値引き!

15日から始まったAmazonプライムデーセールですが、EchoシリーズやKindle、FireTVなどのAmazonデバイスが大幅値下げされています。中でもおすすめなのがAlexaを搭載するス...

超!A&G+がEchoシリーズで再生可能に!Amazon Alexaが再生に対応!

超!A&G+がEchoシリーズで再生可能に!Amazon Alexaが再生に対応!

文化放送が運営しているアニラジ専門のインターネットラジオである超!A&G+(ちょう!エーアンドジープラス)がAmazon Alexaに対応しました。これによりスマートスピーカ...

Amazon Prime VideoでChromecastへのキャストが可能に!

Amazon Prime VideoでChromecastへのキャストが可能に!

ついに7月10日よりAmazonプライムビデオでChromecastへのキャストが可能になりました。Amazonプライムビデオのアプリをアップデートすることで、Chromecastへのキャストボ...

Chromeで拡張機能なしでページ全体のスクリーンショットを撮る方法!

Chromeで拡張機能なしでページ全体のスクリーンショットを撮る方法!

みなさんはサイトのページ全体をキャプチャしてスクリーンショットを撮りたい時はどうしていますか?よくある手法としては拡張機能を入れてスクリーンショットを撮るという...

AOMEI BackupperでSSD&HDDを定期的に丸ごとバックアップしよう!

AOMEI BackupperでSSD&HDDを定期的に丸ごとバックアップしよう!

最近のPCではシステムドライブとしてSSDが採用されているのは当たり前の時代になりましたが、みなさんバックアップはしっかり取っていますか?SSDはHDDと比較しても非常に...

デュエルリンクスの最新情報が読めるアンテナを作りました!検索機能も大幅アップデート!

デュエルリンクスの最新情報が読めるアンテナを作りました!検索機能も大幅アップデート!

先日、遊戯王デュエルリンクスのカード検索サイトであるDuelLinks.netを公開しましたが、追加機能としていくつかのアップデートを行ったので、こちらにまとめておきます。...

クランプ式USBハブのORICO 4PORTS CLIP HUB MH4PU-U3を使ってみた!

クランプ式USBハブのORICO 4PORTS CLIP HUB MH4PU-U3を使ってみた!

今回紹介するのはクランプ式(クリップ式)のUSB3.0の4ポートハブであるORICO MH4PU-U3です。このUSBハブが普通のUSBハブとは違うのが、パソコン、液晶モニター、PCデスクな...

Amazon Music Unlimitedが4か月99円で音楽聴き放題‎のキャンペーンを実施中!

Amazon Music Unlimitedが4か月99円で音楽聴き放題‎のキャンペーンを実施中!

現在Amazonが提供する音楽定額配信サービスであるAmazon Music Unlimitedが4ヶ月99円で聴き放題となるキャンペーンを期間限定で実施中です。キャンペーンの期間は2019年7月...

nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

2012年から発売しているSONYのネットワークレコーダーの「nasne」がついに近日出荷が終了するとのアナウンスがされました。nasneとプレイステーション、スマートフォンをつ...

NetaGear RSS News

Now Loading

Article

PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!

Webデザイン > html+CSS+javascript 
PWA_home_add_000.png

先日の記事でNetaGearやDuelLinks.netでも「ホーム画面に追加」を実装して、WEBサイトをアプリのようにスマホのホーム画面に簡単に追加可能な「ホーム画面に追加」ボタンを実装しましたという記事を書きました。そこで今回は実際にPWA(ServiceWorker)で「ホーム画面に追加」を実装する方法について紹介したいと思います。

「ホーム画面に追加」ボタンの表示は一定期間内に2回以上サイトにアクセスすると自動的に表示されるものです。PWAで「ホーム画面に追加」の追加自体は比較的簡単にできるのでおすすめです。

PWAとは!?


PWA(Progressive Web Apps)とはWEBサイトを一般的なモバイルアプリのように使えるようにする仕組みのことを指します。PWA自体はHTTPSでレスポンシブデザインのWEBサイトに、ServiceWorkerなどを使ってオフライン機能やプッシュ通知などの機能を追加してネイティブアプリのように扱えるようにしているものです。

PWAを使うメリットとしてはWEBサイトをアプリのように端末にインストールが可能であり、キャッシュの設定を行うことでオフラインでも扱うことができます。また、アドレスバーの非表示やフルスクリーン化もできるほか、プッシュ通知など一般的なアプリと同様の処理を行うことができるようになります。

用意するもの


・httpsのサイト
・アイコン(512x512)
・ServiceWorker.js
・manifest.json

用意するものは以上の4つです。PWAを実装するには、まずhttpsのサイトである必要があります。もしまだhttpsでない場合には先にSSLの証明書を取得しましょう。次にスマホのホーム画面に追加するためにアイコンが必要になります。ServiceWorker.js、manifest.jsonは手順を進めながら作っていきたいと思います。

PWAで「ホーム画面に追加」を実装する方法!


PWA_home_add_001.png
1 Web App Manifest Generatorにアクセスします。このサイトでは512x512のアイコンをアップロードすると、様々なデバイス向けに色々なサイズのアイコンに変換してくれます。それ以外にも簡単にmanifest.jsonを作成することができます。

Web App Manifest Generator
https://app-manifest.firebaseapp.com/

PWA_home_add_002.png
2 manifest.jsonの内容を入力していきます。

・App Name
アプリ名です。起動時に表示されます。

・Short Name
ホーム画面に追加されるアプリの下に表示されるアプリ名です。

・Theme Color
テーマカラーです。ツールバーの色

・Background Color
バックグラウンドカラーです。起動時のバックグラウンドカラーの色です。

・Display Mode
ディスプレイモードです。Browser、Standalone、Minimal UI、Fullscreenから選択します。Browserは通常と同じブラウザ表示、Minimal UIはアドレスバーでURLの変更ができない状態、Standaloneはアドレスバーがなし、Fullscreenはアドレスバーおよび上部ツールバーと下部の戻るボタンなども一切表示されません。

・Orientation
画面の向きを設定できます。landscapeは横向き、portraitは縦向き、Anyはどちらもとなります。

・Application Scope
アプリケーションの場所を指定します。通常は"/"で大丈夫です。

・Start URL
スタートURLです。起動時に表示されるURLなので、サイトのURLを入力すればOKです。

PWA_home_add_003.png
3 「ICON」を押して、アイコンファイルをアップロードします。アイコンは512x512サイズでアップロードすると様々なデバイス用のアイコンにリサイズしてくれます。最後に「GENERATE.ZIP」を押すとZIPファイルがダウンロードされます。

PWA_home_add_007.png
4 serviceWorker.jsを作ります。中身は以下の通りです。「ホームに追加」を表示させたいだけならこれだけでOKです。

self.addEventListener('fetch', function(event) {

});


5 先ほどダウンロードしたzipファイル内にあるアイコンファイルのimagesフォルダとmanifest.json、そして先程作ったserviceWorker.jsをサーバーにアップロードします。serviceWorker.jsはWEBサイトの同一ドメインのアプリのルート直下に置く必要があります。アイコンとmanifest.jsonは外部サーバーでも大丈夫ですが、serviceWorker.jsだけは仕様による制約で別ドメインのサーバーに置くということができないため注意してください。下記コードをhtmlのhead内に加えます。

<link rel="manifest" href="./manifest.json" />
<script>
window.addEventListener('load', function () {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("./serviceWorker.js")
.then(function (registration) {
console.log("serviceWorker registed.");
}).catch(function (error) {
console.warn("serviceWorker error.", error);
});
}
});

</script>

<link rel="apple-touch-icon" sizes="180x180" href="./images/icon-192x192.png"&g


metaタグでスマホのアドレスバーの色を変更する方法!


Theme Color


スマホのアドレスバーの色を変更するには以下のmetaタグをhtmlのhead内に入れてあげると変更できます。contentで色を指定してあげてください。この方法はChrome/Firefox/Operaなどのブラウザがサポートしているようです。

<meta name="theme-color" content="#F90">

PWAの「ホーム画面に追加」の表示について


NetaGear_update2019_002.png

実装が完了してから、一定期間内に2回以上アクセスがあると上記画像のように、下から「ホーム画面にNetaGearを追加」といったダイアログが表示されるようになります。これをクリックすると右側のようにスマホアプリのようにアイコンが追加されます。先日公開したDuelLinks.net、NetaGear、ShopDDのアイコンが表示されています。

表示についてはStandaloneを選択しており、アドレスバーが表示されないようになっているため非常にすっきりとした表示になっています。Standaloneが見やすくて気に入っています。

FC2ブログで「ホーム画面に追加」を表示できるのか?


このブログ(shopdd.jp)は独自ドメインを取得していますが、中身はFC2ブログを使用しています。FC2ブログで「ホーム画面に追加」をやりたいと思ったのですが、serviceWorker.jsはドメイン直下に置く必要があり、現状のFC2ブログではその位置にserviceWorker.jsを術がないため「ホーム画面に追加」の表示は実装できません。FC2ブログユーザーがServiceWorkerを使えるように運営にたくさんリクエストを送ればそのうち実装されるかもしれませんが、現在では望みは薄そうです。とりあえず望みは薄そうではありますが、行動しないよりはマシということでFC2に実装してくれるようにリクエストを送ってみました。FC2ブログユーザーのみなさんはよろしければ賛成票を入れていただけると幸いです。

Service Workerを使えるようにして欲しい - FC2リクエスト
https://request.fc2.com/ja/request/9803

ちなみに以前話題になっていたFC2の爆速テンプレートにはServiceWorkerが実装されているので、可能性がないわけではなさそうです。現にURLの後ろにservice-worker.jsをつけたアドレスにアクセスすると、service-worker.js自体はすでに存在しているので、これがユーザー向けに編集が可能になれば実現は可能です。

http://shopdd.jp/service-worker.js

爆速テンプレートで使われているservice-worker.jsは、head内に下記コードを加えればFC2ブログでも動かすことはできます。動かしたところで中身がほぼないですし、自分で編集できないので特に意味はないのですけどね・・・。

<script type="text/javascript">
window.addEventListener('load', function () {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("./service-worker.js")
.then(function (registration) {
console.log("serviceWorker registed.");
}).catch(function (error) {
console.warn("serviceWorker error.", error);
});
}
});
</script>


とりあえず「ホーム画面に追加」画面は出なくてもいいから、ホームに追加した時のアイコンなどを設定したいのであればテンプレートに先程上の手順で作成したアイコンとアイコンのURLを変更したmanifest.jsonをアップロードすれば、ダイアログは出ませんが、手動でChromeの「ホーム画面に追加」を押せばアプリのようなアイコンだけは表示させることが可能です。様々なデバイス向けのFaviconを作りたい場合は以下の記事を参照してください。



今回の個人的感想




今回紹介したのはServiceWorkerで「ホーム画面に追加」ボタンを表示する方法でした。簡単に作れるのでおすすめですね。ホームに追加すること自体はChromeのメニューからもできますが、意外に知らない人も多いので、こういう風に表示してあげることで少しでも見てくれる人が増えるといいのですけどね。ホームに追加するとアクセスが簡単になるのがいいですね。よく見るサイトはホーム画面に追加しておくと便利です。

PWAは画期的ですし、非常に便利な機能ではあるのですが、私の使っているFC2ブログでは残念ながらservice-worker.jsを編集できないのが残念ですね。これが編集できるようになれば色々とできることが増えてありがたいのですけど・・・。こういう新しい機能を使いたい場合はどうしてもFC2ブログなどのプラットフォームを使用していると難しい点も多いです。やはりサーバーを借りてWordPressなどに移行したほうが自分で色々できて便利なのですが、13年もFC2ブログを使っている身としては、移行はあまりしたくないという気持ちもあるんですよね。なんとか実装してくれないかなー。

サイトを持っている人はぜひ試してみてはいかがでしょうか?
Tag

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。