GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 09/07/2020 | 00:00 GMT+7

Cách tạo ứng dụng web tiến bộ với Angular

Ứng dụng web tiến bộ là các ứng dụng web được xây dựng bằng các công nghệ giúp chúng hoạt động giống như các ứng dụng root . Lợi ích của các ứng dụng web tiến bộ là khả năng hoạt động trơn tru khi mạng phủ sóng không tin cậy . Ngoài ra, không giống như các ứng dụng root , không cần cài đặt nhưng chúng nhanh hơn các ứng dụng web thông thường.

Trong bài viết này, bạn sẽ xây dựng một ứng dụng web tiến bộ với Angular và triển khai nó với Firebase .

Angular PWA

Mã cho hướng dẫn này có sẵn trên GitHub .

Lưu ý: Hiện tại, có gói @angular/pwa hỗ trợ quá trình này . Hướng dẫn này sẽ bao gồm một cách tiếp cận thay thế trước đó.

Yêu cầu

Để hoàn thành hướng dẫn này, bạn cần :

Hướng dẫn này đã được xác minh với Node v14.5.0 và npm v6.14.5.

Bước 1 - Tạo một dự án Angular mới

Bạn có thể tạo một dự án mới với Angular CLI. Theo mặc định, Angular sẽ tạo các file thử nghiệm không được sử dụng trong dự án của hướng dẫn này. Để ngăn chặn thế hệ này, bạn sẽ thêm cờ --skip-tests vào lệnh sau để tạo một dự án mới:

  • npx @angular/cli@10.0.0 new ng-pwa --skip-tests

Bạn sẽ được yêu cầu bởi một số tùy chọn cấu hình:

Output
? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? CSS

Thao tác này sẽ tạo một folder dự án mới có tên ng-pwa .

Điều hướng đến folder mới:

  • cd ng-pwa

Đến đây bạn đã có một dự án khởi đầu, bạn có thể chuyển sang tạo file kê khai ứng dụng web.

Bước 2 - Tạo file kê khai ứng dụng web

Tệp kê khai ứng dụng web là file JSON chứa cấu hình cung cấp cho ứng dụng web khả năng được lưu trên màn hình chính của user . Nó cũng xác định giao diện và hành vi của nó khi chạy từ màn hình chính. Tệp kê khai ứng dụng web là yêu cầu cơ bản đối với các ứng dụng web tiến bộ nhưng được dùng trên bất kỳ trang web nào.

Để tạo file kê khai ứng dụng web cho ứng dụng của bạn, bạn cần một file mới có tên là manifest.json trong folder root của folder src :

  • nano src/manifest.json

Thêm nội dung bên dưới vào file :

src / manifest.json
{    "name": "Angular Progressive Web App",    "short_name": "Ng-PWA",    "start_url": "./",    "theme_color": "#008080",    "background_color": "#008B8B",    "display": "standalone",    "description": "A PWA that is built with Angular",    "icons": [        {            "src": "/assets/images/icons/icon-16x16.png",            "sizes": "16x16",            "type": "image/png"        },        {             "src": "/assets/images/icons/icon-32x32.png",             "sizes": "32x32",             "type": "image/png"         },         {             "src": "/assets/images/icons/icon-150x150.png",             "sizes": "150x150",             "type": "image/png"         },         {             "src": "/assets/images/icons/icon-180x180.png",             "sizes": "180x180",             "type": "image/png"         },         {             "src": "/assets/images/icons/icon-192x192.png",             "sizes": "192x192",             "type": "image/png"         },         {             "src": "/assets/images/icons/icon-512x512.png",             "sizes": "512x512",             "type": "image/png"         }    ] }

Trong file kê khai ứng dụng web của ta , ta đã xác định name sẽ được gắn vào biểu tượng ứng dụng của ta trên màn hình chính của user và tên short_name sẽ thay thế tên đó, trong trường hợp nó quá dài. Ta cũng chỉ định trang đích của ứng dụng, khi chạy từ màn hình chính với start_url . theme_color chỉ định màu mà giao diện user của trình duyệt (giao diện user ) sẽ giả định khi user truy cập trang web của ta . Thuộc tính background_color kiểm soát màu nền mà biểu tượng ứng dụng của ta sẽ được hiển thị khi user chạy ứng dụng của ta từ màn hình chính của họ. Với display , bạn chỉ định xem có nên ẩn giao diện user của trình duyệt hay không khi user truy cập trang web .

