Pwa with vue js
3 likes•730 views
The document discusses a presentation by Md. Ziaul Haq on Progressive Web Apps (PWAs) with Vue.js, highlighting what PWAs are, their features, and the tools and techniques needed to build them. It covers the importance of service workers, server-side rendering, and various metadata required for PWAs. Additionally, it provides resources and practical examples including the Vue HackerNews clone.
![SW in Vue
var webpackConfig = merge(baseWebpackConfig, {
...
plugins: [
...
new SWPrecacheWebpackPlugin({
cacheId: 'my-vue-app',
filename: 'service-worker.js',
staticFileGlobs: ['dist/**/*.{js,html,css}'],
minify: true,
stripPrefix: 'dist/'
})
]
})](https://image.slidesharecdn.com/pwawithvuejs-180317195338/85/Pwa-with-vue-js-27-320.jpg)
Pwa with vue js
- 1. PWA with VueJS Vue meet-up Dhaka, 2018
- 2. Md. Ziaul Haq JavaScript Developer Author @jquerygeek
- 3. What we will cover • What is PWA • Why we should care about PWA • What tools and techniques we should know to build PWA • How VueJS can help us to build a PWA
- 6. What is PWA? • It is more a marketing term than technical :) • Introduced by google / chrome team members • Use the latest advantage of web technologies • Don’t need to wait for every browser
- 7. Why PWA?
- 8. Features of PWA • Progressive • Responsive / Mobile First • Works Offline • App-like • Fresh Content
- 9. Features of PWA • Safe • Discoverable • Re-engageable • Durable • Linkable
- 10. We need PWA :)
- 11. Tools and technique • Meta data • Server Side Rendering • Service worker • Cache API • IndexDB and WebSQL • Notification in Browser • Background Sync
- 12. Meta Data in App • Viewport • Home Icon • Manifest file • Display
- 17. “Programmable network proxy.” Service Worker
- 18. Service Worker
- 19. Service Worker • JavaScript Worker • Works in Secure Network • Most things in PWA need Service worker • Service Worker run on it’s own thread
- 20. Service worker in action • User send request to the service worker • If cache, serve from cache • no cache, serve from web and save to cache
- 21. SW Register
- 22. SW Life Cycle
- 23. SW Life Cycle
- 24. Check SW in Browser
- 25. Learn more on • Service Worker • Server Side Rendering • Cache API • IndexDB and WebSQL • Promise • Notification API • Background Sync
- 26. PWA with Vue • PWA vue-template • Nuxt.js paw module • PWA Hackernews clone • https://github.com/vuejs/vue-hackernews-2.0 • sw-precache-webpack-plugin