Download as PDF, PPTX
![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)
![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/75/Pwa-with-vue-js-27-2048.jpg)
Uploaded byMd. Ziaul Haq
Pwa with vue js
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.
More Related Content
Pwa with vue js
- 1. PWA with VueJS Vuemeet-up Dhaka, 2018
- 2. Md. Ziaul Haq JavaScriptDeveloper Author @jquerygeek
- 3. What we willcover • 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
- 4.
- 5.
- 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.
- 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.
- 11. Tools and technique •Meta data • Server Side Rendering • Service worker • Cache API • IndexDB and WebSQL • Notification in Browser • Background Sync
- 12. Meta Data inApp • Viewport • Home Icon • Manifest file • Display
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. Service Worker • JavaScriptWorker • Works in Secure Network • Most things in PWA need Service worker • Service Worker run on it’s own thread
- 20. Service worker inaction • User send request to the service worker • If cache, serve from cache • no cache, serve from web and save to cache
- 21.
- 22.
- 23.
- 24. Check SW inBrowser
- 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
- 27.
- 28.