Skip to content
This repository was archived by the owner on May 3, 2019. It is now read-only.

add PWA support with caching #23

Open
sgametrio wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add PWA support with caching #23

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
02bccb7
add PWA support with little caching
sgametrio May 18, 2017
f9dc693
Add static files caching, change runtime caching method
sgametrio May 31, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions template/build/webpack.prod.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ var
ExtractTextPlugin = require('extract-text-webpack-plugin'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
SWPrecachePlugin = require('sw-precache-webpack-plugin')

module.exports = merge(baseWebpackConfig, {
module: {
Expand Down Expand Up @@ -70,6 +71,26 @@ module.exports = merge(baseWebpackConfig, {
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
// auto generate service-worker for caching static files
new SWPrecachePlugin({
cacheId: 'quasar-app',
filename: 'service-worker-cache.js',
minify: true,

staticFileGlobs: [
'js/**.js',
'/**.css'
],

runtimeCaching: [{
urlPattern: /\/.*/,
handler: 'networkFirst'
Copy link

@devzsolt devzsolt May 31, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you choose networkFirst? I would prefer using the cached copies first, then refetching the changed files and using them on the next reload. If I understand correctly networkFirst would refetch the unchanged files on all refresh which would be suboptimal on mobile internet, right?

Copy link
Author

@sgametrio sgametrio May 31, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you're right, cache-first approach seems to be very nice on mobile. The problem is that this configuration has to be changed based on projects. There is no configuration that fits well on every project, some needs network-first, some need fastest, depending always on what resources are we caching. Thanks though for the tip. Let's talk again after v0.14

}],

dontCacheBustUrlsMatching: /./,
navigateFallback: '/'

})
]
})
1 change: 1 addition & 0 deletions template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"moment": "^2.15.0",
"quasar-framework": "^0.13.4",
"roboto-fontface": "^0.7.0",
"sw-precache-webpack-plugin": "^0.11.0",
"vue": "^2.3.0",
"vue-router": "^2.0.0"
},
Expand Down
8 changes: 7 additions & 1 deletion template/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,15 @@
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

<link rel="manifest" href="statics/manifest.json">
<title>Quasar App</title>
<link rel="shortcut icon" type="image/x-icon" href="statics/favicon.ico">
<script>
// activate service worker
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker-cache.js');
}
</script>
</head>
<body>
<div id="q-app"></div>
Expand Down
Binary file added template/src/statics/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions template/src/statics/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"lang": "en",
"background_color": "#0273D4",
"theme_color": "#0273D4",
"name": "Your app name",
"short_name": "myApp",
"display": "standalone",
"start_url": "index.html",
"icons": [
{
"src": "statics/logo.png",
"sizes": "144x144",
"type": "image/png"
}
],
"orientation": "portrait"
}