कोई इंटरनेट कनेक्शन उपलब्ध न होने पर केवल कोणीय पृष्ठ में एक कस्टम ऑफ़लाइन पृष्ठ दिखाना

Aug 18 2020

में कोणीय 9+ मैं एक कस्टम ऑफ़लाइन पेज (.html और .scss फ़ाइल) जोड़ना चाहूंगा। मैंने एक कोणीय pwa के लिए आवश्यक सभी बुनियादी चरणों का पालन करके अपने कोणीय ऐप को एक pwa में बदल दिया है। लेकिन हालाँकि मुझे पाव से परेशानी हो रही है। मैंने पहले ही app.component.ts में नेटवर्क कनेक्टिविटी की निगरानी के लिए एक कनेक्शन सेवा इंटरफ़ेस लागू किया। जब कोई नेटवर्क नहीं होता है तो ऑफ़लाइन पृष्ठ निष्पादित होता है लेकिन जिस क्षण मैं कोई भी ऑफ़लाइन दिखाए बिना ब्राउज़र को रीफ्रेश बटन दबाता है। मैं ऑफ़लाइन को इस तरह लागू करना चाहता हूं कि यदि उपयोगकर्ता ब्राउज़र ताज़ा करने के लिए ताज़ा लिंक दबाए, लेकिन नेटवर्क न होने पर भी वही ऑफ़लाइन पृष्ठ दिखाए। कस्टम ऑफ़लाइन पेज के साथ कोणीय PWA (मैंने एक कस्टम sw.js बनाने की कोशिश की लेकिन यह हमेशा मुझे पंजीकरण त्रुटि देता है)।

app.component.ts

constructor( connectionService:ConnectionService) {
            this.conCheck()
           }
conCheck(){
this.connectionService.monitor().subscribe( conn => {
  this.isConnection = conn;
  if(this.isConnection){
    this.util.showSuccess("You are Connected.")
  }else{
    this.util.showError("Please check your internet connection.")
  }
})

app.component.html

<div *ngIf="isConnection ; else offline">
<router-outlet></router-outlet></div>
<ng-template #offline>
<app-network-checker></app-network-checker></ng-template>

ngsw-config.json

"files": [
      "/favicon.ico",
      "/*.css",
      "/*.js",
      "/assets/offline.html"
    ]

app.module.ts

imports: [
  ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production , registrationStrategy:"registerImmediately" })

network-checker.component.html (ऑफ़लाइन पृष्ठ)

<main>
<a href="#">refresh</a>
</maine>

जवाब

TheJames Aug 18 2020 at 17:40

आप रूट के प्रत्येक प्रयास पर स्थिति की जांच करने के लिए ConnectionService का उपयोग करने वाला मार्ग गार्ड बना सकते हैं। शायद यही आसान उपाय है और सभी मार्गों के लिए मार्ग रक्षक पुन: प्रयोज्य होंगे।