Vue.jsで作ったアプリをPWA化した話 - いいねのお勉強ノート

f:id:iine_programming:20190921211851p:plain

f:id:iine_programming:20190921211927p:plain

Twitter liteを初めて触ったときからPWAに憧れていたのでついにやってみた。

PWA化のためにやったこと

参考

  "dependencies": {
    "core-js": "^2.6.5",
    "firebase": "^6.6.1",
    "vue": "^2.6.10",
    "vuetify": "^2.0.0",
 +   "register-service-worker": "^1.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2",
+    "@vue/cli-plugin-pwa": "^3.7.0"
  },

package.jsonのdependenciesとdevDependenciesに必要なパッケージを追加。
npm installをする。

/* eslint-disable no-console */

import { register } from "register-service-worker";

if (process.env.NODE_ENV === "production") {
    register(`${process.env.BASE_URL}service-worker.js`, {
        ready() {
            console.log(
                "App is being served from cache by a service worker.\n" +
                "For more details, visit https://goo.gl/AFskqB"
            );
        },
        registered() {
            console.log("Service worker has been registered.");
        },
        cached() {
            console.log("Content has been cached for offline use.");
        },
        updatefound() {
            console.log("New content is downloading.");
        },
        updated() {
            console.log("New content is available; please refresh.");
        },
        offline() {
            console.log(
                "No internet connection found. App is running in offline mode."
            );
        },
        error(error) {
            console.error("Error during service worker registration:", error);
        }
    });
}

./src/registerServiceWorker.jsを作成。

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import Firebase from "./firebase" 
import "./registerServiceWorker"; //追加


Firebase.init(); 
Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

./src/main.jsに呼び出しを追加

app-manifest.firebaseapp.com

AppManifestGeneratorを利用し、manifest.jsonとアイコンファイルを作成。
./public配下に配置。

    <link rel="manifest" href="manifest.json">
    <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.8/pwacompat.min.js"
                   integrity="sha384-uONtBTCBzHKF84F6XvyC8S0gL8HTkAPeCyBNvfLfsqHh+Kd6s/kaS4BdmNQ5ktp1"
                   crossorigin="anonymous"></script>