diff --git a/public/index.html b/public/index.html
index 3e5a139..47422a4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,8 +3,9 @@
   <head>
     <meta charset="utf-8">
     <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">
+    <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>
   </head>
   <body>
diff --git a/src/App.vue b/src/App.vue
index 889e4c5..239afcc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,8 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <img alt="Vue logo" src="./assets/logo.png" @click="setSat" />
+    <h1>{{ sat }}</h1>
+    <HelloWorld msg="Click the logo to update the inset value" />
   </div>
 </template>
 
@@ -13,16 +14,54 @@ export default {
   components: {
     HelloWorld,
   },
+  data() {
+    return {
+      sat: undefined,
+    };
+  },
+  methods: {
+    setSat() {
+      this.sat = getComputedStyle(document.body).getPropertyValue('--sat');
+    },
+  },
+  mounted() {
+    window.onload = this.setSat;
+  },
 };
 </script>
 
 <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 {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  color: white;
+  background-color: #2c3e50;
+  position: relative;
+  top: calc(env(safe-area-inset-top) * -1);
+  padding-top: 100px;
 }
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 66b641b..697bf21 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -42,6 +42,10 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+.hello {
+
+}
+
 h3 {
   margin: 40px 0 0;
 }
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..e7af2ea
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  pwa: {
+    name: 'pwa',
+    themeColor: '#35A9C2',
+    msTileColor: '#35A9C2',
+    appleMobileWebAppCapable: 'yes',
+    appleMobileWebAppStatusBarStyle: 'black-translucent',
+    workboxPluginMode: 'InjectManifest',
+  },
+};
