Cách tạo ứng dụng di động bằng HTML

Android là một hệ điều hành di động dựa trên phiên bản sửa đổi của nhân Linux và phần mềm nguồn mở khác, được thiết kế chủ yếu cho các thiết bị di động màn hình cảm ứng như điện thoại thông minh và máy tính bảng. Vâng, bạn đã đọc nó ngay trong tiêu đề của bài viết này. Trong bài viết này, chúng ta sẽ xây dựng một Ứng dụng Android với HTML, CSS và JavaScript trong Android Studio

Nội dung chính Show

Những gì chúng ta sẽ xây dựng trong ứng dụng này?
Bạn có thể xây dựng ứng dụng di động bằng HTML không?
Tôi có thể sử dụng HTML để tạo ứng dụng Android không?
Tôi có thể tạo ứng dụng bằng HTML và CSS không?
Bạn có thể tạo ứng dụng iOS bằng HTML không?

Những gì chúng ta sẽ xây dựng trong ứng dụng này?

Đây là một video mẫu về những gì chúng ta sẽ xây dựng trong bài viết này. Chúng tôi sẽ văn bản hiển thị văn bản bằng HTML và Javascript và thay đổi màu nền bằng CSS

https. //phương tiện truyền thông. chuyên viên máy tính. org/wp-content/uploads/20220321072557/WhatsApp-Video-2022-03-21-at-07. 24. 40. mp4

Vì vậy, bạn đã thấy tiêu đề và bạn đang tự hỏi làm thế nào bạn có thể xây dựng một ứng dụng di động thực tế chỉ bằng cách sử dụng kiến thức về các công nghệ web cơ bản mà không cần phải học phát triển Android hoặc IOS? . Bằng cách này, chúng tôi sẽ đạt được một loại ứng dụng được gọi là Ứng dụng web lũy tiến (PWA)

Trong bài viết này, chúng ta sẽ tìm hiểu cách tận dụng sức mạnh của HTML, CSS và Javascript để xây dựng một ứng dụng di động đơn giản. Chúng tôi sẽ không sử dụng các framework như Ionic hoặc React Native. Điều này là do hướng dẫn này tập trung vào việc chỉ ra cách một ứng dụng web cơ bản có thể được tạo ra để cảm nhận và hoạt động giống như một ứng dụng di động gốc có thể được cài đặt và chạy trên thiết bị di động bằng phương pháp đơn giản nhất với ít trừu tượng nhất

Để tiếp tục, chúng ta hãy giới thiệu ngắn gọn về PWAs

Ứng dụng web lũy tiến là gì?

Theo Tài liệu web MDN chính thức

Ứng dụng web lũy tiến (PWA) là các ứng dụng web sử dụng trình chạy dịch vụ, bảng kê khai và các tính năng nền tảng web khác kết hợp với tính năng nâng cao lũy tiến để mang đến cho người dùng trải nghiệm ngang bằng với các ứng dụng gốc

Nói một cách đơn giản, về cơ bản, chúng là các trang web được tạo kiểu giống như các ứng dụng có thể chạy bên trong trình duyệt trang web hoặc được cài đặt trực tiếp trên thiết bị di động và được truy cập như một ứng dụng gốc

Có ba thành phần chính của PWA;

Nhân viên phục vụ. Nhân viên dịch vụ biến trang web thành một ứng dụng bằng cách cho phép trang web tải xuống và lưu trữ các tệp trên thiết bị
Bản kê khai web. Tệp JSON này cung cấp siêu thông tin cơ bản về ứng dụng, chẳng hạn như biểu tượng ứng dụng, màu nền, v.v.
HTTPS an toàn. HTTPS là bắt buộc và làm cho PWA an toàn hơn các ứng dụng web thông thường

PWA có ưu và nhược điểm. Trong số những người trước đây

Giá rẻ và phát triển nhanh. PWA ít tốn kém hơn, nhanh hơn và dễ tạo hơn các ứng dụng gốc. Phát triển ứng dụng gốc từ đầu đòi hỏi các công nghệ cụ thể cho cả hai nền tảng. HTML, CSS và JavaScript là tất cả những gì cần thiết cho PWA
Tính khả dụng đa nền tảng. Một trong những lợi thế đầy hứa hẹn của PWAs là chúng có thể được cài đặt và chạy trên nhiều thiết bị trên nhiều hệ điều hành khác nhau
Chức năng ngoại tuyến. Việc không có hoặc không có internet sẽ không ngăn người dùng sử dụng ứng dụng của bạn vì ứng dụng này có thể lưu vào bộ nhớ đệm dữ liệu để xem ngoại tuyến bằng nhân viên dịch vụ
Hiệu suất. So với các ứng dụng di động gốc, PWAs nhẹ hơn nhiều, không chiếm nhiều dung lượng bộ nhớ và có thời gian tải nhanh hơn

