おみくじアプリのPWA化

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

すること

おみくじアプリを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

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

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

サイトがHTTPS対応（GitHub Pagesや、NetlifyはHTTPS対応なので大丈夫です）
マニフェスト（manifest.json）の作成・読み込み
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で公開

https://github.com/にログインして、新規リポジトリ“omikuji-pwa”を作成

上記を参照しながら、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　をクリック

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

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

ソースコード

https://github.com/adash333/omikuji-pwa

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

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でおみくじアプリ

目次：このサイトについて