Xin chào tất cả các anh chị em bạn gì đã "mòn mỏi" chờ đợi em. 💖
Quay trở lại với chủ đề PWA thì hôm nay em xin phép được chia sẻ cách làm thế nào để có thể cài đặt, tích hợp PWA với một trang web được xây dựng bằng Laravel.
Nếu như mọi người chưa biết PWA là gì thì hãy xem lại bài viết 👇：
PWA - Tương lai của nền tảng Web!
Let's start ==> Chiến thôi nào mọi người ưii.
(Để phục vụ cho bài viết này, em xin phép tạo một project laravel từ đầu để tiện theo dõi nhó)
Bước 1: Tạo một project laravel. (Về cách cài đặt và khởi tạo project, mọi người có thể tham khảo thêm ở đây)
composer create-project laravel/laravel pwa-app
Tiếp tục install package của PWA:
composer require ladumor/laravel-pwa
Bước 2: Mở file config/app.php vào thêm các phần config sau:
Ở phần provider:
Ladumor\LaravelPwa\PWAServiceProvider::class,
Ở phần Aliases:
'LaravelPwa' => \Ladumor\LaravelPwa\LaravelPwa::class,
Bước 3: Run command ở terminal và cùng chờ kết quả.
php artisan laravel-pwa:publish
Sau khi run câu lệnh trên, sẽ có các file như: sw.js (file này để xử lý handle các sử kiện offline), manifest.json (cấu hình các thông số của ứng dụng khi cài đặt trên các màn hình), offline.html (Khi trang chưa được cache lại mà bị mất mạng, sẽ hiện thị ra trang này),....
Bước 4: Bổ sung các đoạn code vào file app.blade.php:
Lưu ý: Cần check lại các file hình ảnh, đường dẫn để đảm bảo đã link đúng (Vì các file được gen sẵn nêu cần điều chỉnh lại)
Trong thẻ <head>, thêm đoạn code sau vào ngay trước thẻ đóng </head> (Đoạn code này giúp đọc và liên kết với file manifest, để hỗ trợ giao diện ứng dụng sau khi đã cài đặt)
<!-- PWA -->
<meta name="theme-color" content="#6777ef"/>
<link rel="apple-touch-icon" href="{{ asset('logo.png') }}">
<link rel="manifest" href="{{ asset('/manifest.json') }}">
Trước thẻ đóng </body>, thêm đoạn code: (Đăng ký với hệ thông file service worker để xử lý các tác vụ liên quan tới cache, offline,...)
<script src="{{ asset('/sw.js') }}"></script>
<script>
if (!navigator.serviceWorker.controller) {
navigator.serviceWorker.register("/sw.js").then(function (reg) {
console.log("Service worker has been registered for scope: " + reg.scope);
});
}
</script>
Bước 5: Quay trở lại terminal và run server
php artisan serve :
Truy cập vào server và cùng xem thành quả nhé. Hãy cùng cập nhật kết quả ở dưới để mình biết mọi người cũng đã thành công nhé
Love u 3000~
Hẹn gặp lại mọi người trong những số tiếp theo nhé. See you soon! 💚❤️💛
Hy vọng sẽ sớm thấy dự án Report của công ty với phiên bản PWA.
Một lưu ý nữa, là PWA chỉ support HTTPs nên mọi người chú ý nhé. HTTP thường thì sẽ không chạy đâu ạ @@
