Search
 
SCRIPT & CODE EXAMPLE
 

HTML

convert web to application

<link rel="manifest" href="./app.webmanifest" crossorigin="use-credentials">
Comment

convert web to application

<script>
  window.addEventListener("beforeinstallprompt", function(event) { 
  let a = event.prompt()
  a.userChoice.then(aa=>{
  if(aa.outcome == "accepted") {
  alert("")
  }  
  })
  })
  </script>
Comment

convert web to application

navigator.serviceWorker.register("dummy-sw.js")
Comment

convert web to application

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="./images/lot_history_paper_5up_icon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lot History System</title>
<link rel="stylesheet" href="./plugin/vue/css/vuetify.css">
<link rel="stylesheet" href="./plugin/vue/css/mdiicon.css">
<!-- <link rel="manifest" href="./app.webmanifest" crossorigin="use-credentials">  -->
<style>
.v-btn__content {
  white-space: normal;
  flex: auto;
}
.v-btn {
  min-height: 120px;
  height: 100% !important;
}
</style>

</head>
<body>
<div id="app">
<v-app id="inspire">
<div>
<v-toolbar
dark
prominent
src=""
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>

<v-toolbar-title>Lot History System</v-toolbar-title>

<v-spacer></v-spacer>

<v-btn icon>
<v-icon>mdi-export</v-icon>
</v-btn>
</v-toolbar> 
</div>


<v-container grid-list-md style="padding:100px">
<v-row v-for="item in items" style="padding-bottom: 10px;">
<v-btn
color="primary"
dark  
large
block
@click="editedItem(item)"
>
{{item}}
</v-btn>
<v-spacer></v-spacer>
</v-row>
</v-container>

<v-dialog
v-model="dialog"
max-width="700"
>
<v-card>
<v-card-title class="text-h5">
Select Relay Information 
</v-card-title>

<v-card-title>
{{title}} Relay
</v-card-title>

<v-card-text>
<v-combobox
v-model="selectline"
:items="lineitems"
label="Select Line"
outlined
dense
></v-combobox>
</v-card-text>

<v-card-text>
<v-combobox
v-model="selectprocess"
:items="processitems"
label="Select Process"
outlined
dense
></v-combobox>
</v-card-text>

<v-card-text>
<v-combobox
v-model="selectmachine"
:items="machineitems"
label="Select Machine"
outlined
dense
></v-combobox>
</v-card-text>

<v-card-actions>
<v-spacer></v-spacer>

<v-btn
color="green darken-1"
text
@click="dialog = false"
>
Close
</v-btn>

<v-btn
color="green darken-1"
text
@click="sbselection"
>
Submit
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>


<v-banner v-show="install_prompt" style="background-color:aliceblue;position:fixed;top:0;z-index:99999;width:100%">
Are you sure you want to install the shitt!!
  <template v-slot:actions>
    <v-btn
      text
      color="primary"
    >
      No
    </v-btn>
    <v-btn
      text
      color="primary"
      @click="install_event('yes')"
    >
      Yes
    </v-btn>
  </template>
</v-banner>

</v-app>
</div>
</body>

<script type = 'text/javascript' src = './plugin/vue/js/axios.js'></script>
<script type = 'text/javascript' src = './plugin/vue/js/vue.js'></script>
<script type = 'text/javascript' src = './plugin/vue/js/Vuetify.js'></script>
<script type = 'text/javascript' src = './plugin/vue/js/polyfill.js'></script>
<!-- <script type = 'text/javascript' src = './app.js'></script> -->
<script>
// window.addEventListener("beforeinstallprompt", function(event) { 
// let a = event.prompt()
// this.show == 1 
// a.userChoice.then(aa=>{
// if(aa.outcome === "accepted") {
// this.show == 0
// }
// else{

// }  
// })
// }) 
let deferredPrompt;

let app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: ()=>({
items:["EX","EM","EL","EP","ET"],
relayitems:["EX","EM"],
lineitems:["Line 1","Line 2"],
processitems:["Armature"],
machineitems:["Armature 1","Armature 2"],
selectline:"",
install_prompt:false,
selectmachine:"",
selectprocess:"",
title:"",
select:"",
dialog:false,
install:false,
}),
mounted(){
  this.install_prompt = true
},
watch:{
  install(test){
      if (test) {
      deferredPrompt.prompt();
      deferredPrompt.userChoice
      .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null
      });
      }
  }
},
methods:{
install_event(ev){
  if (ev == 'yes') {
  var link = document.createElement('link');
  link.rel = 'manifest';
  //link.href = 'http://fonts.googleapis.com/css?family=Oswald&effect=neon';
  document.head.appendChild(link);
  link.href = './app.webmanifest';
  window.addEventListener('beforeinstallprompt', (e) => {
  deferredPrompt = e
   this.install = true
  });
  }
  this.install_prompt = false
},
editedItem(item){
this.title = item
this.dialog = true
},
sbselection(){
this.dialog = false;
let link = `${this.selectline}#${this.selectprocess}#${this.selectmachine}`
window.location.href = `main.html#${link}`
}
},
})

</script>
</html>
Comment

PREVIOUS NEXT
Code Example
Html :: how to check *ngIf with ENUMs in componenet.html 
Html :: ex: html 
Html :: 1 aed in rupees 
Html :: netlify cms hidden field 
Html :: show html string in p tag 
Html :: nepal location 
Html :: Make Input Group Responsive Input Append (Search And Dropdown With Buttons) 
Html :: dashboard html arduino 
Html :: %2f in query 
Html :: text html 
Html :: Html Count div tags any website 
Html :: how to add multiple rows inside a row in html 
Html :: meta initial scale resize to fit screen 
Html :: how to select text by a button in html 
Html :: add link to text using span html 
Html :: attach a script to a button html 
Html :: codigo responsive css 
Html :: Using HTML, write a code snippet that will result to this HTML table output. * 
Html :: can we manipulate the html elements 
Html :: how to display gif when button clicked html css 
Html :: how to add a paragraph in html 
Html :: html code for list box with checkbox 
Html :: ahref html 
Html :: <link rel = "icon" href = "logo.jpg" type = "logo" issue 
Css :: css way media query 
Css :: how to center placeholdr text 
Css :: show max word with css 
Css :: background image css 
Css :: css brightness 
Css :: position absolute center with transform 
ADD CONTENT
Topic
Content
Source link
Name
6+4 =