Merge branch 'feature/pwa-offline' into develop

adenvt · adenvt · commit 5b65a65b174c · 2018-10-27T22:59:37.000+07:00
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@
 /public/images
 /public/fonts
 /public/mix-manifest.json
+/public/sw.js
 /storage/*.key
 /vendor
 /.idea
diff --git a/README.md b/README.md
@@ -2,12 +2,14 @@
 
 > Laravel + CoreUI + Vue Boilerplate
 
-[![GitHub version](https://badge.fury.io/gh/adenvt%2Flaravel-coreui-vue.svg)](https://badge.fury.io/gh/adenvt%2Flaravel-coreui-vue)
+[![PHP version](https://badge.fury.io/ph/adenvt%2Flaravel-coreui-vue.svg)](https://badge.fury.io/ph/adenvt%2Flaravel-coreui-vue)
+
 ## What's inside
-* [Laravel][laravel] 5.6, A PHP framework for web artisans
+* [Laravel][laravel] 5.7, A PHP framework for web artisans
 * [Core UI][coreui] for Vue, Free Bootstrap Admin Template
 * Usefull library: [Axios][axios], [jQuery][jquery], [Moment.js][moment], [Lodash][lodash]
 * [Vue Router][vue-router] and [Vuex][vuex], set out of the box
+* PWA ready, powered by [Offline-plugin][offline-plugin] and [Workbox][workbox]
 * Notification using [Vue-SweatAlert2][vue-sweatalert2] and [Vue-Notification][vue-notification]
 * Loading spinner with [Vue Loading Spinner][vue-loading-spinner]
 * Quick deployment with [Docker Compose][docker-compose]
@@ -26,7 +28,7 @@
 * For Ubuntu, require `apt-get install libpng16-dev`, [see](https://github.com/imagemin/imagemin-mozjpeg/issues/28)
 
 ## How to Install
-* Install using composer
+* Install using composer (no need to cloning)
 ```bash
 composer create-project --prefer-dist adenvt/laravel-coreui-vue project_name
 ```
@@ -108,3 +110,5 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 [vue-notification]: http://vue-notification.yev.io/
 [vue-loading-spinner]: https://nguyenvanduocit.github.io/vue-loading-spinner/
 [docker-compose]: https://docs.docker.com/compose/
+[offline-plugin]: https://github.com/NekR/offline-plugin
+[workbox]: https://developers.google.com/web/tools/workbox/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,10 +9,10 @@
     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "prod": "npm run production",
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "lint": "eslint --ext .js,.vue resources/assets/js/ ./*.js",
-    "lint-css": "stylelint \"resources/assets/sass/**/*.scss\"",
-    "fix": "eslint --ext .js,.vue resources/assets/js/ ./*.js --fix",
-    "fix-css": "stylelint \"resources/assets/sass/**/*.scss\" --fix",
+    "lint": "eslint --ext .js,.vue resources/js/ ./*.js",
+    "lint-css": "stylelint \"resources/sass/**/*.scss\"",
+    "fix": "eslint --ext .js,.vue resources/js/ ./*.js --fix",
+    "fix-css": "stylelint \"resources/sass/**/*.scss\" --fix",
     "lint-full": "npm run lint && npm run lint-css",
     "fix-full": "npm run fix && npm run fix-css"
   },
@@ -35,6 +35,7 @@
     "eslint-plugin-varspacing": "^1.2.1",
     "eslint-plugin-vue": "^4.7.1",
     "laravel-mix": "^2.1.14",
