add PWA support

.gitignore

@@ -13,4 +13,5 @@
 /node_modules/
 /.idea/
 /public/*
-!/public/index.php
+!/public/index.php
+!/public/manifest.json

composer.json

@@ -10,6 +10,7 @@
         "nesbot/carbon": "^1.33",
         "ocramius/proxy-manager": "^2.0",
         "sensio/framework-extra-bundle": "^5.2",
+        "symfony/asset": "*",
         "symfony/console": "*",
         "symfony/flex": "^1.1",
         "symfony/framework-bundle": "*",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "de3f41fd3a5d7ba89450529bd34919b6",
+    "content-hash": "83d13f949e679cb8fda8394956353d73",
     "packages": [
         {
             "name": "doctrine/annotations",
@@ -1884,6 +1884,62 @@
             ],
             "time": "2018-05-12T09:37:42+00:00"
         },
+        {
+            "name": "symfony/asset",
+            "version": "v4.1.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/asset.git",
+                "reference": "7bec13dad0df8146ee6ba9350203fcc832814bfe"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/asset/zipball/7bec13dad0df8146ee6ba9350203fcc832814bfe",
+                "reference": "7bec13dad0df8146ee6ba9350203fcc832814bfe",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.1.3"
+            },
+            "require-dev": {
+                "symfony/http-foundation": "~3.4|~4.0",
+                "symfony/http-kernel": "~3.4|~4.0"
+            },
+            "suggest": {
+                "symfony/http-foundation": ""
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "4.1-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Asset\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony Asset Component",
+            "homepage": "https://symfony.com",
+            "time": "2018-07-26T09:10:45+00:00"
+        },
         {
             "name": "symfony/cache",
             "version": "v4.1.4",

config/packages/framework.yaml

@@ -14,6 +14,9 @@ framework:
     php_errors:
         log: true
 
+    assets:
+        version_strategy: 'assets.modified_time_version_strategy'
+
     cache:
         # Put the unique name of your app here: the prefix seed
         # is used to compute stable namespaces for cache keys.

config/services.yaml

@@ -38,6 +38,10 @@ services:
     # add more service definitions when explicit configuration is needed
     # please note that last definitions always *replace* previous ones
 
+    #assets
+    assets.modified_time_version_strategy:
+        class: App\Asset\ModifiedTimeVersionStrategy
+
     #proxy configuration
     proxy.locator:
         class: 'ProxyManager\FileLocator\FileLocator'

package.json

@@ -35,6 +35,8 @@
   },
   "dependencies": {
     "babel-minify-webpack-plugin": "^0.3.1",
+    "copy-webpack-plugin": "^4.5.2",
+    "imagemin-webpack-plugin": "^2.3.0",
     "mini-css-extract-plugin": "^0.4.2",
     "vue2-leaflet": "^1.0.2"
   }

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "name": "Czy Dojadę?",
+  "short_name": "Czy Dojadę",
+  "orientation": "portrait",
+  "lang": "pl_PL",
+  "start_url": ".",
+  "display": "fullscreen",
+  "background_color": "#fff",
+  "theme_color": "white",
+  "description": "Odpowiedź na odwieczne pytanie ludzkości - czy tramwaje jeżdżą?",
+  "icons": [{
+    "src": "images/icon.svg",
+    "sizes": "256x256"
+  }]
+}

resources/images/icon.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>unknown</title><path d="M488,128h-8V80c0-44.8-99.2-80-224-80S32,35.2,32,80v48H24A24,24,0,0,0,0,152v80a24,24,0,0,0,24,24h8V416a32,32,0,0,0,32,32v32a32,32,0,0,0,32,32h48a32,32,0,0,0,32-32V448H336v32a32,32,0,0,0,32,32h48a32,32,0,0,0,32-32V448a32,32,0,0,0,32-32V256h8a24,24,0,0,0,24-24V152A24,24,0,0,0,488,128ZM144,480H96V448h48Zm272,0H368V448h48ZM448,96h0v32h0l0,128h0v32h0V416H64V288h0V256h0V128h0V96h0V80.31C67.31,67,131.41,32,256,32S444.69,67,448,80.31ZM254.48,308a28,28,0,1,0,28,28A28,28,0,0,0,254.48,308Zm-.33-224c-44.82,0-70,17.51-91.23,44.74a12,12,0,0,0,2.64,17.18l13.14,9.15a12,12,0,0,0,16.24-2.38C209.89,133.65,225,124,254.15,124c39.68,0,57.44,20.2,57.44,40.21,0,43.79-77.44,37.07-77.44,107.41V272a12,12,0,0,0,12,12h16a12,12,0,0,0,12-12v-.38c0-43.56,77.44-40,77.44-107.41C351.59,113.75,306.47,84,254.15,84Z"/></svg>

resources/styles/_common.scss

@@ -71,12 +71,6 @@
   }
 }
 
-#app {
-  margin-top: $grid-gutter-width / 2;
+svg.svg-inline--fa {
+  transform: rotate(360deg)
 }
-
-@include media-breakpoint-up('md') {
-  #app {
-    margin-top: 4rem;
-  }
-}

resources/styles/main.scss

@@ -31,4 +31,41 @@ $container-max-widths: map-merge($container-max-widths, ( xl: 1320px ));
 @import "controls";
 @import "popper";
 
-svg.svg-inline--fa { transform: rotate(360deg) }
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  main {
+    flex: 1 1 auto;
+  }
+
+  footer {
+    @extend .flex;
+    border-top: 2px solid black;
+    padding: $alert-padding-y $alert-padding-y;
+    transition: all .5s ease;
+    opacity: .06;
+    filter: grayscale(100%);
+
+    &:hover {
+      opacity: 1;
+      filter: grayscale(0%);
+    }
+
+    img {
+      height: 1.5rem;
+    }
+  }
+}
+
+#app {
+  margin-top: $grid-gutter-width / 2;
+}
+
+@include media-breakpoint-up('md') {
+  #app {
+    margin-top: 4rem;
+  }
+}
+

src/Asset/ModifiedTimeVersionStrategy.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Asset;
+
+use Symfony\Component\Asset\VersionStrategy\VersionStrategyInterface;
+
+class ModifiedTimeVersionStrategy implements VersionStrategyInterface
+{
+    /**
+     * Returns the asset version for an asset.
+     *
+     * @param string $path A path
+     *
+     * @return string The version string
+     */
+    public function getVersion($path)
+    {
+        return filemtime($path);
+    }
+
+    /**
+     * Applies version to the supplied path.
+     *
+     * @param string $path A path
+     *
+     * @return string The versionized path
+     */
+    public function applyVersion($path)
+    {
+        return sprintf('%s?v=%s', $path, $this->getVersion($path));
+    }
+}

