サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

sidebar

03.初めてのjavascriptでおみくじアプリ:おみくじアプリのpwa化


おみくじアプリのPWA化

2019/02/16 更新
03.初めてのJavascriptでおみくじアプリのWebサイトをPWA化して、スマホでオフラインでも利用できるようにしたいと思います。

すること

  1. おみくじアプリをPWA化する

今回は、https://qiita.com/yshrkn/items/519cc58cb54e0f7f61aeを参考にさせていただきました。

ソースコード
https://github.com/adash333/omikuji-pwa

DEMO
https://adash333.github.io/omikuji-pwa/

開発環境

Windows10 Pro (1803)
VisualStudioCode
git version 2.20.1.windows.1

Chrome

index.htmlのダウンロードとファイル構成

ファイル構成は、https://github.com/yshrkn/pwa-test?files=1 と同様にします。

index.html
manifest.json
sw.js
 |-images/ icon-192x192.png
  1. ローカルパソコンの、C:/js/ フォルダに omikuji-pwa/ フォルダを作成
  2. 上記フォルダの中に、https://github.com/adash333/javascript-test/blob/master/index.htmlのindex.htmlを保存
  3. omikuji-pwa/ フォルダに、192x192pixelのアイコン画像を保存。

PWAを作成するための3条件

  1. サイトがHTTPS対応(GitHub Pagesや、NetlifyはHTTPS対応なので大丈夫です)
  2. マニフェスト(manifest.json)の作成・読み込み
  3. Service Worker(sw.js)の作成・読み込み

manifest.jsonから作成していきます。

manifest.jsonの作成とindex.htmlへの読み込み

manifest.jsonの新規作成

{
  "name": "Omikuji PWA",
  "short_name": "Omikuji",
  "theme_color": "#99f84b",
  "background_color": "#99f84b",
  "display": "standalone",
  "start_url": "./index.html",
  "icons": [
    {
      "src": "./images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

マニフェストmanifest.jsonの読み込み
index.html の<head></head>内に、以下の1行を挿入します。

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

sw.jsの作成とindex.htmlへの読み込み

sw.jsの新規作成

// Cache name
const CACHE_NAME = 'omikuji-pwa-caches-v1';
// Cache targets
const urlsToCache = [
  './',
  './index.html',
];
 
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches
      .open(CACHE_NAME)
      .then((cache) => {
        return cache.addAll(urlsToCache);
      })
  );
});
 
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches
      .match(event.request)
      .then((response) => {
        return response ? response : fetch(event.request);
      })
  );
});

sw.jsの読み込み
index.html の<bode></body>内に、以下を挿入します。

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js').then(registration => {
      console.log('ServiceWorker registration successful.');
    }).catch(err => {
      console.log('ServiceWorker registration failed.');
    });
  }
</script>

Windows上で、Chromeからデスクトップアプリとして登録してみる

PWAの条件として、HTTPSだけでなく、localhostでも動作します。
localhostで、Windowsデスクトップアプリとしてインストールしてみます。

  • VisualStudioCodeの拡張機能で、Live Serverをインストールします。

  • 画面下の、Go Liveをクリックすると、Chromeが開きます。


  • Chromeの右上の点が三つならんだボタンをクリック > 「Omikuji PWA」をインストールしています… をクリック

  • すると、以下のような画面になるので、『インストール』をクリックします

  • Windowsデスクトップアプリができました。


GitHubにアップロード(push)して、GitHub Pagesで公開



  • 上記を参照しながら、VisualStudioCodeでCtrl+@で、ターミナル画面(cmd.exe)を開き、以下を入力
echo "# omikuji-pwa" >> README.md
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/adash333/omikuji-pwa.git
git push -u origin master

  • 画面右上のSettingsをクリック

  • 下の方へ行き、GitHub Pagesのところで、None をクリックして、master branchをクリック > Save をクリック


  • 画面がリロードされるので、再度、下の方へ行って、図のリンクをクリック

  • 以下のようなサイトが公開されたことがわかります

ソースコード

Androidスマホでサイトを閲覧し、アプリととしてホーム画面に追加する

https://adash333.github.io/omikuji-pwa/ をAndroidスマホで開きます。

無事、「ホーム画面に追加」の画面が出て、WEBサイトをアプリとして保存し、オフライン下でも、おみくじアプリを動かすことができました。
→本当に、Google Playに登録する必要がないんですね。
Macが対応してくれれば、念願のiPhoneアプリも無料で作れるかも!?
(2019年現在、iPhoneアプリ作成するためには、Macパソコンと、年間1万円以上のコストがかかります。)


PWAについてのリンク

https://qiita.com/yshrkn/items/519cc58cb54e0f7f61ae
@yshrkn
2018年12月21日に更新
PWA導入までの3ステップと、簡単なオフライン対応まで

https://qiita.com/narikei/items/4240f03542f29e313989
@narikei
2018年09月15日に更新
「ホーム画面に追加」からはじめる『PWA(Service Worker)』

https://qiita.com/TakeshiNickOsanai/items/8d012a128827c9db980d
@TakeshiNickOsanai
2019年02月13日に更新
Progressive Web Apps (PWA) 学習者のメモ その1  (Service Worker)

リンク


03.初めてのjavascriptでおみくじアプリ/おみくじアプリのpwa化.txt · 最終更新: 2019/02/16 by adash333