PWA / Progressive Web Apps の初級編、PC デスクトップ版
index:
概要
PWA / Progressive Web Apps で
PC デスクトップ版のインストール、PWA起動
あたりまでの、実装となります
・PCデスクトップ版、スマホ/android等の
マルチデバイス環境に対応しているようですので
試してみました
iOS/ safariは、push通知に対応してないようです。
環境
chrome 81
javascript
netlify.com / ホスティングサービス
SSL必須のようです
参考
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp
https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
https://developers.google.com/web/fundamentals/web-app-manifest/?hl=ja
https://qiita.com/TakeshiNickOsanai/items/8d012a128827c9db980d
参考のコード
実装など
・ 今回は、netlifyに設置して。テストしました
SSL対応であれば、動作するようです
・manifest.json
https://github.com/kuc-arc-f/pwa_sample_pwa3/blob/master/manifest.json
{ "short_name": "PWA-3", "name": "PWA sample app-3", "display": "standalone", "orientation": "portrait", "start_url": "index.html", "icons": [ { "src": "images/icon.png", "sizes": "192x192", "type": "image/png" } ] }
・index.html
https://github.com/kuc-arc-f/pwa_sample_pwa3/blob/master/index.html
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8" /> <title>PWA-3</title> <link rel="stylesheet" href="./bootstrap.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="./manifest.json"> <!-- vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div class="container"> <h1>PWA-3 : ver 4</h1> <hr /> <div id="app"> <p>{{ message }}</p> <button v-on:click="proc_click">Count</button> </div> </div> <!-- ---> <script> "use strict"; registSW(); function registSW() { if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('./sw.js', { scope: './' }).then(function (registration) { console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function (err) { console.log('ServiceWorker registration failed: ', err); }); }); } } // vue.jsの設定関係 var app = new Vue({ el: '#app', data: { message: 'Hello!!', count : 0 }, methods: { proc_click: function () { this.count = this.count +1; this.message = "count : " + this.count; } } }); </script> </body> </html>
・sw.js
https://github.com/kuc-arc-f/pwa_sample_pwa3/blob/master/sw.js
// Service Worker のバージョンとキャッシュする App Shell を定義する const NAME = 'pwa-test-app-v3-'; const VERSION = '003'; const CACHE_NAME = NAME + VERSION; const urlsToCache = [ './index.html', './bootstrap.min.css', ]; // Service Worker へファイルをインストール self.addEventListener('install', function (event) { event.waitUntil( caches.open(CACHE_NAME) .then(function (cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); }); // キャッシュからレスポンスを返す self.addEventListener('fetch', function (event) { if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return; event.respondWith( caches.match(event.request) .then(function (response) { if (response) { return response; } return fetch(event.request); }) ); }); // self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(keys => Promise.all( keys.map(key => { if (!CACHE_NAME.includes(key)) { return caches.delete(key); } }) )).then(() => { console.log(CACHE_NAME + "activated"); }) ); });