Cách xây dựng một ứng dụng web tiến bộ

 & lt;! - index.html - & gt;
& lt; body & gt;
& lt; div id = "root" & gt;
  & lt; div id = "container" & gt;
  & lt; div class = "bên trong-container" & gt;
  & lt; div id = "tiêu đề" & gt;
  & lt; img src = "/ tài sản / icon.png" alt = "logo" / & gt;
  & lt; h1 & gt; chat & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "tải-container" & gt;
  & lt; img src = "/ tài sản / icon.png" alt = "logo" id = "loader" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / body & gt;
// index.js.
Reactdom.render (
& lt; ứng dụng / & gt ;,
tài liệu.getelementbyId ('root')
);

& lt; script & gt;
  if ('ServiceWorker' trong Navigator) {
  window.addeventlistener ('tải', hàm () {
  Navigator.ServiceWorker.Register ('DỊCH VỤ-WORDER.JS'). Sau đó (chức năng (đăng ký) {
  // Đăng ký đã thành công
  Console.log ('đã đăng ký!');
  }, chức năng (err) {
  // Đăng ký thất bại :(
  Console.log ('Đăng ký dịch vụ thất bại:', err);
  }). Bắt (hàm (err) {
  Console.log (err);
  });
  });
  } other {
  Console.log ('Nhân viên phục vụ không được hỗ trợ');
  Không thể
  & lt; / script & gt;
// lao động dịch vụ.js
tự.addeventlistener ('cài đặt', hàm () {
  Console.log ('Cài đặt!');
});
self.addeventlistener ("Kích hoạt", sự kiện = & gt; {
  Console.log ('Kích hoạt!');
});
self.addeventlistener ('Fetch', chức năng (sự kiện) {
  Console.log ('Fetch!', Event.Request);
}); 

 Navigator.ServiceWorker.Real.Shen (chức năng (đăng ký) {
  Nếu (! Đăng ký.PushManager) {
    cảnh báo ('không hỗ trợ thông báo đẩy.');
    trả lại sai;
  Không thể
  // Để đăng ký `thông báo đẩy` từ Trình quản lý đẩy
  Đăng ký.pushManager.Subscribe ({
  uservisibleonly: True // Luôn hiển thị thông báo khi nhận được
  })
  .Thững (chức năng (đăng ký) {
  Console.log ('đăng ký.');
  })
  .catch (chức năng (lỗi) {
  Console.log ('Lỗi đăng ký:', lỗi);
  });
}) 

 {
  "Short_name": "Trò chuyện",
  "Tên": "Trò chuyện",
  "Biểu tượng": [
  Đồn là
  "SRC": "/ Tài sản / icon.png",
  "Kích cỡ": "192x192",
  "Loại": "Hình ảnh / PNG"
  Không thể
  ],
  "start_url": "/? utm_source = homencreen",
  "Background_color": "# E05A47",
  "Theme_color": "# E05A47",
  "Hiển thị": "độc lập"
} 

 window.addeventlistener ('beforeinstallprompt', e = & gt; {
  Console.log ('BeforeInstallPrompt Fired');
  e.preventdefault ();
  // stash sự kiện để nó có thể được kích hoạt sau.
  this.deferredprompt = e;
  trả lại sai;
  });
// Khi bạn muốn kích hoạt dấu nhắc:
this.deferredprompt.prompt ();
  this.deferredprompt.userchoice.Shen (Lựa chọn = & GT; {
  Console.log (lựa chọn);
  });
this.deferredprompt = null; 

Cách - Các bài báo phổ biến nhất

Cách sử dụng lò phản ứng lò xo vào các thành phần động

Cách Sep 12, 2025

[số 8] (Tín dụng hình ảnh: Matt Crouch) React Spring có thể giúp bạn với các hình ảnh động, nơ..

---

Xây dựng địa hình ở Houdini 17

Cách Sep 12, 2025

[số 8] Ở Houdini 17, SideFX đã giới thiệu một số công cụ mới và nâng cao những người khác để mở r�..

---

Cách vẽ một con mèo lớn với phấn màu

Cách Sep 12, 2025

[số 8] Sự mềm mại và độ sáng của gậy pastel làm cho chúng trở thành lựa chọn lý tưởng cho nền tron..

---

Cách tạo ứng dụng bảng điều khiển với React

Cách Sep 12, 2025

[số 8] Trang 1/2: Tạo một ứng dụng bảng điều khiển trong React - các bước 1-10 ..

---

8 bí mật bảo mật WordPress thiết yếu

Cách Sep 12, 2025

Trong 15 năm qua, WordPress đã trở thành hệ thống quản lý nội dung phổ biến nhất thế giới. Dễ dàng bắt đầu với và cực kỳ linh hoạt, đó là một tr..

---

Cách vẽ Quái thú Fantasy

Cách Sep 12, 2025

[số 8] Khi bạn đã nghĩ ra một ý tưởng cho một sinh vật giả tưởng, bước tiếp theo là mang nó đến cu..

---

Học cách chạy thiết kế và chạy nước rút nội dung

Cách Sep 12, 2025

[số 8] Thiết kế và tiếp cận Sprint là chìa khóa để kết hợp các chủ sở hữu sản phẩm, nhà thiết k..

---

Hướng dẫn Pro để tạo kết cấu 3D

Cách Sep 12, 2025

[số 8] Năm nghệ sĩ nổi bật thể hiện các thủ thuật thương mại của họ, giải thích cách tạo ra họa..

---

Thể loại

• AI & Machine Learning
• Airpods
• Amazon
• Amazon Alexa & Amazon Echo
• Amazon Alexa & Amazon Echo
• Amazon Fire TV
• Video Prime Của Amazon
• Android
• Điện Thoại & Máy Tính Bảng Android
• Điện Thoại & Máy Tính Bảng Android
• TV Android
• Apple
• Apple App Store
• Homekit & Homepod Apple
• Táo Nhạc
• Apple TV
• Apple Watch
• Ứng Dụng & Ứng Dụng Web
• Ứng Dụng & Ứng Dụng Web
• Âm Thanh
• Chromebook & Chrome OS
• Chromebook & Chrome OS
• Chromecast
• Cloud & Internet
• Đám Mây & Internet
• Đám Mây Và Internet
• Phần Cứng Máy Tính
• Lịch Sử Máy Tính
• Cắt Dây & Truyền Phát
• Cắt Dây Và Phát Trực Tuyến
• Discord
• Disney +
• DIY
• Xe điện
• EREADERS
• Những điều Cần Thiết
• Người Giải Thích
• Facebook
• Chơi Game
• Chung
• Gmail
• Google
• Google Assistant & Google Nest
• Google Assistant & Google Nest
• Google Chrome
• Google Docs
• Google Drive
• Google Maps
• Google Play Store
• Google Tấm
• Google Slide
• Google TV
• Phần Cứng
• HBO Max
• Cách
• Hulu
• Instagram
• Tiếng Lóng Internet & Viết Tắt
• IPhone Và IPad
• Kindle
• Linux
• Mac
• Bảo Trì Và Tối ưu Hóa
• Microsoft Edge
• Microsoft Excel
• Microsoft Office
• Microsoft Outlook
• Microsoft PowerPoint
• ​​Các đội Microsoft
• Microsoft Word
• Mozilla Firefox
• Netflix
• Nintendo Switch
• Paramount +
• Chơi Game PC
• Peacock
• Nhiếp ảnh
• Photoshop
• Playstation
• Quyền Riêng Tư & Bảo Mật
• Quyền Riêng Tư & Bảo Mật
• Quyền Riêng Tư Và Bảo Mật
• Roundup Sản Phẩm
• Lập Trình
• Raspberry Pi
• Reddit
• Roku
• Safari
• Samsung Điện Thoại & Máy Tính Bảng
• Điện Thoại & Máy Tính Bảng Samsung
• Slack
• Nhà Thông Minh
• Snapchat
• Phương Tiện Truyền Thông Xã Hội
• Không Gian
• Spotify
• Tinder
• Xử Lý Sự Cố
• TV
• Twitter
• Trò Chơi Video
• Thực Tế ảo
• VPN
• Trình Duyệt Web
• WhatsApp
• WiFi & Bộ định Tuyến
• WiFi & Bộ định Tuyến
• Windows
• Windows 10
• Windows 11
• Windows 7
• Xbox
• TV YouTube & YouTube
• YouTube & YouTube TV
• Thu Phóng
• Người Giải Thích