Visual Studio cordova, cách đơn giản để "tải lại trực tiếp" trên thiết bị Android?

Question

Chỉ cần bắt đầu để kiểm tra quy trình làm việc phát triển ứng dụng cordova với Visual Studio 2015.

Câu hỏi của tôi là khi gỡ lỗi trên thiết bị Android thực tế (giả sử ver> 4.4) có cách để đạt được "tải lại trực tiếp" (thực hiện thay đổi) trong JS/CSS/HTML và chúng trở nên hoạt động mà không cần khởi động lại quá trình xây dựng). Tôi có thể undestand rằng thêm/gỡ bỏ các plugin từ dự án sẽ là nhiều hơn nữa một vấn đề cho một tải lại sống (do mã nguồn gốc cần phải được xây dựng) nhưng đối với mã javascript của chúng tôi, sẽ không được chỉ cập nhật các tập tin trên mục tiêu? Tôi không thực sự quan tâm đến việc tự động cập nhật mục tiêu mà không có sự tương tác của người dùng, tôi chỉ cần tránh tốn thời gian quá trình xây dựng lại, khi cần thay đổi nhỏ thường xuyên. Tôi đọc khuôn khổ Ionic đã làm điều đó rồi, nhưng liệu người ta có cần phải có ion để làm điều đó không? Tôi cũng đã thấy/thử nghiệm rằng với phonegap, nhưng tôi không thích đi theo cách này.

Tôi có màu xanh lá cây, nhưng tôi cho rằng tải lại trực tiếp sẽ chỉ liên quan đến máy chủ http tĩnh trỏ đến nguồn của chúng tôi (quản lý 'cordova.js' ảo và tương tự) cộng với thứ gì đó như thay đổi html bắt đầu của dự án thành trỏ đến máy chủ của chúng tôi thay vì tệp (hoặc thậm chí là nút 'tải lại' trên ứng dụng của chúng tôi). Không phải là trường hợp? Tôi đoán im sai một nơi nào đó, nếu không tôi sẽ mong đợi để xem đó là vấn đề tiêu chuẩn V/S. Chỉ cần nói. Nếu không phải là một điều V/S, có một công cụ/plugin ra có để cài đặt cho điều đó?

Xin lỗi cho câu hỏi/bài đăng dài. Nhận xét/hướng dẫn được đánh giá cao

Answer 1

Giải pháp của tôi cho điều này là yêu cầu ứng dụng tải xuống động các tệp Javascript bổ sung thông qua các phương pháp tải xuống Cordova tiêu chuẩn và sau đó thêm liên kết vào chúng trong mã. Chúng thực thi thời điểm bạn thêm thẻ HTML Script vào trang chỉ mục.

Không có câu trả lời nào nhiều, nhưng có thể dẫn bạn đi đúng hướng.

Edit:

Hãy thử một cái gì đó như thế này để tải về các kịch bản:

var ft = new FileTransfer(); 
ft.download([VARIOUS PARAMS YOU CAN FIND ONLINE]); 

Và điều này để đưa vào dự án:

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = [PATH YOU GOT FROM THE DOWNLOAD ABOVE]; 
var head = document.getElementsByTagName('head')[0]; 
head.appendChild(script); 

Xin lỗi vì mã không hoạt động, nhưng đó là tất cả tôi có thời gian cho công việc! XD

Answer 2

Sau khi nhìn xung quanh một chút, tôi quyết định tạo một giải pháp đơn giản để giải quyết vấn đề này và tôi đang đăng bài này cho tất cả mọi người quan tâm cũng làm như vậy. Tất cả chúng ta cần là một máy chủ tập tin http tĩnh trỏ đến android xây dựng thư mục:

<project_folder>/platforms/android/assets/www 

Nó như vậy sẽ xảy ra sau khi một xây dựng thành công, thư mục có tất cả các file để phục vụ, bao gồm cordova.js, cordova_plugins.js và cả plugins thư mục với tệp javascript của họ.

Vì nút hiện diện, thật dễ dàng để tạo một máy chủ http 'nhanh' với nút/express. Đây là kịch bản tôi soạn thảo (cảm thấy tự do để sửa đổi cho nhu cầu của bạn).

livesrv.js:

var express  = require('express'); 
var server  = express(); 
var http  = require('http').Server(server); 
var port  = 80; 
var static_root = process.argv[2] || '<YOUR_PROJECT_FOLDER>/platforms/android/assets/www'; 

