Code Monkey home page Code Monkey logo

web2img's Introduction

Web2Img

Web2Img is a tool to bundle your web files into a single image, and extract them via Service Worker at runtime.

You can use image hosting sites as free CDNs to save bandwidth costs.

intro.png

Tool

Try It Online: https://etherdream.github.io/web2img/

OR: https://etherdream.com/web2img/ (latest)

demo.mp4

Example

Demo: https://fanhtml5.github.io

Target Files: https://github.com/fanhtml5/fanhtml5.github.io (only 2 files)

Source Files: https://github.com/fanhtml5/test-site

FAQ

Q: What if JavaScript is disabled?

A: Unfortunately, the page can't be displayed. You can add a fallback in 404.html such as:

<noscript>
  <meta http-equiv=Refresh content="0;url=FALLBACK_URL">
</noscript>
<script src=/x.js></script>

Q: What if the browser doesn't support Service Worker?

A: Same as above. The program will read the contents of <noscript> and render them.


Q: Is free CDN safe?

A: Yes, the program will verify the data integrity.


Q: Is free CDN stable?

A: Not sure, but you can provide multiple URLs to improve stability.


Q: Can any free CDN be used?

A: No, CDN must enable CORS, allow empty referrer and "null" origin (or real value).


Q: Would it be better to optimize the image before uploading?

A: If the server will re-encode the image, it makes no difference.


Q: Why use 404.html?

A: It's an easy way to intercept any path.


Q: How to update files?

A: Just overwrite x.js, the client polls this file every 2 minutes.


Q: Will new features be added?

A: This project is just an experiment, there is a new project named freecdn which is much more powerful. (better docs will be released soon)

License

MIT

web2img's People

Contributors

etherdream avatar kuritonasu avatar lundstrj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

web2img's Issues

How to deal with history route mode?

I have a single page website which use history route mode.
In the past I use nginx configuration like:

location / {
  try_files $uri $uri/ /index.html;
}

to serve all path with index.html.
But how can I deal with history route mode in this project?

Not an issue

I'm curious which tool did u used to draw this picture? Thanks in advance.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.