このページへのアクセス
今日: 1 / 昨日: 0
総計: 10
—2019/02/16 更新
03.初めてのJavascriptでおみくじアプリのWebサイトをPWA化して、スマホでオフラインでも利用できるようにしたいと思います。
今回は、https://qiita.com/yshrkn/items/519cc58cb54e0f7f61aeを参考にさせていただきました。
Windows10 Pro (1803) VisualStudioCode git version 2.20.1.windows.1 Chrome
ファイル構成は、https://github.com/yshrkn/pwa-test?files=1 と同様にします。
index.html manifest.json sw.js |-images/ icon-192x192.png
manifest.jsonから作成していきます。
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の新規作成
// 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>
PWAの条件として、HTTPSだけでなく、localhostでも動作します。
localhostで、Windowsデスクトップアプリとしてインストールしてみます。
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
https://adash333.github.io/omikuji-pwa/ をAndroidスマホで開きます。
無事、「ホーム画面に追加」の画面が出て、WEBサイトをアプリとして保存し、オフライン下でも、おみくじアプリを動かすことができました。
→本当に、Google Playに登録する必要がないんですね。
Macが対応してくれれば、念願のiPhoneアプリも無料で作れるかも!?
(2019年現在、iPhoneアプリ作成するためには、Macパソコンと、年間1万円以上のコストがかかります。)
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)