1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
VEGAS Pro 17発売記念で最大92%Offのキャンペーンを実施中!

VEGAS Pro 17発売記念で最大92%Offのキャンペーンを実施中!

現在ソースネクストでは、VEGAS Proの新バージョンとなるVEGAS Pro 17の発売を記念して、VEGAS製品を大幅に値引きするスーパーチャンスのキャンペーンを実施しており、最大...

Lecone Qi 10Wワイヤレス充電台&紫外線UV除菌器を使ってみた!(30%Offクーポンあり)

Lecone Qi 10Wワイヤレス充電台&紫外線UV除菌器を使ってみた!(30%Offクーポンあり)

今回紹介するのはLeconeのQiワイヤレス充電台&紫外線UV除菌器です。置くだけでスマホなどを簡単に充電できるQiワイヤレス充電器とボックスの中に入れたスマホや小物などを...

Samsung Galaxy A80がフラッシュセールで激安!さらに66ドル安くなるクーポンあり!

Samsung Galaxy A80がフラッシュセールで激安!さらに66ドル安くなるクーポンあり!

今回はSamsung Galaxy A80の激安情報とクーポンについて紹介します。ただいま、GearBestでは、Samsung Galaxy A80 4G Phablet 8GB RAM 128GB ROM Original International V...

MOTOROLA Moto Zのバッテリーを自分で交換してみました!

MOTOROLA Moto Zのバッテリーを自分で交換してみました!

私の愛用しているモトローラ製のスマホのMoto Zなんですが、購入して2年も経たずにバッテリーが異常で100%まで充電しても5分くらいで落ちるというくらいヘタってしまったの...

AliExpressでスマホのバッテリーを激安で輸入してみました!

AliExpressでスマホのバッテリーを激安で輸入してみました!

最近スマホのバッテリーの調子が悪くて、100%まで充電しても5分くらいで電源が落ちてしまうようになってしまいました。交換用バッテリーをamazonなどで探していたのですが...

Leconeの5in1機能モバイルバッテリー付きUSB扇風機を使ってみた!(クーポンコードあり)

Leconeの5in1機能モバイルバッテリー付きUSB扇風機を使ってみた!(クーポンコードあり)

今回はLeconeの5in1機能 モバイルバッテリー付きUSB扇風機を紹介したいと思います。この5in1機能とは5つの機能がありモバイルバッテリー、携帯扇風機、卓上扇風機、スマホ...

合計230ドル!?8個のソフトウェアを無料でゲットできるキャンペーン!

合計230ドル!?8個のソフトウェアを無料でゲットできるキャンペーン!

現在WonderFoxとFotoJet、Auslogics、WiseCleaner、Epubor、Iris、DoYourData、PCWinSoftの8社が協力して、8つのソフトウェアのライセンスを無料でプレゼントする新学期キ...

VirtualBoxにElementaryOSをインストールしよう!

VirtualBoxにElementaryOSをインストールしよう!

前回の記事のOracle VM VirtualBoxで仮想マシン環境を構築しよう!ではVirtualBoxをインストールして仮想マシンを作れる状態までやりました。そこで今回はその続きで実際に...

Oracle VM VirtualBoxで仮想マシン環境を構築しよう!

Oracle VM VirtualBoxで仮想マシン環境を構築しよう!

今回はOracle VM VirtualBoxを使ってelementary OSの仮想マシン環境を構築したいと思います。Linuxなどの他のOSを使いたい時に、物理マシンにインストールするというのもあ...

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位が表示されます。今ならリンクするだけで簡単に上位に表示されます。