Cách xây dựng PWA trong Vanilla JavaScript
Đây là phần đầu tiên của loạt bài gồm ba phần về cách tạo Ứng dụng web tiến bộ (PWA) sử dụng API đẩy web và lịch biểu cron. Trong bài viết này, ta sẽ đề cập đến những điều cơ bản: giao diện user , file kê khai ứng dụng web và khía cạnh Service Worker của ứng dụng và ta sẽ chỉ sử dụng JavaScript thuần túy để thực hiện điều này. Ở cuối bài đăng này, ta sẽ có một PWA đang hoạt động được lưu vào bộ nhớ đệm để có thể truy cập khi offline .
Những gì ta đang xây dựng
Thầy thuốc của tôi gần đây bảo tôi uống 3 viên một ngày. Trên đường trở về nhà, tôi tự nhủ: “Tôi là một nhà phát triển, tôi tự động hóa các nhiệm vụ, hãy xây dựng một ứng dụng để giúp tôi uống thuốc”.
Ta sẽ xây dựng một Ứng dụng web tiến bộ (PWA) đơn giản sẽ nhắc tôi uống thuốc mỗi ngày.
Ứng dụng của ta sẽ có một web server được cung cấp bởi Express.js. Express sẽ đẩy thông báo đến các khách hàng đã đăng ký nhận thông báo đẩy. Nó cũng sẽ phục vụ ứng dụng giao diện user .
Bước một: PWA
Ứng dụng ta đang xây dựng phải nhắc ta uống thuốc ngay cả khi trình duyệt không được mở. Vì vậy, ta cần một ứng dụng web tiến bộ .
Chuẩn bị và sẵn sàng kê khai
Bước đầu tiên của tôi khi xây dựng PWA là tạo file kê khai bằng trình tạo này . Công cụ này sẽ tạo manifest.json chứa tất cả thông tin cơ bản về ứng dụng của bạn. Nó cũng sẽ tạo ra một số biểu tượng sẽ hiển thị trên điện thoại của user khi họ download ứng dụng.
Chỉ cần extract mọi thứ bên trong một folder ở folder root của dự án mà ta sẽ gọi là public . Tôi quyết định gọi ứng dụng của bạn là Temporas.
"name": "Temporas",
"short_name": "Temporas",
"theme_color": "#222831",
"background_color": "#ffad17",
"display": "standalone",
"Scope": "",
"start_url": "/index.html",
"icons": [
// A lot of icons
]
PWA dựa vào Nhân viên Dịch vụ . Service worker là những chương trình nhỏ chạy ngay sau khi chúng được đăng ký độc lập với phần còn lại của mã JavaScript của bạn. Service worker không thể tương tác trực tiếp với DOM nhưng có thể gửi thông báo đến phần còn lại của mã của bạn ( ta sẽ khám phá vấn đề này chi tiết hơn trong phần 2 của loạt bài này).
Bây giờ, hãy tạo giao diện user và đăng ký nhân viên dịch vụ của ta :
<!DOCTYPE html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name="theme-color" content="#222831">
<link rel='manifest' href='./manifest.json'>
<script>
// Registering our Service worker
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js', { scope: './' })
}
</script>
</head>
<body>
<div class="hero">
<h1>Temporas</h1>
<h2>Take your medicine my friend</h2>
<div id="status"></div>
<button id="unsubscribe">unsubscribe</button>
</div>
</body>
Bây giờ ta chỉ còn một file nữa là có ứng dụng web có thể cài đặt. Hãy tạo nhân viên dịch vụ của ta :
const cacheName = 'Temporas';
// Cache all the files to make a PWA
self.addEventListener('install', e => {
e.waitUntil(
caches.open(cacheName).then(cache => {
// Our application only has two files here index.html and manifest.json
// but you can add more such as style.css as your app grows
return cache.addAll([
'./',
'./index.html',
'./manifest.json'
]);
})
);
});
// Our service worker will intercept all fetch requests
// and check if we have cached the file
// if so it will serve the cached file
self.addEventListener('fetch', event => {
event.respondWith(
caches.open(cacheName)
.then(cache => cache.match(event.request, { ignoreSearch: true }))
.then(response => {
return response || fetch(event.request);
})
);
});
✨✨ Ta có một PWA ✨✨
Cài đặt Express.js
PWA sẽ không hoạt động nếu bạn chỉ mở /public/index.html trong trình duyệt của bạn . Ta phải cung cấp nội dung của bạn từ một web server .
Đầu tiên, hãy cài đặt mọi thứ trong dòng lệnh của ta . Trong folder root của bạn chạy:
$ npm init
$ npm install express body-parser
$ touch app.js
Bên trong package.json thay thế trường scripts bằng:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js"
}
Và bây giờ hãy điền ứng dụng của ta :
const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const port = 3000;
// We want to use JSON to send post request to our application
app.use(bodyParser.json());
// We tell express to serve the folder public as static content
app.use(express.static('public'));
app.get('/public');
app.listen(port, () => console.log(`Listening on port ${port}!`));
Đến đây bạn có thể chạy npm run start . Truy cập http: // localhost: 3000 , giết server . Reload http: // localhost: 3000 và ứng dụng sẽ có vẻ như vẫn đang hoạt động! Bạn thậm chí có thể tắt notebook của bạn và quay lại trang web trên cổng đó.
Tôi thực sự khuyên bạn nên tắt cơ chế bộ nhớ đệm của service worker khi bạn đang phát triển các tính năng mới. Nó có thể gây ra một số nhầm lẫn.
Đây là một bài đăng tốt nếu bạn muốn tìm hiểu thêm về cách cài đặt server Express.
Kiểm tra PWA của bạn
Để kiểm tra PWA của bạn, tôi thực sự khuyên bạn nên sử dụng tiện ích mở rộng Lighthouse để xem mọi thứ có hoạt động hay không. Cũng nên nhớ rằng khi đến lúc triển khai ứng dụng của bạn trên web, ứng dụng đó cần được phân phối qua HTTPS để được coi là PWA và có thể cài đặt dưới dạng ứng dụng.
Bạn có thể tìm thấy tất cả mã trong kho Github này.
Các tin liên quan
Hiểu về Sắp xếp nhanh qua JavaScript2020-02-14
Hiểu bản đồ và thiết lập đối tượng trong JavaScript
2020-02-12
Hiểu Hợp nhất Sắp xếp Thông qua JavaScript
2020-02-08
Tạo biểu mẫu tùy chỉnh bằng API dữ liệu biểu mẫu JavaScript
2020-02-06
Thuật toán sắp xếp cho người mới bắt đầu trong JavaScript: Bubble, Selection & Insertion Sort
2020-02-03
Tìm kiếm nhị phân tuyến tính Vs qua JavaScript
2020-01-29
Hiểu Đệ quy & Ghi nhớ qua JavaScript
2020-01-26
Đọc và xử lý tệp với API JavaScript FileReader
2020-01-23
Tìm hiểu ký hiệu Big O qua JavaScript
2020-01-20
Cách sử dụng API BroadcastChannel trong JavaScript
2020-01-13
