WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

公開日: : android, html5, javascript, PWA

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。
具体的には、スマホで最近よく見かける「ホームボタンに追加」をつけようと思います。

そういう、WEBページをアプリっぽくすることを、PWA(Progressive Web Apps)というらしいです。

PWA を調べていると、この参考サイト のまんまでしたが。
一応ここでも簡単にやってみようと思います。

「ホームボタンに追加」が可能な条件

SSL 化されている

他に「滞在時間」や「2回以上の訪問」などの条件もあるみたいですが、ちょいちょい変更されるらしいです。

サービスワーカーのアイコンを作る

まずは、アイコンを作ります。

アイコンのサイズ

サイズは最低 192 × 192 px です。
手書きメモ張アプリのアイコン
その他小さいサイズのアイコンも用意してもいいですが、しなくても自動で小さいものが表示するらしいので、今回はこのようなアイコンひとつにしました。

manifest.json

manifest.json ファイルを作る

manifest.json ファイルを作ります。

{
	"lang": "ja",
	"name": "手書きメモ張 - WEBアプリ",
	"short_name": "手書きメモ張",
	"start_url": "./",
	"display": "fullscreen",
	"background_color": "#fff",
	"icons": [{
        "src": "./memotyo192.png",
    	"sizes": "192x192",
        "type": "image/png"
      }]
}

中身はこのようにしました。

今回 display は fullscreen にしましたが、全4種類あります。

fullscreen サイトを全画面表示。ブラウザの UI は非表示。
standalone サイトを全画面表示。ステータスバーなど一部の UI は表示。
minimal-ui 最低限のブラウザの UI を表示。
browser 通常のブラウザで開いた時と同じ。

manifest.json を読み込む

head 内にコード追加します。

<link rel="manifest" href="./manifest.json">

Service Worker(サービスワーカー)の登録

sw.js をつくる

<サービスワーカーのファイルについて>

  • ファイルはあった方がいいかも
  • 中身も書いた方がいいかも

条件が不確かなのではっきりは分かりませんが、サービスワーカーのファイルはなくてもいいと思い込んでいましたが、あった方がいい気がしました。

中身も空でも大丈夫な場合もありましたが、以下のように入れないと出ないような環境もあったので、サービスワーカーのファイル sw.js を以下のように作りました。

// インストール
self.addEventListener('install', (event) => {

	// とりあえず何もしません

});

// 起動
self.addEventListener('activate', (event) => {

	// とりあえず何もしません

});

// ネットワークリクエスト
self.addEventListener('fetch', (event) => {

	// とりあえず何もしません

});

参考サイトと同じにしました。

サービスワーカーの登録

head内に Javascript を入れます。

<script>
// サービスワーカー対応ブラウザだったら
window.addEventListener('load', function() {
if ('serviceWorker' in navigator){
	navigator.serviceWorker.register('sw.js').then(function(registration){
	});
}
});
</script>

ホーム画面に追加が出ない

ブラウザの開発ツールで確認

出来ない場合は、F12ボタンを押して開発ツールを見ます。
manifest.json でエラー ホーム画面に追加が出ない
自分の場合はこんな感じのエラーでした。

Unsupported encoding.JSON must be UTF-8.

manifest.json を UTF-8 にしたら出来ました。( sw.js もUTF-8にしました。)
WEBページをアプリっぽくする(ホーム画面に追加)
タイトルが切れてるので、5文字くらいのがよかったかもしれません。

完成デモはこちら。
DEMO を見る

関連記事

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

SVGとは?

SVGとは? SVG(Scalable Vector Graphics)は、XMLをベースとした、

記事を読む

JavaScript タイピングゲーム スマホ用

Javascript タイピング ゲーム スマホ用 をつくる

JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや

記事を読む

canvas タグでお絵描き(レスポンシブ)

canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas のレスポンシブが少しひっかかっ

記事を読む

JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)

HTML5 audio タグ を使って音声を出す

HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生

記事を読む

Strict モード JavaScript

Javascript Strictモード “use strict”;

Strict モード(厳格モード) Strict モードとは、ECMAScript5(2009年1

記事を読む

画像の拡大・縮小 タッチイベント

画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。

記事を読む

Javascript let const アロー関数 クラス

Javascript ES5,6 の新機能(letとconst,アロー関数,クラスなど)

ESとはECMASCriptの略で、ECMA という国際的な標準化機関が定めた JavaScript

記事を読む

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキスト入力欄で(ビジュアルタブの

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

android html5 javascript PWA

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキ

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

→もっと見る

    • 202405
      Mon Tue Wed Thu Fri Sat Sun
      12345
      6789101112
      13141516171819
      20212223242526
      2728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