Aurelijus Banelis

PWA withSymfony 4

VilniusPHP 0x432018-06-07

Aurelijus Banelis

PGP 0x320205E7539B6203130D C446 1F1A 2E50 D6E33DA8 3202 05E7 539B 6203

Software developer

aurelijus.banelis.ltaurelijus@banelis.lt

Progressive Web Apps from

Symfony 4developer perspective

Intro into PWA

Development environment

Final thoughts

Intro into PWA

Development environment

Final thoughts

https://developers.google.com/web/progressive-web-apps/

https://codelabs.developers.google.com/codelabs/your-first-pwapp/#5

Intro into PWA

Development environment

Final thoughts

Intro into PWA

Development environment

Final thoughts

Intro into PWA

Development environment

Final thoughts

What we want?

Validate cache

Backend

Frontend

Clear cache

Intro into PWA

Development environment

Final thoughts

What we want?

Validate cache

Backend

Frontend

Clear cache

https://symfony.com/download

What we want?

Validate cache

Backend

Frontend

Clear cache

Intro into PWA

Development environment

Final thoughts

What we want?

Validate cache

Backend

Frontend

Clear cache

https://www.npmjs.com/package/gulp-replace

https://www.toptal.com/front-end/webpack-browserify-gulp-which-is-better

https://symfony.com/doc/current/frontend/encore/custom-loaders-plugins.html#adding-custom-plugins

.addPlugin(new ServiceWorkerPlugin({ staticFiles: { './assets/workers/manifest.json': '../manifest.json', './assets/workers/service-worker.js': '../service-worker.js', './assets/workers/version.json': 'version.json', './assets/js/main.js': 'js/main.js' }, dynamicFiles: [ 'js/app.js' ], replace: { "@NOTICE@": () => "This file is AUTO GENERATED!", "@VERSION@": () => "v0.0.5-" + (new Date()).toISOString(), }}))

https://symfony.com/doc/current/frontend/encore/installation.html

https://gist.github.com/aurelijusb/2d7ce6e7ed8634c49a2d0645943c9744

What we want?

Validate cache

Backend

Frontend

Clear cache

Intro into PWA

Development environment

Final thoughts

What we want?

Validate cache

Backend

Frontend

Clear cache

https://letsencrypt.org/getting-started/

https://symfony.com/doc/current/routing/redirect_in_config.html#redirecting-using-a-path

What we want?

Validate cache

Backend

Frontend

Clear cache

Intro into PWA

Development environment

Final thoughts

What we want?

Validate cache

Backend

Frontend

Clear cache

{% if disablePwa == 'true' and app.environment == 'dev' %} <script type="text/javascript"> var disablePwa = true; </script>{% endif %}if ( ('serviceWorker' in navigator) && (typeof disablePwa === "undefined")) {

parameters: env(DISABLE_PWA): falsetwig: globals: disablePwa: '%env(DISABLE_PWA)%'

DISABLE_PWA=true

What we want?

Validate cache

Backend

Frontend

Clear cache

Intro into PWA

Development environment

Final thoughts

What we want?

Validate cache

Backend

Frontend

Clear cache

update() { if ('serviceWorker' in navigator && navigator.serviceWorker.controller && serviceWorker) { serviceWorker.unregister() .then(clearCache) .then(() => { console.log('[ServiceWorker] Unregistered'); location.reload(); }).catch((e) => { console.error( '[ServiceWorker] Failed to unregister', e ); }); }}

https://gist.github.com/aurelijusb/2d7ce6e7ed8634c49a2d0645943c9744

const clearCache = () => { return caches.keys().then((keyList) => { return Promise.all(keyList.map((key) => { console.log( '[ServiceWorker] Removing old cache', key ); return caches.delete(key); })); })};

https://gist.github.com/aurelijusb/2d7ce6e7ed8634c49a2d0645943c9744

What we want?

Validate cache

Backend

Frontend

Clear cache

Intro into PWA

Development environment

Final thoughts

What we want?

Validate cache

Backend

Frontend

Clear cache

Intro into PWA

Development environment

Final thoughts

Intro into PWA

Development environment

Final thoughts

https://www.npmjs.com/package/sw-precache-webpack-plugin

Web App Manifest

Push notifications

Browser storage

Seamless A/B testing GDPR: delayed

personal data on device

Mobile-like, butno wait for update

Intro into PWA

Development environment

Final thoughts

PWA withSymfony 4

PWA withSymfony 4

Aurelijus BanelisVilniusPHP 0x43

2018-06-07

Questions?