Về mặt tiêu cực

Mức sử dụng pin cao. Vì PWA là mã web cấp cao được tích hợp sẵn nên điện thoại phải làm việc nhiều hơn để đọc mã;
Truy cập phần cứng di động. PWA không thể truy cập các tính năng phần cứng khác nhau như Bluetooth của thiết bị, cảm biến tiệm cận, v.v.
Phân phối Vì PWA không được phân phối qua cửa hàng ứng dụng nên bạn có thể bỏ lỡ những người dùng chủ yếu duyệt qua cửa hàng ứng dụng

Bạn nên cân nhắc sử dụng/xây dựng Ứng dụng web lũy tiến nếu bạn đáp ứng các tiêu chí sau

Bạn không có ngân sách để xây dựng một ứng dụng chính thức
Bạn cần thúc đẩy đối tượng mục tiêu của mình nhanh hơn
Có khả năng tương thích đa nền tảng là điều cần thiết cho doanh nghiệp của bạn

Chúng tôi sẽ xây dựng ứng dụng di động “Todo List” bằng HTML, CSS và Javascript. Trước tiên, chúng tôi sẽ xây dựng một ứng dụng web trong khi sử dụng IndexedDB cho cơ sở dữ liệu của chúng tôi, hộp làm việc để làm cho nó hoạt động ngoại tuyến và bảng kê khai web để làm cho nó có thể cài đặt được trên các thiết bị. Kết quả cuối cùng sẽ như sau

</body></html>

Tại đây, chúng tôi đã tạo bố cục trang HTML và liên kết cả

:root {
    --dark: #05152E;
    --darker: #1F2937;
    --darkest: #001E3C;
    --grey: #6B7280;
    --pink: #EC4899;
    --purple: #8B5CF6;
    --light: #EEE;
}* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Fira sans", sans-serif;
}body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #FFF;
    background-color: var(--dark);
}header {
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}header h1{ 
    font-size: 2.5rem;
    font-weight: 300;
    color: white;
    margin-bottom: 1rem;
}
h1{
    text-align: center;
}
#new-task-form {
    display: flex;
}input, button {
    appearance: none;
    border: none;
    outline: none;
    background: none;
}#new-task-input {
    flex: 1 1 0%;
    background-color: var(--darker);
    padding: 1rem;
    border-radius: 1rem;
    margin-right: 1rem;
    color: var(--light);
    font-size: 1.25rem;
}#new-task-input::placeholder {
    color: var(--grey);
}#new-task-submit {
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: 700;
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: 0.4s;
}#new-task-submit:hover {
    opacity: 0.8;
}#new-task-submit:active {
    opacity: 0.6;
}main {
    flex: 1 1 0%;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}.task-list {
    padding: 1rem;
}.task-list h2 {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--grey);
    margin-bottom: 1rem;
}#tasks .task {
    display: flex;
    justify-content: space-between;
    background-color: var(--darkest);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}.task .content {
    flex: 1 1 0%;
}.task .content .text {
    color: var(--light);
    font-size: 1.125rem;
    width: 100%;
    display: block;
    transition: 0.4s;
}.task .content .text:not(:read-only) {
    color: var(--pink);
}.task .actions {
    display: flex;
    margin: 0 -0.5rem;
}.task .actions button {
    cursor: pointer;
    margin: 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.4s;
}.task .actions button:hover {
    opacity: 0.8;
}.task .actions button:active {
    opacity: 0.6;
}.task .actions .edit {
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}.task .actions .delete {
    color: crimson;
}

0 và

