Nội dung
Giới thiệu
Trong bài viết này, chúng ta sẽ tìm hiểu Progressive Web App (PWA) là gì và lập trình một PWA app với vue.js.
Progressive Web App là gì?
Progressive Web App là một công nghệ do Google phát triển vào năm 2015. PWA cho phép bạn tạo ra các website có thể cài đặt và sử dụng như các native app trên các thiết bị Android và IOS.
Những lợi ích mà PWA mang lại:
- Có thể sử dụng offline.
- Tốc độ và hiệu năng tốt.
- Bảo mật tốt.
- Tương thích với mọi thiết bị.
- Có thể cài đặt trên mọi thiết bị.
- Có thể gửi thông báo như các app thông thường.
- Tạo cảm giác trải nghiệm tốt hơn cho người dùng.
- Cho phép người dùng lưu trên desktop hay homescreen để nhanh chóng vào lại.
Vue.js
Gọi tắt là Vue (phát âm là /vjuː/, giống như view trong tiếng Anh), Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces). Khác với các framework nguyên khối (monolithic), Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước. Khi phát triển lớp giao diện (view layer), người dùng chỉ cần dùng thư viện lõi (core library) của Vue, vốn rất dễ học và tích hợp với các thư viện hoặc dự án có sẵn. Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng được dễ dàng nhu cầu xây dựng những ứng dụng một trang (SPA – Single-Page Applications) với độ phức tạp cao hơn nhiều.
Vue cung cấp nhiều cách cài đặt gồm: sử dụng CDN, tải thư viện về và sử dụng công cụ vue-cli. Trong bài này, chúng ta sẽ sử dụng công cụ vue-cli để khởi tạo dự án PWA vue.js.
Cài đặt
Để cài đặt vue-cli, trước hết máy của bạn phải được cài đặt nodejs. Mở terminal và nhập vào lệnh sau để cài đặt vue-cli:
npm install -g @vue/cli
Ngoài ra, chúng ta cần cài đặt thêm add-on vue init để có thể khởi tạo PWA:
npm install -g @vue/cli-init
Khởi tạo dự án
Sau khi đã cài đặt xong vue-cli, để khởi tạo một dự án PWA, từ terminal chúng ta nhập lệnh:
vue init pwa
Vue-cli sẽ hỏi bạn một số lựa chọn cho dự án của mình.
Sau đó, chúng ta di chuyển vào thư mục dự án vừa được tạo rồi cài đặt các package bằng lệnh:
npm install
Chạy dự án
Trong terminal, nhập lệnh:
npm run dev
Trình duyệt sẽ hiển thị như sau:
Như vậy là chúng ta đã tạo một PWA với vue.js. Trong phần tiếp theo chúng ta sẽ ứng dụng indexedDB để tạo một ứng dụng quản lý công việc.