Ta mong muốn user truy cập trang web của ta bằng các loại thiết bị khác nhau với các kích thước màn hình khác nhau, vì vậy cần phải tạo bản sao của các biểu tượng ứng dụng của bạn theo nhiều chiều.

Khi bạn hoàn tất việc thêm nội dung hình ảnh, hãy truy cập index.html và thêm nội dung sau vào phần <head> :

src / index.html
... <head>   ...   <link rel="manifest" href="/manifest.json">   <meta name="theme-color" content="#008080"> </head>

Tệp kê khai ứng dụng web sẽ không được thêm vào folder xây dựng trừ khi ta hướng dẫn Angular làm như vậy. Ta sẽ làm điều đó bằng cách thêm manifest.json vào mảng nội dung trong phần apps của .angular-cli.json :

.angular-cli.json
... "apps": [     {      ...       "assets": [        ...         "manifest.json"       ], ...

Lưu ý: Nếu ứng dụng của bạn được xây dựng bằng Angular 6 trở lên, bạn cần chỉnh sửa angular.json thay vì .angular-cli.json :

angle.json
... "projects": {   "ng-pwa": {     ...     "architect": {       "build": {         ...         "assets": [           "src/manifest.json"         ], ...

Sau khi tạo manifest.json angular-cli.json , sửa đổi index.html và chỉnh sửa angular-cli.json (hoặc angular.json ), bạn đã sẵn sàng cho bước tiếp theo.

Bước 3 - Thêm nhân viên dịch vụ

Nhân viên dịch vụ là nền tảng của các ứng dụng web tiến bộ. Được viết bằng JavaScript, chúng giúp lưu vào bộ nhớ cache các nội dung và file quan trọng, giúp giữ cho ứng dụng hoạt động khi phạm vi mạng không khả dụng hoặc không tin cậy . Nhân viên dịch vụ cũng có thể chặn các yêu cầu và quản lý phản hồi từ server giữa những thứ khác.

Ta cần xây dựng ứng dụng của bạn bằng webpack trước khi đưa nó vào production . Nhân viên dịch vụ của ta phải có khả năng theo dõi và lưu vào cache các file bản dựng.

Với gói npm sw-precache-webpack-plugin , ta cài đặt gói và cấu hình nó.

Lưu ý: Hiện tại, nhà phát triển cho sw-precache-webpack-plugin khuyên bạn nên sử dụng GenerateSW từ workbox-webpack-plugin .

Sau đó, ta có thể chạy một lệnh sẽ tự động tạo service worker trong folder xây dựng.

Chạy npm install lệnh từ ng-pwa folder để cài đặt các gói:

  • npm install --save-dev sw-precache-webpack-plugin@1.0.0

Khi gói được cài đặt, hãy tạo một file có tên precache-config.js :

  • nano precache-config.js

Thêm phần sau vào file :

Preache-config.js
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');  module.exports = {     navigateFallback: '/index.html',     navigateFallbackWhitelist: [],     stripePrefix: 'dist',     root: 'dist/',     plugins:[         new SWPrecacheWebpackPlugin({             cacheId: 'ng-pwa',             filename: 'service-worker.js',             staticFileGlobs: [                 'dist/index.html',                 'dist/**.js',                 'dist/**.css'             ],          })     ],     stripePrefix: 'dist/assets',     mergeStaticsConfig: true };

Tệp precache-config.js cấu hình sw-precache-webpack-plugin bằng cách sử dụng các cặp key-value đối tượng theo nghĩa đen.

Angular như một khuôn khổ giao diện user để xây dựng các ứng dụng một trang sử dụng định tuyến URL phía client . Điều này nghĩa là nó có thể tạo các URL tùy ý không được lưu vào bộ nhớ cache của service worker tạo tự động. Trong những tình huống như vậy, ta sẽ xác định một mục nhập HTML mà URL được yêu cầu sẽ được ánh xạ tới và navigateFallback sẽ xử lý navigateFallback đó. Mục nhập HTML sẽ có thể cung cấp các tài nguyên mong muốn. Vì ứng dụng của ta là một SPA (ứng dụng một trang) và index.html là điểm nhập - nó có thể xử lý các URL tùy ý - do đó, nó phải nằm trong số các file được chọn để lưu vào bộ nhớ cache trong mảng staticFileGlobs . navigateFallbackWhitelist có thể để trống hoặc chứa regex xác định loại hoặc mẫu URL mà navigateFallback sẽ được sử dụng.

Để hiểu sâu hơn về cách cấu hình sw-precache-webpack-plugin , hãy đọc tài liệu của nó.

Để hoàn tất quá trình cài đặt service worker, ta sẽ tạo một tập lệnh hoặc lệnh npm tùy chỉnh sẽ được sử dụng để tạo ứng dụng của ta và tự động tạo file service worker trong folder build. Đi tới file package.json và thêm phần sau vào scripts :

package.json
 ...  "scripts": {     ...     "pwa": "ng build --prod && sw-precache --root=dist --config=precache-config.js"   },  ...

Sau khi cài đặt sw-precache-webpack-plugin , tạo precache-config.js và chỉnh sửa package.json , bạn đã sẵn sàng cho bước tiếp theo.

Bước 4 - Tạo Chế độ xem

Ta chỉ có một chế độ xem duy nhất, vì trọng tâm chính của ta là quá trình xây dựng các ứng dụng web tiến bộ với Angular.

Chỉnh sửa app.component.html và thay thế nội dung bằng mã sau:

src / app / app.component.html
<div class="container">   <h1>     A Progressive Web App Built with Angular.   </h1>   <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" alt="Angular logo">   <h2>Get Started With Progressive Web Apps:</h2>   <ul>     <li>       <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service Workers</a></h4>     </li>     <li>       <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/web-app-manifest/">Web App Manifest</a></h4>     </li>     <li>       <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/">Code Lab (PWA)</a></h4>     </li>   </ul> </div>

Mã này tạo ra một trang web với một hình ảnh, một số văn bản và ba liên kết.

Thuộc tính rel="noopener là cần thiết trong các ứng dụng web tiến bộ nếu thuộc tính target của phần tử neo được đặt thành _blank vì lý do bảo mật và hiệu suất.

Chỉnh sửa styles.css và thay thế nội dung bằng đoạn mã sau:

src / styles.css
body {     background-color: teal; }  .container {     text-align: center; }  ul {     list-style: none; }  h1, h2, a {     color: white; }

Mã này tạo ra màu nền mòng két, căn giữa văn bản và tạo cho văn bản màu trắng.

Bây giờ, bạn đã hoàn thành chế độ xem và có thể chuyển sang triển khai ứng dụng.

Bước 5 - Triển khai ứng dụng của bạn

Nhân viên dịch vụ là nhịp tim của bất kỳ ứng dụng web tiến bộ nào. Tuy nhiên, để nhân viên dịch vụ hoạt động bình thường, ứng dụng của ta phải được cung cấp qua kết nối an toàn. Do đó, ta sẽ triển khai ứng dụng của bạn cho Firebase, nơi lưu trữ qua kết nối an toàn. Trong bước này, bạn sẽ triển khai ứng dụng của bạn lên Firebase.

Tạo một dự án Firebase mới

Để bắt đầu, hãy truy cập firebase.google.com . Nếu bạn chưa có account , hãy tạo một account để có quyền truy cập vào console . Từ console , hãy tạo một dự án Firebase mới.

Sau khi đăng nhập, nhấp vào liên kết Đi tới console ở góc trên cùng bên phải. Trên trang console , chọn Tạo dự án . Bạn sẽ được yêu cầu đặt tên cho dự án của bạn . Bạn cũng sẽ được yêu cầu bật Google Analytics. Hướng dẫn này sẽ không yêu cầu Google Analytics.

Nhấp vào Tạo dự án và đợi quá trình hoàn tất.

Sau khi dự án đã được tạo, bạn có thể nhấp vào Tiếp tục để đến Control panel dự án. Với mục đích của hướng dẫn này, ta sẽ quan tâm đến phần Phát triển và trang Lưu trữ .

Đến đây bạn có thể quay lại terminal lệnh của bạn . Chạy lệnh npm install để cài đặt gói firebase-tools trên phạm vi global :

  • npm install -g firebase-tools@8.4.3

Gói firebase-tools sẽ cho phép ta chạy thử nghiệm và triển khai các ứng dụng cho Firebase từ cổng lệnh.

Khi quá trình cài đặt hoàn tất, ta cần xây dựng ứng dụng của bạn để chuẩn bị triển khai.

Để tạo ứng dụng Angular và tự động tạo service worker, hãy chạy phần sau từ folder ng-pwa :

  • npm run pwa

Điều này chạy một tập lệnh tùy chỉnh mà ta đã tạo trước đó và giúp ứng dụng của ta sẵn sàng production .

Quy trình xây dựng góc

Bây giờ đã đến lúc giới thiệu Firebase cho ứng dụng. Chạy lệnh này để đăng nhập vào Firebase:

  • firebase login

Đến đây, bạn sẽ được yêu cầu nhập thông tin đăng nhập. Nhập thông tin account của bạn vào terminal .

Sau khi xác thực, hãy chạy lệnh sau để khởi tạo Firebase trong dự án:

  • firebase init

Sau đó trả lời các câu hỏi như sau:

Are you ready to proceed? (Y/n) = Y Which Firebase CLI features do you want to setup for this folder? = Hosting Select a default Firebase project for this directory = Your-Firebase-Project-Name What do you want to use as your public directory? = dist Configure as a single-page app (rewrite all urls to /index.html)? (y/N) = Y File dist/index.html already exists. Overwrite? (y/N) = N

Dòng lệnh Firebase hiển thị các lựa chọn đã đề cập

Ứng dụng của ta đã sẵn sàng để được triển khai. Chạy lệnh sau để triển khai ứng dụng lên Firebase:

  • firebase deploy

Cuối cùng, chạy lệnh này để xem ứng dụng:

  • firebase open hosting:site

PWA mở trong Chrome di động

Màn hình giật gân PWA

Xử lý sự cố

Nếu bạn thấy thông báo “Hoàn tất cài đặt lưu trữ Firebase” thay vì ứng dụng của bạn , có thể bạn đã overrides index.html của bạn . Xây dựng lại với npm run pwa , firebase init và đảm bảo bạn chọn “Không” để overrides index.html .

Tùy thuộc vào cấu hình của bạn, ứng dụng của bạn có thể tồn tại dưới "ng-pwa" (tên của dự án Angular). Trong quá trình firebase init , bạn có thể đặt folder chung thành dist/nw-pwa thay vì dist để tránh điều này.

Ứng dụng web tiến bộ của bạn hiện đã được xây dựng và triển khai. Bây giờ, ta có thể sử dụng một công cụ để kiểm tra nó.

Bước 6 - Thử nghiệm với Lighthouse

Lighthouse là một tiện ích mở rộng của Chrome do Google tạo ra. Nó được dùng để kiểm tra mức độ tuân theo của một ứng dụng web tiến bộ đối với tiêu chuẩn ứng dụng web tiến bộ, ngoài các thử nghiệm khác.

Điểm cao nhất là 100% và điểm PWA cho ứng dụng này là 91%.

Thử nghiệm ngọn hải đăng PWA

Để kiểm tra PWA của bạn, hãy mở ứng dụng được lưu trữ trong Trình duyệt web Google Chrome của bạn. Nhấp vào nút Tiện ích mở rộng và chọn Ngọn hải đăng . Một cửa sổ sẽ hiển thị và nhắc bạn nhấp vào nút Tạo báo cáo . Sau khi nhấp vào nút, bạn sẽ tạm thời nhìn thấy màn hình có thông báo Đang chờ kết quả Hải đăng . Khi bài kiểm tra hoàn thành, bạn sẽ được hiển thị với màn hình kết quả bài kiểm tra.

Kết luận

Trong bài viết này, bạn đã xây dựng một ứng dụng web tiến bộ với Angular và được triển khai thông qua Firebase. Các ứng dụng web tiến bộ cung cấp cho user trải nghiệm tương tự như các ứng dụng root . Tuy nhiên, PWA nhẹ hơn và linh hoạt hơn nhiều.

Tags:

Các tin liên quan

Cách cài đặt Django Web Framework trên Ubuntu 20.04
2020-07-06
Cách tạo chế độ xem để phát triển web Django
2020-05-14
Cách tạo chế độ xem để phát triển web Django
2020-05-14
Cách tạo ứng dụng web bằng Flask trong Python 3
2020-04-16
Cách tạo web server trong Node.js bằng module HTTP
2020-04-10
Mã thông báo web JSON (JWT) trong Express.js
2020-02-19
Phát triển bản địa với API thông báo web
2020-02-12
Cách tạo ứng dụng chuyển văn bản thành giọng nói với API giọng nói trên web
2019-12-12
Cách tạo băng chuyền image danh mục đầu tư với các thanh trượt được đồng bộ hóa trên trang web
2019-12-12
Cách tạo thông báo trên web bằng kênh Laravel và Pusher
2019-12-12