:root {
    --dark: #05152E;
    --darker: #1F2937;
    --darkest: #001E3C;
    --grey: #6B7280;
    --pink: #EC4899;
    --purple: #8B5CF6;
    --light: #EEE;
}* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Fira sans", sans-serif;
}body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #FFF;
    background-color: var(--dark);
}header {
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}header h1{ 
    font-size: 2.5rem;
    font-weight: 300;
    color: white;
    margin-bottom: 1rem;
}
h1{
    text-align: center;
}
#new-task-form {
    display: flex;
}input, button {
    appearance: none;
    border: none;
    outline: none;
    background: none;
}#new-task-input {
    flex: 1 1 0%;
    background-color: var(--darker);
    padding: 1rem;
    border-radius: 1rem;
    margin-right: 1rem;
    color: var(--light);
    font-size: 1.25rem;
}#new-task-input::placeholder {
    color: var(--grey);
}#new-task-submit {
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: 700;
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: 0.4s;
}#new-task-submit:hover {
    opacity: 0.8;
}#new-task-submit:active {
    opacity: 0.6;
}main {
    flex: 1 1 0%;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}.task-list {
    padding: 1rem;
}.task-list h2 {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--grey);
    margin-bottom: 1rem;
}#tasks .task {
    display: flex;
    justify-content: space-between;
    background-color: var(--darkest);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}.task .content {
    flex: 1 1 0%;
}.task .content .text {
    color: var(--light);
    font-size: 1.125rem;
    width: 100%;
    display: block;
    transition: 0.4s;
}.task .content .text:not(:read-only) {
    color: var(--pink);
}.task .actions {
    display: flex;
    margin: 0 -0.5rem;
}.task .actions button {
    cursor: pointer;
    margin: 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.4s;
}.task .actions button:hover {
    opacity: 0.8;
}.task .actions button:active {
    opacity: 0.6;
}.task .actions .edit {
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}.task .actions .delete {
    color: crimson;
}

1 của chúng tôi. Bây giờ, hãy tiếp tục và thêm một số kiểu dáng

Tạo kiểu cho ứng dụng của chúng tôi bằng CSS

Cập nhật tệp

:root {
    --dark: #05152E;
    --darker: #1F2937;
    --darkest: #001E3C;
    --grey: #6B7280;
    --pink: #EC4899;
    --purple: #8B5CF6;
    --light: #EEE;
}* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Fira sans", sans-serif;
}body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #FFF;
    background-color: var(--dark);
}header {
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}header h1{ 
    font-size: 2.5rem;
    font-weight: 300;
    color: white;
    margin-bottom: 1rem;
}
h1{
    text-align: center;
}
#new-task-form {
    display: flex;
}input, button {
    appearance: none;
    border: none;
    outline: none;
    background: none;
}#new-task-input {
    flex: 1 1 0%;
    background-color: var(--darker);
    padding: 1rem;
    border-radius: 1rem;
    margin-right: 1rem;
    color: var(--light);
    font-size: 1.25rem;
}#new-task-input::placeholder {
    color: var(--grey);
}#new-task-submit {
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: 700;
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: 0.4s;
}#new-task-submit:hover {
    opacity: 0.8;
}#new-task-submit:active {
    opacity: 0.6;
}main {
    flex: 1 1 0%;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}.task-list {
    padding: 1rem;
}.task-list h2 {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--grey);
    margin-bottom: 1rem;
}#tasks .task {
    display: flex;
    justify-content: space-between;
    background-color: var(--darkest);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}.task .content {
    flex: 1 1 0%;
}.task .content .text {
    color: var(--light);
    font-size: 1.125rem;
    width: 100%;
    display: block;
    transition: 0.4s;
}.task .content .text:not(:read-only) {
    color: var(--pink);
}.task .actions {
    display: flex;
    margin: 0 -0.5rem;
}.task .actions button {
    cursor: pointer;
    margin: 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.4s;
}.task .actions button:hover {
    opacity: 0.8;
}.task .actions button:active {
    opacity: 0.6;
}.task .actions .edit {
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}.task .actions .delete {
    color: crimson;
}

0 bằng mã bên dưới

:root {
    --dark: #05152E;
    --darker: #1F2937;
    --darkest: #001E3C;
    --grey: #6B7280;
    --pink: #EC4899;
    --purple: #8B5CF6;
    --light: #EEE;
}* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Fira sans", sans-serif;
}body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #FFF;
    background-color: var(--dark);
}header {
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}header h1{ 
    font-size: 2.5rem;
    font-weight: 300;
    color: white;
    margin-bottom: 1rem;
}
h1{
    text-align: center;
}
#new-task-form {
    display: flex;
}input, button {
    appearance: none;
    border: none;
    outline: none;
    background: none;
}#new-task-input {
    flex: 1 1 0%;
    background-color: var(--darker);
    padding: 1rem;
    border-radius: 1rem;
    margin-right: 1rem;
    color: var(--light);
    font-size: 1.25rem;
}#new-task-input::placeholder {
    color: var(--grey);
}#new-task-submit {
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: 700;
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: 0.4s;
}#new-task-submit:hover {
    opacity: 0.8;
}#new-task-submit:active {
    opacity: 0.6;
}main {
    flex: 1 1 0%;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}.task-list {
    padding: 1rem;
}.task-list h2 {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--grey);
    margin-bottom: 1rem;
}#tasks .task {
    display: flex;
    justify-content: space-between;
    background-color: var(--darkest);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}.task .content {
    flex: 1 1 0%;
}.task .content .text {
    color: var(--light);
    font-size: 1.125rem;
    width: 100%;
    display: block;
    transition: 0.4s;
}.task .content .text:not(:read-only) {
    color: var(--pink);
}.task .actions {
    display: flex;
    margin: 0 -0.5rem;
}.task .actions button {
    cursor: pointer;
    margin: 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.4s;
}.task .actions button:hover {
    opacity: 0.8;
}.task .actions button:active {
    opacity: 0.6;
}.task .actions .edit {
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}.task .actions .delete {
    color: crimson;
}