symfony.lock

@@ -113,6 +113,9 @@
             "ref": "fb7e19da7f013d0d422fa9bce16f5c510e27609b"
         }
     },
+    "symfony/asset": {
+        "version": "v4.1.4"
+    },
     "symfony/cache": {
         "version": "v4.1.3"
     },

templates/base.html.twig

@@ -3,7 +3,8 @@
     <head>
         <meta charset="UTF-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link rel="stylesheet" href="main.css" />
+        <link rel="stylesheet" href="{{ asset('main.css') }}" />
+        <link rel="manifest" href="manifest.json" />
 
         <title>{% block title %}Czy dojadę?{% endblock %}</title>
     </head>
@@ -11,8 +12,17 @@
         <main role="main" class="container" id="app">
             {% block body %}{% endblock %}
         </main>
+        <footer class="container">
+            {% block footer %}
+                <span class="copyright flex flex-space-left">
+                    brought to you by
+                    <a href="https://kadet.net"><img src="{{ asset('images/kadet-net-logo.png') }}" alt="kadet.net logo" class="mx-1"/></a>
+                    &copy; {{ 'now'|date('Y') }}
+                </span>
+            {% endblock %}
+        </footer>
 
         {% block javascripts %}{% endblock %}
-        <script src="bundle.js"></script>
+        <script src="{{ asset('bundle.js') }}"></script>
     </body>
 </html>

webpack.config.js

@@ -1,6 +1,8 @@
 const path = require('path');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const BabelMinifyPlugin = require('babel-minify-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ImageminPlugin = require('imagemin-webpack-plugin').default;
 
 const config = {
     entry: {
@@ -13,7 +15,7 @@ const config = {
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],
         alias: {
-          'vue$': 'vue/dist/vue.esm.js'
+            'vue$': 'vue/dist/vue.esm.js'
         }
     },
     module: {
@@ -25,7 +27,7 @@ const config = {
             use: ['raw-loader', {
                 loader: path.resolve('./resources/svg-icon-loader.js')
             }]
-        },{
+        }, {
             test: /\.s[ac]ss$/,
             use: [{
                 loader: MiniCssExtractPlugin.loader,
@@ -52,11 +54,13 @@ const config = {
         }]
     },
     plugins: [
-        new MiniCssExtractPlugin({ filename: '[name].css' })
+        new MiniCssExtractPlugin({ filename: '[name].css' }),
+        new CopyWebpackPlugin([{ from: './resources/images/', to: 'images/' }]),
+        new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
     ],
     optimization: {
         minimizer: [
-          new BabelMinifyPlugin()
+            new BabelMinifyPlugin()
         ]
     }
 };