+    "offline-plugin": "^5.0.5",
     "pre-commit": "^1.2.2",
     "prettier": "1.12.1",
     "stylelint": "^9.5.0",
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,21 @@
+{
+  "short_name": "LCV",
+  "name": "Laravel CoreUI Vue",
+  "icons": [
+    {
+      "src": "/images/logo-symbol.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/images/logo-symbol.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "#36A2CD",
+  "theme_color": "#36A2CD",
+  "display": "standalone",
+  "orientation": "portrait"
+}
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
@@ -43,6 +43,7 @@ try {
 
   require('bootstrap')
   require('select2')
+  require('offline-plugin/runtime').install()
 
   $.fn.select2.defaults.set('theme', 'bootstrap4')
   $.fn.select2.defaults.set('width', '100%')
diff --git a/resources/js/coreui/views/sample/Dashboard.vue b/resources/js/coreui/views/sample/Dashboard.vue
@@ -838,7 +838,7 @@ export default {
       selected  : 'Month',
       tableItems: [
         {
-          avatar: { url: 'static/img/avatars/1.jpg', status: 'success' },
+          avatar: { url: require('static/img/avatars/1.jpg'), status: 'success' },
           user  : {
             name      : 'Yiorgos Avraamu', new       : true, registered: 'Jan 1, 2015',
           },
@@ -848,7 +848,7 @@ export default {
           activity: '10 sec ago',
         },
         {
-          avatar: { url: 'static/img/avatars/2.jpg', status: 'danger' },
+          avatar: { url: require('static/img/avatars/2.jpg'), status: 'danger' },
           user  : {
             name      : 'Avram Tarasios', new       : false, registered: 'Jan 1, 2015',
           },
@@ -858,7 +858,7 @@ export default {
           activity: '5 minutes ago',
         },
         {
-          avatar: { url: 'static/img/avatars/3.jpg', status: 'warning' },
+          avatar: { url: require('static/img/avatars/3.jpg'), status: 'warning' },
           user  : {
             name      : 'Quintin Ed', new       : true, registered: 'Jan 1, 2015',
           },
@@ -868,7 +868,7 @@ export default {
           activity: '1 hour ago',
         },
         {
-          avatar: { url: 'static/img/avatars/4.jpg', status: '' },
+          avatar: { url: require('static/img/avatars/4.jpg'), status: '' },
           user  : {
             name      : 'Enéas Kwadwo', new       : true, registered: 'Jan 1, 2015',
           },
@@ -878,7 +878,7 @@ export default {
           activity: 'Last month',
         },
         {
-          avatar: { url: 'static/img/avatars/5.jpg', status: 'success' },
+          avatar: { url: require('static/img/avatars/5.jpg'), status: 'success' },
           user  : {
             name      : 'Agapetus Tadeáš', new       : true, registered: 'Jan 1, 2015',
           },
@@ -888,7 +888,7 @@ export default {
           activity: 'Last week',
         },
         {
-          avatar: { url: 'static/img/avatars/6.jpg', status: 'danger' },
+          avatar: { url: require('static/img/avatars/6.jpg'), status: 'danger' },
           user  : {
             name      : 'Friderik Dávid', new       : true, registered: 'Jan 1, 2015',
           },
diff --git a/resources/js/sw.js b/resources/js/sw.js
@@ -0,0 +1,50 @@
+/* global workbox */
+/* eslint-env serviceworker */
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js')
+
+workbox.setConfig({ debug: process.env.NODE_ENV !== 'production' })
+workbox.skipWaiting()
+workbox.clientsClaim()
+
+// google stuff
+// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
+workbox.routing.registerRoute(
+  /^https:\/\/fonts\.googleapis\.com/,
+  workbox.strategies.staleWhileRevalidate({ cacheName: 'google-fonts-stylesheets' })
+)
+
+// Cache the underlying font files with a cache-first strategy for 1 year.
+workbox.routing.registerRoute(
+  /^https:\/\/fonts\.gstatic\.com/,
+  workbox.strategies.cacheFirst({
+    cacheName: 'google-fonts-webfonts',
+    plugins  : [
+      new workbox.cacheableResponse.Plugin({ statuses: [0, 200] }),
+      new workbox.expiration.Plugin({
+        maxAgeSeconds: 60 * 60 * 24 * 365,
+        maxEntries   : 30,
+      }),
+    ],
+  })
+)
+
+// static
+workbox.routing.registerRoute(
+  /\.(?:js|css)$/,
+  workbox.strategies.staleWhileRevalidate({ cacheName: 'static-resources' })
+)
+
+// images
+workbox.routing.registerRoute(
+  /\.(?:png|gif|jpg|jpeg|svg)$/,
+  workbox.strategies.cacheFirst({
+    cacheName: 'images',
+    plugins  : [
+      new workbox.expiration.Plugin({
+        maxEntries   : 60,
+        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
+      }),
+    ],
+  })
+)
diff --git a/resources/sass/coreui/style.scss b/resources/sass/coreui/style.scss
@@ -20,7 +20,7 @@ $simple-line-font-path: '~simple-line-icons/fonts/';
 @import '~simple-line-icons/css/simple-line-icons.css';
 @import '~select2/dist/css/select2.css';
 @import '~select2-bootstrap4-theme/dist/select2-bootstrap4.css';
-@import '~flag-icon-css/css/flag-icon.min.css';
+// @import '~flag-icon-css/css/flag-icon.min.css';
 @import '~animate.css/animate.min.css';
 
 // Import Other CSS Module
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html lang="{{ app()->getLocale() }}">
+
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#36A2CD">
 
     <!-- CSRF Token -->
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
     <title>{{ config('app.name', 'Laravel') }}</title>
 
+    <link rel="manifest" href="{{ asset('manifest.json') }}">
     <link rel="shortcut icon" href="{{ asset('favicon.png') }}">
 
     <!-- Fonts -->
@@ -19,12 +22,35 @@
     <!-- Styles -->
     <link rel="stylesheet" href="{{ asset(mix('css/app.css')) }}">
 </head>
+
 <body>
     <div id="app">
-        <!-- Inject -->
+        <noscript>
+            <div class="app flex-row align-items-center">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-md-6">
+                            <div class="clearfix">
+                                <h1 class="float-left display-3 mr-4">
+                                    <i class="fa fa-warning"></i>
+                                </h1>
+                                <h4 class="pt-3">Javascript Required</h4>
+                                <p class="text-muted">
+                                    Please enabling Javascript or try with other browser which have Javascript Support.<br>
+                                    <a class="btn btn-primary mt-3" href="{{ url()->current() }}">
+                                        Reload Page
+                                    </a>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </noscript>
     </div>
     <script src="{{ asset(mix('js/manifest.js')) }}"></script>
     <script src="{{ asset(mix('js/vendor.js')) }}"></script>
     <script src="{{ asset(mix('js/app.js')) }}"></script>
 </body>
+
 </html>
diff --git a/webpack.mix.js b/webpack.mix.js
@@ -1,7 +1,8 @@
-const path        = require('path')
-const mix         = require('laravel-mix')
-const webpack     = require('webpack')
-const { version } = require('./package.json')
+const path          = require('path')
+const mix           = require('laravel-mix')
+const webpack       = require('webpack')
+const { version }   = require('./package.json')
+const OfflinePlugin = require('offline-plugin')
 
 /*
  |--------------------------------------------------------------------------
@@ -23,7 +24,24 @@ mix.webpackConfig({
       'static': path.resolve(__dirname, 'resources/static/'),
     },
   },
-  plugins: [new webpack.DefinePlugin({ __VERSION: JSON.stringify(version) })],
+  plugins: [
+    new webpack.DefinePlugin({ __VERSION: JSON.stringify(version) }),
+    new OfflinePlugin({
+      publicPath      : '/',
+      appShell        : '/',
+      responseStrategy: 'network-first',
+      externals       : [
+        '/',
+        '/manifest.json',
+        '/favicon.png',
+      ],
+      ServiceWorker: {
+        entry : path.resolve(__dirname, 'resources/js/sw.js'),
+        output: 'sw.js',
+        minify: mix.inProduction(),
+      },
+    }),
+  ],
 })
 
 mix.extend('vueOptions', (webpackConfig, vueOptions, ...args) => {