Phát lại phiên mã nguồn mở

OpenReplay là một mã nguồn mở thay thế cho FullStory và LogRocket. Nó cung cấp cho bạn khả năng quan sát đầy đủ bằng cách phát lại mọi thứ người dùng của bạn làm trên ứng dụng của bạn và hiển thị cách ngăn xếp của bạn hoạt động đối với mọi vấn đề. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn

https://unpkg.com/dexie/dist/dexie.js"></script>0 đã được tạo. Ngay sau đó, hãy chạy lệnh này để tạo nhân viên dịch vụ

:root {
    --dark: #05152E;
    --darker: #1F2937;
    --darkest: #001E3C;
    --grey: #6B7280;
    --pink: #EC4899;
    --purple: #8B5CF6;
    --light: #EEE;
}* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Fira sans", sans-serif;
}body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #FFF;
    background-color: var(--dark);
}header {
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}header h1{ 
    font-size: 2.5rem;
    font-weight: 300;
    color: white;
    margin-bottom: 1rem;
}
h1{
    text-align: center;
}
#new-task-form {
    display: flex;
}input, button {
    appearance: none;
    border: none;
    outline: none;
    background: none;
}#new-task-input {
    flex: 1 1 0%;
    background-color: var(--darker);
    padding: 1rem;
    border-radius: 1rem;
    margin-right: 1rem;
    color: var(--light);
    font-size: 1.25rem;
}#new-task-input::placeholder {
    color: var(--grey);
}#new-task-submit {
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: 700;
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: 0.4s;
}#new-task-submit:hover {
    opacity: 0.8;
}#new-task-submit:active {
    opacity: 0.6;
}main {
    flex: 1 1 0%;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}.task-list {
    padding: 1rem;
}.task-list h2 {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--grey);
    margin-bottom: 1rem;
}#tasks .task {
    display: flex;
    justify-content: space-between;
    background-color: var(--darkest);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}.task .content {
    flex: 1 1 0%;
}.task .content .text {
    color: var(--light);
    font-size: 1.125rem;
    width: 100%;
    display: block;
    transition: 0.4s;
}.task .content .text:not(:read-only) {
    color: var(--pink);
}.task .actions {
    display: flex;
    margin: 0 -0.5rem;
}.task .actions button {
    cursor: pointer;
    margin: 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.4s;
}.task .actions button:hover {
    opacity: 0.8;
}.task .actions button:active {
    opacity: 0.6;
}.task .actions .edit {
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}.task .actions .delete {
    color: crimson;
}

https://unpkg.com/dexie/dist/dexie.js"></script>1. Sau đó thêm mã này dưới đây

:root {
    --dark: #05152E;
    --darker: #1F2937;
    --darkest: #001E3C;
    --grey: #6B7280;
    --pink: #EC4899;
    --purple: #8B5CF6;
    --light: #EEE;
}* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Fira sans", sans-serif;
}body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #FFF;
    background-color: var(--dark);
}header {
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}header h1{ 
    font-size: 2.5rem;
    font-weight: 300;
    color: white;
    margin-bottom: 1rem;
}
h1{
    text-align: center;
}
#new-task-form {
    display: flex;
}input, button {
    appearance: none;
    border: none;
    outline: none;
    background: none;
}#new-task-input {
    flex: 1 1 0%;
    background-color: var(--darker);
    padding: 1rem;
    border-radius: 1rem;
    margin-right: 1rem;
    color: var(--light);
    font-size: 1.25rem;
}#new-task-input::placeholder {
    color: var(--grey);
}#new-task-submit {
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: 700;
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: 0.4s;
}#new-task-submit:hover {
    opacity: 0.8;
}#new-task-submit:active {
    opacity: 0.6;
}main {
    flex: 1 1 0%;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}.task-list {
    padding: 1rem;
}.task-list h2 {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--grey);
    margin-bottom: 1rem;
}#tasks .task {
    display: flex;
    justify-content: space-between;
    background-color: var(--darkest);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}.task .content {
    flex: 1 1 0%;
}.task .content .text {
    color: var(--light);
    font-size: 1.125rem;
    width: 100%;
    display: block;
    transition: 0.4s;
}.task .content .text:not(:read-only) {
    color: var(--pink);
}.task .actions {
    display: flex;
    margin: 0 -0.5rem;
}.task .actions button {
    cursor: pointer;
    margin: 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.4s;
}.task .actions button:hover {
    opacity: 0.8;
}.task .actions button:active {
    opacity: 0.6;
}.task .actions .edit {
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}.task .actions .delete {
    color: crimson;
}

