anatolykopyl/pwa-question
1
0
Fork 0
mirror of https://github.com/anatolykopyl/pwa-question.git synced 2026-03-26 12:55:00 +00:00
Code Issues Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Anatoly Kopyl
2021-08-09 21:02:58 +03:00
parent c812ec6461
commit 2757345c64
4 changed files with 59 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@@ -3,8 +3,9 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>

47
src/App.vue
View File

@@ -1,7 +1,8 @@
<template> <template>
<div id="app"> <div id="app">
<img alt="Vue logo" src="./assets/logo.png"> <img alt="Vue logo" src="./assets/logo.png" @click="setSat" />
<HelloWorld msg="Welcome to Your Vue.js App"/> <h1>{{ sat }}</h1>
<HelloWorld msg="Click the logo to update the inset value" />
</div> </div>
</template> </template>
@@ -13,16 +14,54 @@ export default {
components: { components: {
HelloWorld, HelloWorld,
}, },
data() {
return {
sat: undefined,
};
},
methods: {
setSat() {
this.sat = getComputedStyle(document.body).getPropertyValue('--sat');
},
},
mounted() {
window.onload = this.setSat;
},
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
:root {
--sat: env(safe-area-inset-top);
--sar: env(safe-area-inset-right);
--sab: env(safe-area-inset-bottom);
--sal: env(safe-area-inset-left);
}
@supports (padding: max(0px)) {
html,
body,
header,
footer,
#app {
min-height: calc(100% + env(safe-area-inset-top));
padding-top: min(0vmin, env(safe-area-inset-top));
}
}
body {
margin: 0;
}
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: white;
margin-top: 60px; background-color: #2c3e50;
position: relative;
top: calc(env(safe-area-inset-top) * -1);
padding-top: 100px;
} }
</style> </style>

4
src/components/HelloWorld.vue
View File

@@ -42,6 +42,10 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
.hello {
}
h3 { h3 {
margin: 40px 0 0; margin: 40px 0 0;
} }

10
vue.config.js Normal file
View File

@@ -0,0 +1,10 @@
module.exports = {
pwa: {
name: 'pwa',
themeColor: '#35A9C2',
msTileColor: '#35A9C2',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black-translucent',
workboxPluginMode: 'InjectManifest',
},
};