แสดงเพจออฟไลน์ที่กำหนดเองเฉพาะใน pwa เชิงมุมเมื่อไม่มีการเชื่อมต่ออินเทอร์เน็ต
ใน Angular 9+ ฉันต้องการเพิ่มเพจออฟไลน์ที่กำหนดเอง (ไฟล์. html และ. scss) ฉันได้แปลงแอพเชิงมุมของฉันเป็น pwa โดยทำตามขั้นตอนพื้นฐานทั้งหมดที่จำเป็นสำหรับ pwa เชิงมุม แต่อย่างไรก็ตามฉันมีปัญหากับ pwa ฉันใช้อินเทอร์เฟซบริการการเชื่อมต่อเพื่อตรวจสอบการเชื่อมต่อเครือข่ายใน app.component.ts แล้ว หน้าออฟไลน์ทำงานเมื่อไม่มีเครือข่าย แต่ในขณะที่ฉันกดปุ่มรีเฟรชเบราว์เซอร์จะรีเฟรชโดยไม่แสดงสถานะออฟไลน์ ฉันต้องการใช้งานออฟไลน์ในลักษณะที่หากผู้ใช้กดลิงก์รีเฟรชการรีเฟรชเบราว์เซอร์ แต่ยังแสดงหน้าออฟไลน์เดียวกันหากไม่มีเครือข่าย Angular 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>
คำตอบ
คุณสามารถสร้างตัวป้องกันเส้นทางที่ใช้ ConnectionService เพื่อตรวจสอบสถานะของความพยายามในการกำหนดเส้นทางแต่ละครั้ง นั่นอาจเป็นวิธีแก้ปัญหาที่ง่ายกว่าและตัวป้องกันเส้นทางจะสามารถใช้ซ้ำได้สำหรับทุกเส้นทาง