server.all('/*', function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}); 

server.use(function(req, res, next) 
{ 
    console.log('--> '+req.url); 
    if(req.url.match(/(.png|.jpg|.jpeg|.svg|.woff|.woff2|.ttf|.otf|.eot)/)) { 
    res.header('Cache-Control', 'max-age=691200'); 
    } else { 
    res.header('Cache-Control', 'max-age=0, no-cache, no-store, must-revalidate'); 
    res.header('Pragma', 'no-cache'); 
    res.header('Expires', 'Thu, 01 Jan 1970 00:00:01 GMT'); 
    } 
    next(); 
}); 

server.use(express.static(static_root)); 

http.listen(port, function() { 
    console.log("startup: server started @ port " + port + ", root:"+static_root); 
}); 

Khi bạn khởi động ứng dụng nút này, các file dự án của bạn (js/css/html) có thể nhìn thấy các bản cập nhật trực tiếp từ điện thoại của bạn (Chú ý: đây cho thấy nguồn của bạn, vì vậy bạn phải có một số ý tưởng gì bạn đang làm trước khi sử dụng tập lệnh này). Đối với những người cần hướng dẫn chi tiết:

• Lưu đoạn mã trên vào một tập tin 'livesrv.js' trong một thư mục trống
• Mở một dấu nhắc lệnh đến thư mục đó
• Run một lần 'NPM cài đặt nhanh' (nếu không được cài đặt trên toàn cầu)
• Chạy máy chủ bằng lệnh

node livesrv <your_project_folder>/platforms/android/assets/www

Bước tiếp theo: thay đổi config.xml HTML khởi đầu của dự án của bạn để trỏ vào tập tin HTML khác (trong trường hợp này tôi đã chọn 'main.html')

Tạo 'main.html' là không có gì hơn một 'bootstrap' cho máy chủ.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="Content-Security-Policy" content=""> 
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> 
</head> 
<body> 
    <script> 
     console.log("Starting.."); 
     setTimeout(function() { 
      console.log("Booting app.."); 
      window.location.href = "http://<YOUR_SERVER_IP>/index.html"; 
     }, 200); 
    </script> 
</body> 
</html> 

Tất cả điều này là tải `index.html 'từ máy chủ. Đừng quên cập nhật YOUR_SERVER_IP bằng chính bạn (địa chỉ ip của máy chủ chạy máy chủ nút).

Bước cuối cùng: Tôi đặt nút webapp vào một nơi nào đó (bạn có thể sử dụng phần 'tĩnh' của ứng dụng, ví dụ như biểu tượng cố định nếu bạn có), cho phép bạn kích hoạt lại.

$('#mylogo').on('click', function() { 
    console.log("Reloading.."); 
    window.location.reload(); 
}); 

Và điều đó phù hợp với tôi. Sau khi xây dựng/cài đặt ban đầu, mọi lúc tôi nhấn biểu tượng ứng dụng đang tải lại nội dung (cập nhật) từ máy chủ để không cần phải xây dựng lại. Hãy thử điều này và cho tôi biết nếu nó hoạt động cho bạn. Đừng quên cho phép kết nối thiết bị với máy chủ (ví dụ: bật wifi!)

Để phát hành ứng dụng, hãy đổi lại điểm bắt đầu thành index.html và xóa nút tải lại.

Nhược điểm/hạn chế:

• Khi bạn tải lại, kết nối DOM visual studio của bị mất với ứng dụng mục tiêu (ít nhất là trong các thử nghiệm của tôi)
• Nhìn chung phải là một giải pháp đơn giản/tự động.
• Không cần phải xây dựng lại nếu bạn đã thêm plugin sau lần xây dựng thực tế cuối cùng.

Lợi ích:

• ứng dụng tức thì trên thiết bị cập nhật, loại bỏ thời gian xây dựng khi có thay đổi trong nội dung js/css/html

tôi có thể đã bỏ qua điều gì đó, đặc biệt nếu có các dịch vụ sẵn sàng mà tôi có thể sử dụng để đạt được điều này, vì vậy nếu bạn biết bất cứ điều gì đơn giản hóa điều này xin vui lòng cho tôi biết. Vì vậy, cảm thấy tự do để critisize tất cả các bên trên như tôi rất quan tâm để đọc ý tưởng của bạn. Btw, nếu bất cứ ai quan tâm để làm cho một plugin của V/S, tôi thực sự rất thích sử dụng nó.

Chúc mừng!