Sau đó, thêm liên kết đến tệp kê khai vào phần đầu của tệp

:root {
    --dark: #05152E;
    --darker: #1F2937;
    --darkest: #001E3C;
    --grey: #6B7280;
    --pink: #EC4899;
    --purple: #8B5CF6;
    --light: #EEE;
}* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Fira sans", sans-serif;
}body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #FFF;
    background-color: var(--dark);
}header {
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}header h1{ 
    font-size: 2.5rem;
    font-weight: 300;
    color: white;
    margin-bottom: 1rem;
}
h1{
    text-align: center;
}
#new-task-form {
    display: flex;
}input, button {
    appearance: none;
    border: none;
    outline: none;
    background: none;
}#new-task-input {
    flex: 1 1 0%;
    background-color: var(--darker);
    padding: 1rem;
    border-radius: 1rem;
    margin-right: 1rem;
    color: var(--light);
    font-size: 1.25rem;
}#new-task-input::placeholder {
    color: var(--grey);
}#new-task-submit {
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: 700;
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: 0.4s;
}#new-task-submit:hover {
    opacity: 0.8;
}#new-task-submit:active {
    opacity: 0.6;
}main {
    flex: 1 1 0%;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}.task-list {
    padding: 1rem;
}.task-list h2 {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--grey);
    margin-bottom: 1rem;
}#tasks .task {
    display: flex;
    justify-content: space-between;
    background-color: var(--darkest);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}.task .content {
    flex: 1 1 0%;
}.task .content .text {
    color: var(--light);
    font-size: 1.125rem;
    width: 100%;
    display: block;
    transition: 0.4s;
}.task .content .text:not(:read-only) {
    color: var(--pink);
}.task .actions {
    display: flex;
    margin: 0 -0.5rem;
}.task .actions button {
    cursor: pointer;
    margin: 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.4s;
}.task .actions button:hover {
    opacity: 0.8;
}.task .actions button:active {
    opacity: 0.6;
}.task .actions .edit {
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}.task .actions .delete {
    color: crimson;
}

9 của chúng tôi. Bây giờ hãy đẩy những thay đổi này vào repo của bạn

Thử nghiệm ứng dụng trên thiết bị di động

Cuối cùng, chúng tôi đã hoàn thành ứng dụng Di động của mình chỉ bằng cách sử dụng HTML, CSS và Javascript. Hãy tiếp tục và truy cập URL được lưu trữ của bạn và cài đặt ứng dụng của bạn trên thiết bị di động của bạn

Phần kết luận

chúc mừng. về làm cho nó ở đây. Bạn đã học cách thiết lập ứng dụng dành cho thiết bị di động bằng kiến thức về công nghệ web cơ bản và tổng quan về PWAs. Bạn có thể tiến xa hơn và mở rộng kiến thức của mình bằng cách sử dụng các khung khác để giúp bạn thêm nhiều khả năng hơn vào ứng dụng của mình

Bạn có thể xây dựng ứng dụng di động bằng HTML không?

HTML là ngôn ngữ đánh dấu mà bạn có thể sử dụng để tạo các ứng dụng và trang web dành cho thiết bị di động .

Tôi có thể sử dụng HTML để tạo ứng dụng Android không?

Câu trả lời ngắn. Có, bạn có thể phát triển ứng dụng bằng HTML/CSS/Javascript .

Tôi có thể tạo ứng dụng bằng HTML và CSS không?

HTML, CSS và Javascript có thực sự được sử dụng để xây dựng các Ứng dụng dành cho Máy tính để bàn không? . yes.

Bạn có thể tạo ứng dụng iOS bằng HTML không?

Đó là sự thật. nếu bạn biết HTML, CSS và JavaScript, bạn đã có những công cụ cần thiết để phát triển ứng dụng iPhone của riêng mình . Với cuốn sách này, bạn sẽ học cách sử dụng các công nghệ web mã nguồn mở này để thiết kế và xây dựng ứng dụng cho iPhone và iPod Touch trên nền tảng bạn chọn mà không cần sử dụng Objective-C hoặc Cocoa.